zsydgithub 1 year ago
parent
commit
d4441d65d3
6 changed files with 267 additions and 0 deletions
  1. 122 0
      BOM/1_test.html
  2. 51 0
      BOM/2_定时器.html
  3. 16 0
      BOM/3_弹出框.html
  4. 20 0
      BOM/4_history.html
  5. 39 0
      BOM/5_location.html
  6. 19 0
      BOM/test.html

+ 122 - 0
BOM/1_test.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <button id="btn">回到底部</button>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <div>hhhhhhhhhhhhhhhhhhhhhhh</div>
+  <button id="top">回到顶部</button>
+  
+  
+  <script>
+    var btn = document.getElementById('btn')
+    var top = document.getElementById('top')
+    /* 点击事件 */
+    //scrollBy(0,500)  在窗体有滚动条的时候  从当前的位置 移动多少距离
+    //scrollTo(0,500)  定位在那个距离
+    btn.onclick = function(){
+      // scrollBy(0,500)  
+      scrollTo(0,995.2000122070312)
+      // 获取滚动条
+      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+      console.log(scrollTop)
+    }
+
+    top.onclick = function(){
+      var b = setInterval(function(){
+        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+        if(scrollTop > 0){
+          scrollBy(0,-30)
+        } else {
+          clearInterval(b)
+          console.log('我挂掉了')
+        }
+      },100)
+    }
+  </script>
+</body>
+</html>

+ 51 - 0
BOM/2_定时器.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <button id="btn">按钮A</button>
+  <button id="btnB">按钮B</button>
+  <button id="stop">停止</button>
+  <button id="btnC">按钮C</button>
+  
+  <script>
+    var btn = document.getElementById('btn')
+    var btnB = document.getElementById('btnB')
+    var stop = document.getElementById('stop')
+    var btnC = document.getElementById('btnC')
+    btn.onclick = function(){
+      var a = 1
+      var b = setTimeout(function(){
+        a++
+        console.log(a)
+      },1000)
+    }
+
+    btnB.onclick = function(){
+      var a = 1
+      var c = setInterval(function(){
+        a++
+        console.log(a)
+      },1000)
+      stop.onclick = function(){
+        clearInterval(c)
+      }
+    }
+    //setTimeout  只执行一次
+    //setInterval  不断的执行
+
+
+    btnC.onclick = function(){
+      //实现随机数  0-1
+      var a = Math.random() * 100
+      //Math.floor() 向下取整 跟四舍五入没有关系
+      console.log(Math.floor(a))
+      
+    }
+  </script>
+</body>
+</html>

+ 16 - 0
BOM/3_弹出框.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <script>
+    // alert('这是一个弹出框')  //弹出消息对话框
+    // window.prompt('请输入内容',20)  //有输入框  有默认值  带有按钮
+    confirm('123')   //没有输入框  带有按钮
+  </script>
+</body>
+</html>

+ 20 - 0
BOM/4_history.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <h2>我是首页</h2>
+  <a href="./test.html">跳转附页</a>
+  <button id="btn">返回</button>
+  <script>
+    var btn = document.getElementById('btn')
+    btn.onclick = function(){
+      history.forward()
+    }
+  </script>
+</body>
+</html>

+ 39 - 0
BOM/5_location.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+
+<body>
+  Location 对象的属性
+
+  hash 设置或返回从井号 (#) 开始的 URL(锚)
+  host 设置或返回主机名和当前 URL 的端口号
+  hostname 设置或返回当前 URL 的主机名
+  href 设置或返回完整的 URL
+  pathname 设置或返回当前 URL 的路径部分
+  port 设置或返回当前 URL 的端口号
+  protocol 设置或返回当前 URL 的协议
+  search 设置或返回从问号 (?) 开始的 URL(查询部分)
+
+  Navigator 对象的属性
+
+  appCodeName 返回浏览器的代码名
+  appName 返回浏览器的名称
+  appVersion 返回浏览器的平台和版本信息
+  browserLanguage 返回当前浏览器的语言
+  cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
+  cpuClass 返回浏览器系统的 CPU 等级
+  onLine 返回指明系统是否处于脱机模式的布尔值
+  platform 返回运行浏览器的操作系统平台
+  systemLanguage 返回 OS 使用的默认语言
+  userAgent 返回由客户机发送服务器的 user-agent 头部的值
+  userLanguage 返回 OS 的自然语言设置
+
+</body>
+
+</html>

+ 19 - 0
BOM/test.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <h2>我是附页</h2>
+  <button id="btn">回到首页</button>
+  <script>
+    var btn = document.getElementById('btn')
+    btn.onclick = function(){
+      history.back()
+    }
+  </script>
+</body>
+</html>