|
|
@@ -0,0 +1,68 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ .box{
|
|
|
+ width: 200px;
|
|
|
+ height: 2000px;
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="box"></div>
|
|
|
+ <script>
|
|
|
+ // BOM 浏览器对象模型 是浏览器提供的一个对象模型，用于操作浏览器窗口和文档
|
|
|
+ // window对象是BOM的根对象，所有浏览器对象都是window对象的属性或方法
|
|
|
+ // 例如：alert()、prompt()、confirm()等
|
|
|
+
|
|
|
+ // window.prompt("请输入姓名");
|
|
|
+
|
|
|
+ var a = 10;
|
|
|
+ window.console.log(window.a);
|
|
|
+
|
|
|
+ //window下的 location对象 用于操作浏览器窗口的URL 地址栏
|
|
|
+ console.log(window.location.href);
|
|
|
+
|
|
|
+ // window 下的 方法 可以控制滚动条的位置
|
|
|
+ window.scrollTo(0,100);
|
|
|
+
|
|
|
+ // window 下的 定时器
|
|
|
+ // 定时器分为两种：setTimeout()和setInterval()
|
|
|
+ // setTimeout() 用于在指定的时间后执行一次指定的代码 仅可以执行一次
|
|
|
+ // setInterval() 用于在指定的时间间隔内重复执行指定的代码 可以重复执行执行多次
|
|
|
+
|
|
|
+ // setTimeout() 有两个参数 第一个参数是回调函数（时间到了后要执行的代码） 第二个参数是时间间隔（单位为毫秒 1000毫秒=1秒）
|
|
|
+ // window.setTimeout(function(){
|
|
|
+ // console.log("hello world");
|
|
|
+ // },1000);
|
|
|
+
|
|
|
+ // setInterval() 有两个参数 第一个参数是回调函数（时间到了后要执行的代码） 第二个参数是时间间隔（单位为毫秒 1000毫秒=1秒）
|
|
|
+ // window.setInterval(function(){
|
|
|
+ // console.log("hello world");
|
|
|
+ // },1000);
|
|
|
+
|
|
|
+ // 清除定时器
|
|
|
+ // clearTimeout() 用于清除setTimeout()设置的定时器 括号内填写对应定时器的编号/返回值
|
|
|
+ // clearInterval() 用于清除setInterval()设置的定时器 括号内填写对应定时器的编号/返回值
|
|
|
+ // 例如：clearTimeout(timer);
|
|
|
+ // 例如：clearInterval(timer);
|
|
|
+
|
|
|
+ var timer1 = setTimeout(function(){
|
|
|
+ console.log("hello world");
|
|
|
+ },3000)
|
|
|
+ console.log(timer1);
|
|
|
+ clearTimeout(timer1);
|
|
|
+
|
|
|
+ var timer2 = setInterval(function(){
|
|
|
+ console.log("hello world");
|
|
|
+ },1000)
|
|
|
+ console.log(timer2);
|
|
|
+ clearInterval(timer2);
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
