صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
lovecoding
/
VIP28
9
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

new

zsydgithub 1 سال پیش
والد
8d67d1d138
کامیت
9f7d6c24cf
4فایلهای تغییر یافته به همراه213 افزوده شده و 0 حذف شده
مشاهده تقسیم شده نمایش آمار تفاوت ها
  1. 33 0
      Dom/5_获取元素的宽度.html
  2. 59 0
      Dom/6_动画.html
  3. 73 0
      Dom/7_事件.html
  4. 48 0
      Dom/8_拖拽.html

+ 33 - 0
Dom/5_获取元素的宽度.html
مشاهده فایل 

@@ -0,0 +1,33 @@
 
+<!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>
 
+    /* *{
 
+      margin: 0;
 
+      padding: 0;
 
+    } */
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: #000;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+
 
+    div1.style.width = 300 + 'px'
 
+    console.log(div1.offsetWidth)
 
+    console.log(div1.offsetHeight)
 
+    console.log(div1.offsetLeft)
 
+    console.log(div1.offsetTop)
 
+    console.log(div1.style.width)//内联样式
 
+  </script>
 
+</body>
 
+</html>

+ 59 - 0
Dom/6_动画.html
مشاهده فایل 

@@ -0,0 +1,59 @@
 
+<!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>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    #div1 {
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+      transition: width 2s linear;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <button id="up">放大</button>
 
+  <div id="div1"></div>
 
+  <button id="down">缩小</button>
 
+  <script>
 
+    var up = document.getElementById('up')
 
+    var down = document.getElementById('down')
 
+    var div1 = document.getElementById('div1')
 
+
 
+    // up.onclick = function () {
 
+    //   var timer = setInterval(function () {
 
+    //     if (div1.offsetWidth < 500) {
 
+    //       div1.style.width = div1.offsetWidth + 10 + 'px'
 
+    //     } else {
 
+    //       clearInterval(timer)
 
+    //     }
 
+    //   }, 10);
 
+    //   // div1.style.width = 500 + 'px'
 
+    // }
 
+    up.onclick = function () {
 
+      div1.style.width = 500 + 'px'
 
+    }
 
+
 
+    down.onclick = function () {
 
+      var timer1 = setInterval(function () {
 
+        if (div1.offsetWidth > 0) {
 
+          div1.style.width = div1.offsetWidth - 10 + 'px'
 
+        } else {
 
+          clearInterval(timer1)
 
+        }
 
+      }, 10)
 
+    }
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 73 - 0
Dom/7_事件.html
مشاهده فایل 

@@ -0,0 +1,73 @@
 
+<!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;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    <input type="text" id="inp">
 
+  </div>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    var inp = document.getElementById('inp')
 
+
 
+    //点击事件
 
+    // div1.onclick = function(){
 
+    //   console.log('点击事件')
 
+    // }
 
+
 
+    //双击事件
 
+    // div1.ondblclick = function(){
 
+    //   console.log('双击事件')
 
+    // }
 
+
 
+    //鼠标移动
 
+    // div1.onmousemove = function(){
 
+    //   console.log('鼠标移动')
 
+    // }
 
+    
+    //鼠标划出
 
+    // div1.onmouseout = function(){
 
+    //   console.log('鼠标划出')
 
+    // }
 
+
 
+    //按下鼠标触发事件
 
+    // div1.onmousedown = function(e){
 
+    //   console.log('鼠标按下')
 
+    //   //鼠标相对于浏览器视口的坐标轴
 
+    //   console.log(e.clientX,e.clientY)
 
+    // }
 
+
 
+    //松开鼠标触发事件
 
+    // div1.onmouseup = function(){
 
+    //   console.log('鼠标抬起')
 
+    // }
 
+
 
+    //键盘按下触发事件
 
+    // inp.onkeydown = function(e){
 
+    //   // console.log('键盘按下')
 
+    //   console.log(e.keyCode)
 
+    //   if(e.keyCode == 13){
 
+    //     console.log('我是回车')
 
+    //   }
 
+    // }
 
+    //键盘抬起事件
 
+    // inp.onkeyup = function(){
 
+    //   console.log('键盘抬起')
 
+    // }
 
+    inp.onkeypress = function(){
 
+      console.log('onkeypress')
 
+    }
 
+  </script>
 
+</body>
 
+</html>

+ 48 - 0
Dom/8_拖拽.html
مشاهده فایل 

@@ -0,0 +1,48 @@
 
+<!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>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    #div1 {
 
+      width: 200px;
 
+      height: 200px;
 
+      background: aqua;
 
+      position: absolute;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="div1"></div>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    //鼠标按下事件
 
+    div1.onmousedown = function(e){
 
+      //鼠标距离边框的长度
 
+      var xLeft = e.clientX - div1.offsetLeft
 
+      var xTop = e.clientY - div1.offsetTop
 
+
 
+      console.log(xLeft,xTop)
 
+      //鼠标移动事件
 
+      div1.onmousemove = function(e){
 
+        div1.style.left = e.clientX - xLeft + 'px'
 
+        div1.style.top = e.clientY - xTop + 'px'
 
+      }
 
+    }
 
+    //鼠标抬起事件
 
+    div1.onmouseup = function(){
 
+      div1.onmousemove = null
 
+    }
 
+  </script>
 
+</body>
 
+
 
+</html>