1_认识BOM&DOM.html 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. .box{
  9. width: 200px;
  10. height: 2000px;
  11. background-color: red;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div class="box"></div>
  17. <script>
  18. // BOM 浏览器对象模型 是浏览器提供的一个对象模型,用于操作浏览器窗口和文档
  19. // window对象是BOM的根对象,所有浏览器对象都是window对象的属性或方法
  20. // 例如:alert()、prompt()、confirm()等
  21. // window.prompt("请输入姓名");
  22. var a = 10;
  23. window.console.log(window.a);
  24. //window下的 location对象 用于操作浏览器窗口的URL 地址栏
  25. console.log(window.location.href);
  26. // window 下的 方法 可以控制滚动条的位置
  27. window.scrollTo(0,100);
  28. // window 下的 定时器
  29. // 定时器分为两种:setTimeout()和setInterval()
  30. // setTimeout() 用于在指定的时间后执行一次指定的代码 仅可以执行一次
  31. // setInterval() 用于在指定的时间间隔内重复执行指定的代码 可以重复执行执行多次
  32. // setTimeout() 有两个参数 第一个参数是回调函数(时间到了后要执行的代码) 第二个参数是时间间隔(单位为毫秒 1000毫秒=1秒)
  33. // window.setTimeout(function(){
  34. // console.log("hello world");
  35. // },1000);
  36. // setInterval() 有两个参数 第一个参数是回调函数(时间到了后要执行的代码) 第二个参数是时间间隔(单位为毫秒 1000毫秒=1秒)
  37. // window.setInterval(function(){
  38. // console.log("hello world");
  39. // },1000);
  40. // 清除定时器
  41. // clearTimeout() 用于清除setTimeout()设置的定时器 括号内填写对应定时器的编号/返回值
  42. // clearInterval() 用于清除setInterval()设置的定时器 括号内填写对应定时器的编号/返回值
  43. // 例如:clearTimeout(timer);
  44. // 例如:clearInterval(timer);
  45. var timer1 = setTimeout(function(){
  46. console.log("hello world");
  47. },3000)
  48. console.log(timer1);
  49. clearTimeout(timer1);
  50. var timer2 = setInterval(function(){
  51. console.log("hello world");
  52. },1000)
  53. console.log(timer2);
  54. clearInterval(timer2);
  55. // window 下的 Document对象 用于操作HTML文档
  56. // 称为 DOM 文档对象模型
  57. </script>
  58. </body>
  59. </html>