首頁 探索 說明
登入
lovecoding
/
VIP32
10
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

DOM

e 1 年之前
父節點
4e82851be3
當前提交
83bedde1e5
共有 13 個文件被更改，包括 511 次插入 和 0 次删除
分割檢視 顯示文件統計
  1. 57 0
      JS初级/DOM/10.小例子.html
  2. 46 0
      JS初级/DOM/11.放大缩小.html
  3. 93 0
      JS初级/DOM/5.选项卡.html
  4. 83 0
      JS初级/DOM/6.选项卡.html
  5. 96 0
      JS初级/DOM/7.轮播.html
  6. 66 0
      JS初级/DOM/7.轮播.js
  7. 34 0
      JS初级/DOM/8.获取元素节点.html
  8. 36 0
      JS初级/DOM/9.transition.html
  9. 二進制
      JS初级/DOM/images/1.jpg
  10. 二進制
      JS初级/DOM/images/2.jpg
  11. 二進制
      JS初级/DOM/images/3.jpg
  12. 二進制
      JS初级/DOM/images/4.jpg
  13. 二進制
      JS初级/DOM/images/5.jpg

+ 57 - 0
JS初级/DOM/10.小例子.html
查看文件 

@@ -0,0 +1,57 @@
 
+<!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>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+        }
 
+        .box {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #00f;
 
+        }
 
+        button {
 
+            margin-top: 40px;
 
+        }
 
+        .vase {
 
+            width: 50px;
 
+            height: 35px;
 
+            text-align: center;
 
+            line-height: 35px;
 
+            background: purple;
 
+            color: #fff;
 
+            margin-top: 40px;
 
+            margin-left: 20px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <button>改变颜色</button>
 
+    <ul>
 
+        <li>12</li>
 
+        <li>34</li>
 
+        <li>56</li>
 
+        <li>78</li>
 
+    </ul>
 
+    <div class="vase">改变</div>
 
+    <script>
 
+        var btn = document.querySelector("button");
 
+        var box = document.querySelector(".box");
 
+        var lis = document.querySelectorAll("ul li");
 
+        var vase = document.querySelector(".vase");
 
+        btn.onclick = function() {
 
+            box.style.marginLeft = 100 + 'px';
 
+            box.style.background = 'red';
 
+        }
 
+        vase.onclick = function() {
 
+            lis[0].style.background = 'red';
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 46 - 0
JS初级/DOM/11.放大缩小.html
查看文件 

@@ -0,0 +1,46 @@
 
+<!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: #00f;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <br><br>
 
+    <button id="btn1">放大</button>
 
+    <br><br>
 
+    <button id="btn2">缩小</button>
 
+    <script>
 
+        var box = document.querySelector(".box")
 
+        var btn1 = document.getElementById("btn1");
 
+        var btn2 = document.getElementById("btn2");
 
+        btn1.onclick = function() {
 
+           var timer = setInterval(function(){
 
+                if(box.offsetWidth >= 500) {
 
+                    clearInterval(timer);
 
+                } else {
 
+                    box.style.width = box.offsetWidth + 5 + 'px';
 
+                }
 
+            },50)
 
+        }
 
+
 
+        btn2.onclick = function() {
 
+            var timer = setInterval(function(){
 
+                if(box.offsetWidth <= 300) {
 
+                    clearInterval(timer)
 
+                } else {
 
+                    box.style.width = box.offsetWidth - 5 + 'px';
 
+                }
 
+            },100);
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 93 - 0
JS初级/DOM/5.选项卡.html
查看文件 

@@ -0,0 +1,93 @@
 
+<!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>
 
+      * {
 
+        margin: 0;
 
+        padding: 0;
 
+        list-style: none;
 
+        text-decoration: none;
 
+        box-sizing: border-box;
 
+      }
 
+      #container {
 
+        width: 482px;
 
+        margin: 190px auto;
 
+        border: 1px solid #000;
 
+      }
 
+      #container #list {
 
+        overflow: hidden;
 
+      }
 
+      #container #list li {
 
+        float: left;
 
+        width: 120px;
 
+        height: 50px;
 
+        text-align: center;
 
+        line-height: 50px;
 
+        border: 1px solid #ccc;
 
+      }
 
+      .active {
 
+        width: 480px;
 
+        height: 300px;
 
+        text-align: center;
 
+        line-height: 300px;
 
+        font-size: 25px;
 
+        color: purple;
 
+        font-weight: 600;
 
+        border: 1px solid #f00;
 
+        display: none;
 
+      }
 
+      .selected {
 
+        background: #f00;
 
+        color: #ff0;
 
+      }
 
+      .choose {
 
+        display: block;
 
+      }
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <div id="container">
 
+      <ul id="list">
 
+        <li class="selected">用户管理</li>
 
+        <li>配置管理</li>
 
+        <li>角色管理</li>
 
+        <li>定时任务补</li>
 
+      </ul>
 
+      <div id="main">
 
+        <div class="choose active">用户管理</div>
 
+        <div class="active">配置管理</div>
 
+        <div class="active">角色管理</div>
 
+        <div class="active">定时任务补</div>
 
+      </div>
 
+    </div>
 
+    <script>
 
+        var btn = document.querySelectorAll("#list li");
 
+        var contain = document.querySelectorAll(".active");
 
+        console.log(this,'this1')
 
+        for(var i=0;i<btn.length;i++) {
 
+            // 为了给每一个按钮添加点击事件
 
+            // 下标赋值
 
+            btn[i].index = i;
 
+            btn[i].onclick = function() {
 
+                console.log(this,'this2')
 
+                // 2.点击  恢复样式
 
+                for(var j=0;j<contain.length;j++) {
 
+                    // 4次
 
+                    btn[j].className = '';
 
+                    contain[j].className = 'active';
 
+                }
 
+                // this => 当前对象 =  btn[i]
 
+                // 添加selected样式
 
+                //  1.点击 改变颜色
 
+                this.className = 'selected';
 
+                // 添加choose样式
 
+                contain[this.index].className = 'choose active';
 
+            }
 
+        }
 
+
 
+    </script>
 
+  </body>
 
+</html>

+ 83 - 0
JS初级/DOM/6.选项卡.html
查看文件 

@@ -0,0 +1,83 @@
 
+<!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>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            list-style: none;
 
+            text-decoration: none;
 
+            box-sizing: border-box;
 
+        }
 
+        #container {
 
+            width: 480px;
 
+            margin: 120px auto;
 
+        }
 
+        #list {
 
+            overflow: hidden;
 
+        }
 
+        #list li {
 
+            float: left;
 
+            width: 120px;
 
+            height: 50px;
 
+            text-align: center;
 
+            line-height: 50px;
 
+            border: 1px solid #ccc;
 
+        }
 
+        .selected {
 
+            background: #f00;
 
+            color: #ff0;
 
+        }
 
+        .main .active {
 
+            width: 480px;
 
+            height: 300px;
 
+            text-align: center;
 
+            line-height: 300px;
 
+            font-size: 30px;
 
+            color: purple;
 
+            border: 1px solid #f00;
 
+            display: none;
 
+        }
 
+        .main .choose {
 
+            display: block;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <ul id="list">
 
+            <li class="selected">选项一</li>
 
+            <li>选项二</li>
 
+            <li>选项三</li>
 
+            <li>选项四</li>
 
+        </ul>
 
+        <div class="main">
 
+            <div class="active choose">1</div>
 
+            <div class="active">2</div>
 
+            <div class="active">3</div>
 
+            <div class="active">4</div>
 
+        </div>
 
+    </div>
 
+    <script>
 
+        //点击按钮 清掉已有样式 给所点击的项添加样式 
+        var btn = document.querySelectorAll("#list li");
 
+        var contain = document.querySelectorAll(".main div");
 
+        for(var i=0;i<btn.length;i++){
 
+            btn[i].index = i;
 
+            btn[i].onclick = function() {
 
+                for(var j=0;j<contain.length;j++) {
 
+                    btn[j].className = '';
 
+                    contain[j].className = 'active';
 
+                }
 
+                console.log(this)
 
+                this.className = 'selected';
 
+                contain[this.index].className = 'active choose';
 
+            }
 
+        }
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 96 - 0
JS初级/DOM/7.轮播.html
查看文件 

@@ -0,0 +1,96 @@
 
+<!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>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            list-style: none;
 
+            text-decoration: none;
 
+            box-sizing: border-box;
 
+        }
 
+        #container {
 
+            width: 590px;
 
+            height: 470px;
 
+            margin: 150px auto;
 
+            position: relative;
 
+        }
 
+        .selected {
 
+            display: none;
 
+        }
 
+        .choose {
 
+            display: block;
 
+        }
 
+        #list {
 
+            overflow: hidden;
 
+            position: absolute;
 
+            bottom: 5px;
 
+            right: 10px;
 
+        }
 
+        #list li {
 
+            float: left;
 
+            width: 30px;
 
+            height: 30px;
 
+            border-radius: 50%;
 
+            text-align: center;
 
+            line-height: 30px;
 
+            font-size: 14px;
 
+            background: #00f;
 
+            color: #fff;
 
+            margin-left: 7px;
 
+        }
 
+        #list .active {
 
+            background-color: #f00;
 
+            color: #ff0;
 
+        }
 
+        #prev,#next {
 
+            width: 60px;
 
+            height: 40px;
 
+            background-color: purple;
 
+            color: #fff;
 
+            text-align: center;
 
+            line-height: 40px;
 
+            display: none;
 
+        }
 
+        #prev {
 
+            position: absolute;
 
+            left: 0;
 
+            top:204px;
 
+        }
 
+        #next {
 
+            position: absolute;
 
+            right: 0;
 
+            top:204px;
 
+        }
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <div id="imgBox">
 
+            <img src="./images/1.jpg" class="selected choose" alt="">
 
+            <img src="./images/2.jpg" class="selected" alt="">
 
+            <img src="./images/3.jpg" class="selected" alt="">
 
+            <img src="./images/4.jpg" class="selected" alt="">
 
+            <img src="./images/5.jpg" class="selected" alt="">
 
+        </div>
 
+        <ul id="list">
 
+            <li class="active">1</li>
 
+            <li>2</li>
 
+            <li>3</li>
 
+            <li>4</li>
 
+            <li>5</li>
 
+        </ul>
 
+        <div id="prev">
 
+            <span>&lt;</span>
 
+        </div>
 
+        <div id="next">
 
+            <span>&gt;</span>
 
+        </div>
 
+    </div>
 
+    <script src="./7.轮播.js"></script>
 
+</body>
 
+</html>

+ 66 - 0
JS初级/DOM/7.轮播.js
查看文件 

@@ -0,0 +1,66 @@
 
+var picture = document.querySelectorAll(".selected");
 
+var points = document.querySelectorAll("#list li");
 
+var prev = document.getElementById("prev");
 
+var next = document.getElementById("next");
 
+var container = document.getElementById("container");
 
+var current = 0;
 
+// 切换方法
 
+function autoPlay(ind) {
 
+    console.log(ind);
 
+    // 清空所有样式
 
+    for(var i=0;i<points.length;i++) {
 
+        points[i].className = '';
 
+        picture[i].className = 'selected';
 
+    }
 
+    // 添加对应项样式
 
+    points[ind].className = 'active';
 
+    picture[ind].className = 'selected choose'
 
+}
 
+
 
+// 点击points 切换图片
 
+for(var i=0;i<points.length;i++) {
 
+    points[i].index = i;
 
+    points[i].onclick = function() {
 
+        current = this.index;
 
+        autoPlay(current)
 
+    }
 
+}
 
+
 
+// 点击上一页
 
+prev.onclick = function() {
 
+    current--;
 
+    if(current < 0) {
 
+       current = picture.length - 1;
 
+    }
 
+    autoPlay(current);
 
+}
 
+
 
+// 点击下一页
 
+next.onclick = function() {
 
+    current++;
 
+    if(current > picture.length - 1) {
 
+        current = 0;
 
+    }
 
+    autoPlay(current);
 
+}
 
+
 
+// 自动轮播
 
+var timer = setInterval(function(){
 
+    next.onclick()
 
+},1000);
 
+
 
+// 鼠标划过
 
+container.onmousemove = function() {
 
+    prev.style.display = 'block';
 
+    next.style.display = 'block';
 
+    clearInterval(timer);
 
+}
 
+
 
+// 鼠标划出
 
+container.onmouseout = function() {
 
+    prev.style.display = 'none';
 
+    next.style.display = 'none';
 
+    timer = setInterval(function(){
 
+        next.onclick()
 
+    },1000);
 
+}

+ 34 - 0
JS初级/DOM/8.获取元素节点.html
查看文件 

@@ -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>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+        }
 
+        .box {
 
+            width: 300px;
 
+            height: 400px;
 
+            margin-top: 40px;
 
+            margin-left: 200px;
 
+            background: aqua;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <script>
 
+        var box = document.querySelector(".box");
 
+        console.log(box);
 
+        console.log(box.offsetWidth); //  获取元素宽度
 
+        console.log(box.offsetLeft); // 获取元素距离左侧的距离
 
+        console.log(box.offsetTop); // 获取元素距离顶部的距离
 
+        console.log(box.offsetHeight); // 获取元素高度
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 36 - 0
JS初级/DOM/9.transition.html
查看文件 

@@ -0,0 +1,36 @@
 
+<!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: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+            transition: width 5s ease;
 
+        }
 
+        .box:hover {
 
+            width: 400px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!--
 
+        动画：
 
+         过渡效果
 
+        transition:property duration timing-function delay;
 
+        transition-property：执行名称
 
+        transition-duration: 执行过渡效果的时间
 
+        transition-timing-function: 运动曲线
 
+            linear 匀速 
+            ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（
 
+            ease-in 规定以慢速开始的过渡效果
 
+            ease-out 规定以慢速结束的过渡效果
 
+            ease-in-out 规定以慢速开始和结束的过渡效果
 
+        transition-delay: 延长时间
 
+    -->
 
+    <div class="box"></div>
 
+</body>
 
+</html>

二進制
JS初级/DOM/images/1.jpg
查看文件


二進制
JS初级/DOM/images/2.jpg
查看文件


二進制
JS初级/DOM/images/3.jpg
查看文件


二進制
JS初级/DOM/images/4.jpg
查看文件


二進制
JS初级/DOM/images/5.jpg
查看文件