Strona główna Odkrywaj Pomoc
Zaloguj się
lovecoding
/
VIP26
9
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

fix:dat11

e 1 rok temu
rodzic
1bd49a183f
commit
2825bb1142
12 zmienionych plików z 264 dodań i 0 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 80 0
      day11/html/2.Bom.html
  2. 12 0
      day11/html/3.window.html
  3. 15 0
      day11/html/4.history对象.html
  4. 11 0
      day11/html/5.Location对象.html
  5. 11 0
      day11/html/6.Navigator对象.html
  6. 19 0
      day11/html/test1.html
  7. 18 0
      day11/html/test2.html
  8. 43 0
      day11/js/2.Bom.js
  9. 24 0
      day11/js/3.window.js
  10. 11 0
      day11/js/4.history对象.js
  11. 9 0
      day11/js/5.Location对象.js
  12. 11 0
      day11/js/6.Navigator对象.js

+ 80 - 0
day11/html/2.Bom.html
Wyświetl plik 

@@ -0,0 +1,80 @@
 
+<!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>
 
+    <!-- 
+        JavaScript：
 
+            ECMAScript 核心
 
+            BOM 浏览器对象模型
 
+            DOM 文档对象模型
 
+     -->
 
+     <!-- 
+        为什么HTML中要使用语义化？
 
+         1.快速的阅读代码
 
+         2.方便搜索引擎提取重要的信息
 
+      -->
 
+      <!-- 
+        驼峰命名法：第二个单词的首字母大写
 
+       -->
 
+       <div>
 
+        <button id="btn1">往下走</button>
 
+        <button id="btn3">清除</button>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <h4>哈哈哈哈哈哈哈哈</h4>
 
+            <button id="btn2">往上走</button>
 
+       </div>
 
+    <script src="../js/2.Bom.js"></script>
 
+</body>
 
+</html>

+ 12 - 0
day11/html/3.window.html
Wyświetl plik 

@@ -0,0 +1,12 @@
 
+<!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="btn">执行</button>
 
+    <script src="../js/3.window.js"></script>
 
+</body>
 
+</html>

+ 15 - 0
day11/html/4.history对象.html
Wyświetl plik 

@@ -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>
 
+    history页面
 
+    <a href="./test2.html">附页</a>
 
+    <button id="btn">返回上一页</button>
 
+    <button id="btn1">下一页</button>
 
+    <script src="../js/4.history对象.js"></script>
 
+</body>
 
+</html>

+ 11 - 0
day11/html/5.Location对象.html
Wyświetl plik 

@@ -0,0 +1,11 @@
 
+<!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 src="../js/5.Location对象.js"></script>
 
+</body>
 
+</html>

+ 11 - 0
day11/html/6.Navigator对象.html
Wyświetl plik 

@@ -0,0 +1,11 @@
 
+<!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 src="../js/6.Navigator对象.js"></script>
 
+</body>
 
+</html>

+ 19 - 0
day11/html/test1.html
Wyświetl plik 

@@ -0,0 +1,19 @@
 
+<!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>
 
+    页面一
 
+    <a href="./4.history对象.html">进入history页面</a>
 
+    <button id="btn">go</button>
 
+    <script>
 
+        var btn = document.getElementById("btn");
 
+        btn.onclick = function() {
 
+            history.go(2);
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 18 - 0
day11/html/test2.html
Wyświetl plik 

@@ -0,0 +1,18 @@
 
+<!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="btn">返回</button>
 
+    <script>
 
+        var btn = document.getElementById("btn");
 
+        btn.onclick = function() {
 
+            history.go(-2);
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 43 - 0
day11/js/2.Bom.js
Wyświetl plik 

@@ -0,0 +1,43 @@
 
+// 获取id命名的标签
 
+var btn1 = document.getElementById("btn1");
 
+var btn2 = document.getElementById("btn2");
 
+var a;
 
+// 点击事件
 
+btn1.onclick = function(){
 
+    // 定时器
 
+    a = setInterval(function(){
 
+        // scrollTo(x,y) 相对于窗口
 
+        // scrollBy(x,y) 相对于当前位置
 
+        // scrollBy(0,200);
 
+        // 滚动高度
 
+        // document.body.scrollTop 
+        // document.documentElement.scrollTop
 
+        // scrollBy(0,200)
 
+        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
 
+        // console.log(scrollTop)
 
+        if(scrollTop < 1799) {
 
+            scrollBy(0,200);
 
+        } else {
 
+            clearInterval(a);
 
+            window.alert("到底了");
 
+        }
 
+    },500)
 
+    // setInterval(function(){},时间)
 
+
 
+}
 
+// var btn3 = document.getElementById("btn3");
 
+// btn3.onclick = function() {
 
+//     // 清除定时器的方法 clearInterval()
 
+//     clearInterval(a);
 
+// }
 
+btn2.onclick = function() {
 
+    var b = setInterval(function(){
 
+        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 
+        if(scrollTop > 0) {
 
+            scrollBy(0,-200);
 
+        } else {
 
+            clearInterval(b);
 
+            alert("回到顶部了");
 
+        }
 
+    },1000)
 
+}

+ 24 - 0
day11/js/3.window.js
Wyświetl plik 

@@ -0,0 +1,24 @@
 
+// window对象方法
 
+// 1.scrollTo(x,y)
 
+// 2.scrollBy(x,y)
 
+// 3.alert() 警告框 window.alert
 
+// 4.prompt("默认提示内容",默认内容) 输入框
 
+// prompt("请输入年级",18);
 
+// 5.confirm() 确认框
 
+// confirm("你好么")
 
+// 定时器
 
+// setInterval(执行的方法,间隔的时间)
 
+// 清除定时器 clearInterval()
 
+// document.getElementById("id名字")
 
+// document.getElementById("btn")
 
+// setTimeOut 延时器
 
+// clearTimeout() 清除延时器
 
+var btn = document.getElementById("btn");
 
+// console.log(btn)
 
+btn.onclick = function() {
 
+    // console.log("打印")
 
+    setTimeout(function(){
 
+        console.log("打印")
 
+    },3000)
 
+    // clearTimeout()
 
+}

+ 11 - 0
day11/js/4.history对象.js
Wyświetl plik 

@@ -0,0 +1,11 @@
 
+var btn = document.getElementById("btn");
 
+btn.onclick = function() {
 
+    history.back();
 
+    // history.back() 返回history上一个url
 
+}
 
+var btn1 = document.getElementById("btn1");
 
+btn1.onclick = function() {
 
+    history.forward();
 
+    // history.forward() 进入history下一个url
 
+}
 
+// history.go(num) 想跳转哪个页面 就填对应层级数字

+ 9 - 0
day11/js/5.Location对象.js
Wyświetl plik 

@@ -0,0 +1,9 @@
 
+// hash 设置或返回从井号 (#) 开始的 URL（锚）
 
+// host 设置或返回主机名和当前 URL 的端口号
 
+// hostname 设置或返回当前 URL 的主机名
 
+// href 设置或返回完整的 URL
 
+// pathname 设置或返回当前 URL 的路径部分
 
+// port 设置或返回当前 URL 的端口号
 
+// protocol 设置或返回当前 URL 的协议
 
+// search 设置或返回从问号 (?) 开始的 URL（查询部分）
 
+// console.log(location.hash);

+ 11 - 0
day11/js/6.Navigator对象.js
Wyświetl plik 

@@ -0,0 +1,11 @@
 
+// appCodeName 返回浏览器的代码名
 
+// appName 返回浏览器的名称
 
+// appVersion 返回浏览器的平台和版本信息
 
+// browserLanguage 返回当前浏览器的语言
 
+// cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
 
+// cpuClass 返回浏览器系统的 CPU 等级
 
+// onLine 返回指明系统是否处于脱机模式的布尔值
 
+// platform 返回运行浏览器的操作系统平台
 
+// systemLanguage 返回 OS 使用的默认语言
 
+// userAgent 返回由客户机发送服务器的 user-agent 头部的值
 
+// userLanguage 返回 OS 的自然语言设置