Home Explore Help
Sign In
lovecoding
/
web0331
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fix:BOM

e 2 weeks ago
parent
89567216ad
commit
a71fa95864
5 changed files with 125 additions and 0 deletions
Split View Show Diff Stats
  1. 42 0
      3.js初级/DOM/1.倒计时.html
  2. 34 0
      3.js初级/DOM/2.获取标签.html
  3. 26 0
      3.js初级/DOM/3.demo.html
  4. 15 0
      3.js初级/DOM/4.onload.html
  5. 8 0
      3.js初级/DOM/4.onload.js

+ 42 - 0
3.js初级/DOM/1.倒计时.html
View File 

@@ -0,0 +1,42 @@
 
+<!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>
 
+        p {
 
+            width: 600px;
 
+            height: 300px;
 
+            border: 1px solid #000;
 
+            text-align: center;
 
+            line-height: 300px;
 
+            font-size: 36px;
 
+            margin: 150px auto;
 
+        }
 
+        p span {
 
+            color:red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <p>倒计时：<span>0</span>天<span>0</span>时<span>0</span>分<span>0</span>秒</p>
 
+    <script>
 
+        function showTime() {
 
+            var spans = document.querySelectorAll("span");
 
+            var endTime = new Date('2025-5-1 12:00').getTime();
 
+            var beginTime = Date.now();
 
+            var diffTime = (endTime - beginTime) / 1000
 
+            var days = parseInt(diffTime / 60 / 60 / 24);
 
+            var hours = parseInt(diffTime / 60 / 60 % 24);
 
+            var minutes = parseInt(diffTime / 60 % 60 );
 
+            var seconds = parseInt(diffTime % 60 );
 
+            spans[0].innerText = days;
 
+            spans[1].innerText = hours;
 
+            spans[2].innerText = minutes;
 
+            spans[3].innerText = seconds;
 
+        }
 
+        setInterval(showTime,1000)
 
+    </script>
 
+</body>
 
+</html>

+ 34 - 0
3.js初级/DOM/2.获取标签.html
View File 

@@ -0,0 +1,34 @@
 
+<!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="btn">这是一个按钮</div>
 
+    <div class="vase">这是一个花瓶</div>
 
+    <ul class="hi">
 
+        <li>你好</li>
 
+        <li>你好</li>
 
+        <li>你好</li>
 
+    </ul>
 
+    <script>
 
+        // 1.获取ID选择器
 
+        var btn = document.getElementById("btn");
 
+        console.log(btn,'第一个')
 
+        // 2.通过css选择器获取标签内容
 
+        var vase = document.querySelector(".vase");
 
+        console.log(vase,'第二个')
 
+        // 3.通过css选择器  获取所有标签内容 获取数组
 
+        var list = document.querySelectorAll(".hi li");
 
+        console.log(list,'第三个')
 
+        // 4.获取类选择器 获取数组
 
+        var news = document.getElementsByClassName("vase");
 
+        console.log(news,'第四个')
 
+        // 5.通过标签名获取 获取数组
 
+        var flower = document.getElementsByTagName("ul");
 
+        console.log(flower,'第五个')
 
+    </script>
 
+</body>
 
+</html>

+ 26 - 0
3.js初级/DOM/3.demo.html
View File 

@@ -0,0 +1,26 @@
 
+<!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: 300px;
 
+            height: 300px;
 
+            background: aqua;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <button id="btn">改变</button>
 
+    <div class="box"></div>
 
+    <script>
 
+        var btn = document.getElementById("btn");
 
+        var box = document.querySelector(".box");
 
+        btn.onclick = function() {
 
+            box.style.background = 'red'
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 15 - 0
3.js初级/DOM/4.onload.html
View File 

@@ -0,0 +1,15 @@
 
+<!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="main">
 
+        这是一段话
 
+    </div>
 
+    <script src="./4.onload.js">
 
+    </script>
 
+</body>
 
+</html>

+ 8 - 0
3.js初级/DOM/4.onload.js
View File 

@@ -0,0 +1,8 @@
 
+window.onload = function() {
 
+    // 等页面所有东西加载完毕  再去执行里面的内容
 
+   var news = document.getElementById("main");
 
+   console.log(news,'news')
 
+}
 
+
 
+// var news = document.getElementById("main");
 
+// console.log(news,'news')