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

Dom

e 1 жил өмнө
parent
5e1e9ddefb
commit
7b5996e124
4 өөрчлөгдсөн 177 нэмэгдсэн , 0 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 26 0
      js/DOM/5.获取事件元素.html
  2. 48 0
      js/DOM/6.demo.html
  3. 65 0
      js/DOM/7.事件.html
  4. 38 0
      js/DOM/8.拖拽.html

+ 26 - 0
js/DOM/5.获取事件元素.html
Файл харах 

@@ -0,0 +1,26 @@
 
+<!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: 210px;
 
+            height: 220px;
 
+            background: #f00;
 
+            /* margin-left: 30px; */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <script>
 
+        var box = document.querySelector(".box");
 
+        console.log(box.offsetWidth); //获取元素宽度
 
+        console.log(box.offsetHeight); // 获取元素高度
 
+        console.log(box.offsetLeft); //获取元素距离左侧的距离
 
+        console.log(box.offsetTop); //获取元素距离顶部的距离
 
+    </script>
 
+</body>
 
+</html>

+ 48 - 0
js/DOM/6.demo.html
Файл харах 

@@ -0,0 +1,48 @@
 
+<!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 {
 
+        width: 200px;
 
+        height: 200px;
 
+        background: #ff0;
 
+      }
 
+    </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 () {
 
+          box.style.width = box.offsetWidth + 5 + "px";
 
+          if (box.offsetWidth >= 400) {
 
+            clearInterval(timer);
 
+          }
 
+        }, 100);
 
+      };
 
+      btn2.onclick = function () {
 
+        var timer = setInterval(function(){
 
+            box.style.width = box.offsetWidth - 5 + "px";
 
+            if(box.offsetWidth <= 200) {
 
+                clearInterval(timer);
 
+            }
 
+        },100)
 
+      }
 
+    </script>
 
+  </body>
 
+</html>

+ 65 - 0
js/DOM/7.事件.html
Файл харах 

@@ -0,0 +1,65 @@
 
+<!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: 100px;
 
+             height: 100px;
 
+             background-color: red;
 
+             margin: 10px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <input type="text" id="inp">
 
+    <script>
 
+        var box = document.querySelector(".box");
 
+        var inp = document.getElementById("inp");
 
+
 
+        // 点击事件
 
+        // box.onclick = function() {
 
+        //     console.log("点击事件")
 
+        // }
 
+        // // 双击事件
 
+        // box.ondblclick  = function() {
 
+        //     console.log("双击事件")
 
+        // }
 
+        // 鼠标移动事件
 
+        // box.onmousemove = function() {
 
+        //     console.log("鼠标移动事件")
 
+        // }
 
+        // 鼠标移出事件
 
+        // box.onmouseout = function() {
 
+        //     console.log("鼠标移出事件")
 
+        // }
 
+        // // 鼠标移入事件
 
+        // box.onmouseover = function() {
 
+        //     console.log("鼠标划过")
 
+        // }
 
+        // 鼠标按下事件
 
+        // box.onmousedown = function() {
 
+        //     console.log("鼠标按下")
 
+        // }
 
+        // // 鼠标抬起事件
 
+        // box.onmouseup = function() {
 
+        //     console.log("鼠标抬起")
 
+        // }
 
+        // 键盘按下事件 e event eve 事件对象
 
+        // inp.onkeydown = function(e) {
 
+        //     console.log("键盘按下1",e)
 
+        // }
 
+        // // 键盘抬起事件
 
+        // inp.onkeyup = function() {
 
+        //     console.log("键盘抬起")
 
+        // }
 
+        // 键盘按下
 
+        inp.onkeypress = function(e) {
 
+            console.log("键盘按下2",e)
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 38 - 0
js/DOM/8.拖拽.html
Файл харах 

@@ -0,0 +1,38 @@
 
+<!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: #00f;
 
+            position: absolute;
 
+            /* left: 1px; */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+    <script>
 
+        var box = document.getElementById("box");
 
+        box.onmousedown = function(e) {
 
+            var x = e.clientX - box.offsetLeft;
 
+            var y = e.clientY - box.offsetTop;
 
+            console.log(x,y)
 
+            box.onmousemove = function(e) {
 
+                var x1 = e.clientX;
 
+                var y1 = e.clientY;
 
+                console.log(x1)
 
+                box.style.left = x1 - x + 'px';
 
+                box.style.top = y1 - y + 'px';
 
+            }
 
+        }
 
+        box.onmouseup = function() {
 
+            box.onmousemove = null;
 
+        }
 
+    </script>
 
+</body>
 
+</html>