fengchuanyu 3 viikkoa sitten
vanhempi
commit
71e63b8cf3

+ 32 - 0
4-BOM&DOM/5_BOM简介.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div id="box">hello</div>
+    <script>
+        // BOM 浏览器对象模型 Browser Object Model  在js中用window来表示
+        // BOM 所代表就是浏览器 浏览器也为js 预留了一些方法用来操作浏览器
+        // BOM 要大于 DOM 因为BOM是浏览器的方法 而DOM是浏览器的页面
+        // 
+
+        var box = window.document.getElementById("box");
+        console.log(box);
+
+        // window这个对象在代码过程中是可以省略的
+
+
+        // 弹框
+        // alert("hello world");
+        // window.alert("hello world")
+        // 确认框
+        // confirm("你确定要删除吗?");
+        // 提示框
+        // prompt("请输入你的姓名");
+        
+    </script>
+</body>
+</html>

+ 20 - 0
4-BOM&DOM/6_BOM地址栏.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        // location 地址栏
+        // 在location中 有一个属性 href 可以获取当前页面的地址
+        // 可以通过 href 来设置当前页面的地址 href属性是可读可写
+        var _url = window.location;
+        
+        var _href = window.location.href
+        console.log(_url,_href);
+        window.location.href = "https://www.baidu.com";
+    </script>
+</body>
+</html>

+ 58 - 0
4-BOM&DOM/7_BOM定时器.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        // 定时器 属于BOM对象下的方法
+        // 在指定间隔时间后自动执行
+        // 只执行一次的定时器
+        // window.setTimeout()
+        // window 可以省略不写
+        // setTimout 有两个参数 第一个是函数 匿名函数(到达指定时间后要做的事情) 第二个是时间 间隔的时间 毫秒单位
+        // setTimeout(function(){
+        //     console.log("hello world");
+        // },2000);
+
+        // 可以重复执行的定时器
+        // window 可以省略
+        // window.setInterval();
+        // setInterval 有两个参数 第一个是函数 匿名函数(到达指定时间后要做的事情) 第二个是时间 间隔的时间 毫秒单位
+        // setInterval 每个间隔时间后重复执行
+        // setInterval(function(){
+        //     console.log("hello world");
+        // },1000);
+
+
+        // 清除定时器 结束定时器的执行
+        // clearTimeout() 用来清除 setTimeout() 方法设置的定时器
+        // clearInterval() 用来清除 setInterval() 方法设置的定时器
+
+        // setTimeout 和 setInterval 都有返回值 返回定时器的唯一表示
+
+        // var timer = setTimeout(function(){
+        //     console.log("hello");
+        // },3000);
+
+        // var timer2 = setTimeout(function(){
+        //     console.log("hello2");
+        // },3000);
+
+        // console.log(timer,timer2);
+
+        // clearTimeout(timer);
+        // clearTimeout(timer2);
+
+
+        var timer = setInterval(function(){
+            console.log("hello world");
+        },1000);
+
+        // 清除定时器
+        clearInterval(timer);
+    </script>
+</body>
+</html>

+ 17 - 0
4-BOM&DOM/练习1_DOM点赞.html

@@ -56,12 +56,29 @@
         <div class="like-text">点击心形图标进行点赞</div>
     </div>
     <script>
+        // 功能一 实现向标签内插入数组
         // 获取数字标签 返回类数组
         var likeIcon = document.getElementsByClassName("like-num");
         // 从类数组中取出数字标签
         likeIcon = likeIcon[0];
         // 向数字标签中写入内容
         likeIcon.innerText = 0;
+
+        // 功能二实现累加
+        // 获取心形图标
+        var likeBtn = document.getElementsByClassName("iconfont");
+        // 从数组中取出心形图标
+        likeBtn = likeBtn[0];
+        // 给心形图标添加点击事件
+        // 定义变量用作于累计的数字
+        var num = 0;
+        likeBtn.onclick = function(){
+            // 让num进行一个累加操作
+            num++;
+            // 把累加后的数字赋值给数字标签
+            likeIcon.innerText = num;
+        }
+
     </script>
 </body>
 </html>