Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
class
10
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

BOM

e 1 жил өмнө
parent
a7acc42332
commit
dcdd9d9003
7 өөрчлөгдсөн 218 нэмэгдсэн , 0 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 22 0
      js/BOM/3.window.html
  2. 82 0
      js/BOM/4.scroll.html
  3. 20 0
      js/BOM/5.1_history.html
  4. 19 0
      js/BOM/5.2_history.html
  5. 32 0
      js/BOM/5.history.html
  6. 23 0
      js/BOM/6.Navigator对象.html
  7. 20 0
      js/BOM/7.Location对象.html

+ 22 - 0
js/BOM/3.window.html
Файл харах 

@@ -0,0 +1,22 @@
 
+<!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>
 
+        // window.alert("aa");//警告框
 
+        // alert("aa");
 
+        
+        //提示框 prompt("提示信息") 
+        // window.prompt("哈哈哈哈");
 
+        // prompt("提示框")
 
+
 
+        // confirm("确认框")
 
+        // window.confirm("确认框")
 
+        // confirm("确认")
 
+    </script>
 
+</body>
 
+</html>

+ 82 - 0
js/BOM/4.scroll.html
Файл харах 

@@ -0,0 +1,82 @@
 
+<!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>
 
+    <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>
 
+      /**
 
+       * 滚动
 
+       * scrollTo(x,y) 距离窗口进行跳转
 
+       * scrollBy(x,y) 距离自身位置进行跳转
 
+       * 获取跳转的高度
 
+       * document.body.scrollTop  document.documentElement.scrollTop
 
+       */
 
+      var btn1 = document.getElementById("btn1");
 
+      var btn2 = document.getElementById("btn2");
 
+      btn1.onclick = function () {
 
+        var timer = setInterval(function () {
 
+          var scrollTop =
 
+            document.body.scrollTop || document.documentElement.scrollTop;
 
+          console.log(scrollTop);
 
+          if (scrollTop < 1451) {
 
+            scrollBy(0, 200);
 
+          } else {
 
+            clearInterval(timer);
 
+            alert("到底了");
 
+          }
 
+        }, 1000);
 
+      };
 
+      btn2.onclick = function () {
 
+       var timer =  setInterval(function(){
 
+            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
 
+            if(scrollTop > 0) {
 
+                scrollBy(0, -200);
 
+            } else {
 
+                clearInterval(timer);
 
+                alert("到顶了")
 
+            }
 
+        },1000)
 
+      }
 
+    </script>
 
+  </body>
 
+</html>

+ 20 - 0
js/BOM/5.1_history.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>
 
+    <h1>二级页面</h1>
 
+    <h3>我是一个附页</h3>
 
+    <button id="home">回到主页</button>
 
+    <a href="./5.2_history.html">去附页</a>
 
+    <script>
 
+        var home = document.getElementById("home");
 
+        home.onclick = function () {
 
+            history.back()
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 19 - 0
js/BOM/5.2_history.html
Файл харах 

@@ -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>
 
+    <h1>三级页面</h1>
 
+    <h3>我是第二个附页</h3>
 
+    <button id="any">回到任意页</button>
 
+    <script>
 
+        var any = document.getElementById("any");
 
+        any.onclick = function() {
 
+            history.go(-2)
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 32 - 0
js/BOM/5.history.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>
 
+    <h1>一级页面</h1>
 
+    <a href="./5.1_history.html">附页</a>
 
+    <button id="btn1">下二页</button>
 
+    <button id="btn2">下一页</button>
 
+    <!-- 
+        history
 
+        可以进行页面跳转
 
+        history.go() 跳转到指定层级页面 上一页：-1 -2 -3；下一页 1,2,3
 
+        history.forward() 跳转到下一个url
 
+        history.back() 跳转到上一个url
 
+
 
+     -->
 
+    <script>
 
+        var btn1 = document.getElementById('btn1');
 
+        var btn2 = document.getElementById('btn2');
 
+        btn1.onclick = function() {
 
+            history.go(2);
 
+        }
 
+        btn2.onclick = function() {
 
+            history.forward()
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 23 - 0
js/BOM/6.Navigator对象.html
Файл харах 

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

+ 20 - 0
js/BOM/7.Location对象.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>
 
+        //hash 设置或返回从井号 (#) 开始的 URL（锚）
 
+        //host 设置或返回主机名和当前 URL 的端口号
 
+        //hostname 设置或返回当前 URL 的主机名
 
+        //href 设置或返回完整的 URL
 
+        //pathname 设置或返回当前 URL 的路径部分
 
+        //port 设置或返回当前 URL 的端口号
 
+        //protocol 设置或返回当前 URL 的协议
 
+        //search 设置或返回从问号 (?) 开始的 URL（查询部分）
 
+    </script>
 
+</body>
 
+</html>