e 2 هفته پیش
والد
کامیت
2260d6daad
2فایلهای تغییر یافته به همراه105 افزوده شده و 0 حذف شده
  1. 37 0
      3.js初级/DOM/10.拖拽.html
  2. 68 0
      3.js初级/DOM/9.事件.html

+ 37 - 0
3.js初级/DOM/10.拖拽.html

@@ -0,0 +1,37 @@
+<!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: #0f0;
+            position: absolute;
+        }
+    </style>
+</head>
+<body>
+    <div id="box"></div>
+    <script>
+        // clientX 鼠标在客户端的X轴位置
+        // clientY 鼠标在客户端的Y轴位置
+        var box = document.getElementById("box");
+        box.onmousedown = function(event) {
+            console.log(event)
+            // box.style.left = 330 + 'px';
+            var left1 = event.clientX - box.offsetLeft;
+            var top1 =  event.clientY - box.offsetTop;
+            box.onmousemove = function(event) {
+                box.style.left =  event.clientX - left1 + 'px';
+                box.style.top =  event.clientY - top1 + 'px';
+            }
+        }
+        box.onmouseup = function() {
+            box.onmousemove = null;
+        }
+    </script>
+</body>
+</html>

+ 68 - 0
3.js初级/DOM/9.事件.html

@@ -0,0 +1,68 @@
+<!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: 700px;
+            height: 700px;
+            background: #f00;
+        }
+        #box1 {
+            width: 200px;
+            height: 200px;
+            background: #ff0;
+        }
+        input {
+            margin: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div id="box">
+        <div id="box1"></div>
+    </div>
+    <input type="text">
+    <script>
+        var box = document.getElementById("box");
+        var box1 = document.getElementById("box1");
+        var inp = document.querySelector("input")
+
+        inp.onkeydown = function() {
+            console.log('键盘按下')
+        }
+        inp.onkeyup = function() {
+            console.log('键盘抬起')
+        }
+
+        inp.onkeypress = function() {
+            console.log('键盘按下并抬起事件')
+        }
+
+
+        // box.onclick = function() {
+        //     console.log("点击事件")
+        // }
+        // box.ondblclick = function() {
+        //     console.log("双击事件")
+        // }
+        // box.onmousedown = function() {
+        //     console.log("鼠标按下")
+        // }
+        // box.onmouseup = function() {
+        //     console.log("鼠标抬起")
+        // }
+        // box.onmousemove = function() {
+        //     console.log("鼠标划过")
+        // }
+        // box.onmouseout = function() {
+        //     console.log("鼠标划出")
+        // }
+        box.onmouseover = function() {
+            console.log("鼠标划入")
+        }
+    </script>
+</body>
+</html>