Página inicial Explorar Ajuda
Entrar
lovecoding
/
VIP28
9
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Ver código fonte

new

zsydgithub 1 ano atrás
pai
59e5187527
commit
3e26b6982f
6 arquivos alterados com 212 adições e 0 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 16 0
      Bom/3_弹出框.html
  2. 20 0
      Bom/4_history.html
  3. 19 0
      Bom/5_text.html
  4. 42 0
      Bom/6_location.html
  5. 83 0
      Dom/1_基础.html
  6. 32 0
      Dom/2_demo.html

+ 16 - 0
Bom/3_弹出框.html
Ver arquivo 

@@ -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
Ver arquivo 

@@ -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="5_text.html">跳转到附页</a>
 
+  <button id="btn">返回</button>
 
+  <script>
 
+    var btn = document.getElementById('btn')
 
+    btn.onclick = function(){
 
+      history.forward()
 
+    }
 
+  </script>
 
+</body>
 
+</html>

+ 19 - 0
Bom/5_text.html
Ver arquivo 

@@ -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>

+ 42 - 0
Bom/6_location.html
Ver arquivo 

@@ -0,0 +1,42 @@
 
+<!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>
 
+    /*
 
+    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 的自然语言设置
 
+
 
+    */
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 83 - 0
Dom/1_基础.html
Ver arquivo 

@@ -0,0 +1,83 @@
 
+<!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>
 
+  <style>
 
+    #div1 {
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+    }
 
+
 
+    #div2 {
 
+      width: 200px;
 
+      height: 200px;
 
+      background: green;
 
+    }
 
+
 
+    .xx {
 
+      background: #818181;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="div1">123</div>
 
+  <div id="div2">222</div>
 
+
 
+  <div class="xx">333</div>
 
+  <div>444</div>
 
+  <div class="xx">555</div>
 
+  <div>666</div>
 
+
 
+  <ul>
 
+    <li class="xx">1</li>
 
+    <li>2</li>
 
+    <li class="xx">3</li>
 
+    <li>4</li>
 
+    <li class="xx">5</li>
 
+    <li>6</li>
 
+  </ul>
 
+  <ul id="ul2">
 
+    <li>1</li>
 
+    <li class="xx">2</li>
 
+    <li>3</li>
 
+    <li class="xx">4</li>
 
+    <li>5</li>
 
+    <li class="xx">6</li>
 
+  </ul>
 
+
 
+  <button id="btn">点击</button>
 
+  <button id="btn1">click</button>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    var div2 = document.getElementById('div2')
 
+    var xx = document.getElementsByClassName('xx')//返回的是一个数组
 
+    var btn = document.getElementById('btn')
 
+    var ul1 = document.getElementsByTagName('ul')//返回的是一个数组
 
+    var ul2 = document.getElementById('ul2')
 
+    var li = ul2.getElementsByClassName('xx')
 
+    var btn1 = document.getElementById('btn1')
 
+    btn.onclick = function () {
 
+      div1.style.background = 'orange'
 
+      for (var i = 0; i < xx.length; i++) {
 
+        xx[i].style.background = 'green'
 
+      }
 
+    }
 
+    console.log(ul1)
 
+
 
+    btn1.onclick = function () {
 
+      for (var i = 0; i < li.length; i++) {
 
+        li[i].style.background = 'orange'
 
+      }
 
+    }
 
+
 
+
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 32 - 0
Dom/2_demo.html
Ver arquivo 

@@ -0,0 +1,32 @@
 
+<!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>
 
+  <style>
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+      left: 100px;
 
+      top: 50px;
 
+      position: absolute;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+  <button id="btn">点击</button>
 
+  <script>
 
+    var btn = document.getElementById('btn')
 
+    var div1 = document.getElementById('div1')
 
+    btn.onclick = function(){
 
+      div1.style.background = 'aqua'
 
+      div1.style.left = 300 + 'px'
 
+      div1.style.top = '200px'
 
+    }
 
+  </script>
 
+</body>
 
+</html>