e 2 долоо хоног өмнө
parent
commit
36ded4694a

+ 66 - 0
3.js初级/BOM/1.BOM.html

@@ -0,0 +1,66 @@
+<!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>
+    <button id="btn1">往下走</button>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <h2>哈哈哈哈哈哈</h2>
+    <button id="btn2">往上走</button>
+    <script>
+        /**
+         * JS:
+         * BOM:Browser Object Model (浏览器 对象 模型)
+         * DOM:Document Object Model (文档 对象 模型)
+         * ECMAScript:es(2015,2020,2021 =>5,6,7,8)
+        */
+        //获取元素标签
+        var btn1 = document.getElementById("btn1");
+        var btn2 = document.getElementById("btn2");
+        console.log(btn1,btn2,'按钮')
+        // 给元素添加点击事件
+        btn1.onclick = function() {
+            // scrollTo(x,y)距离窗口跳转
+            // scrollBy(x,y)距离自身跳转
+            // 每一秒钟执行一件事
+            // 定时器
+           var timer = setInterval(function(){
+                var scrollMain = document.documentElement.scrollTop || document.body.scrollTop;
+                console.log(scrollMain,'12')
+                console.log("执行")
+                if(scrollMain <= 706) {
+                    scrollBy(0,200)
+                } else {
+                    clearInterval(timer)
+                }
+            },1000)
+        }
+    </script>
+</body>
+</html>

+ 29 - 0
3.js初级/BOM/2.Math.html

@@ -0,0 +1,29 @@
+<!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>
+    <!-- 
+        变量:
+            var xxx;
+        字面量:
+            1 2 5 8 true hello
+    -->
+        <script>
+            document.write(Math.PI + '<br/>');//常量π
+            document.write(Math.E);//常量
+            console.log(Math.ceil(3.1456));//向上取整
+            console.log(Math.floor(3.1456));//向下取整
+            console.log(Math.abs(-8));//绝对值
+            console.log(Math.round(10.28));//四舍五入
+            console.log(Math.random() * 10);//随机数
+            console.log(Math.pow(3,3));//x的y次幂
+            console.log(Math.sqrt(16));//x的算数平方根
+            // 固定范围内随机数
+            // 固定范围内随机数取整(四舍五入)
+        </script>
+</body>
+</html>