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

admin

fengchuanyu 4 ماه پیش
والد
ba8eb6d8a0
کامیت
16a4d5b0e5
2فایلهای تغییر یافته به همراه121 افزوده شده و 0 حذف شده
نمای یکپارچه نمایش آمار تفاوت ها
  1. 67 0
      5_DOM/练习7_进度条.html
  2. 54 0
      5_DOM/练习8_一道杠.html

+ 67 - 0
5_DOM/练习7_进度条.html
مشاهده فایل 

@@ -0,0 +1,67 @@
 
+<!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>
 
+        .progress-border{
 
+            width: 600px;
 
+            height: 100px;
 
+            border:4px solid black;
 
+            border-radius: 10px;
 
+            position: relative;
 
+            overflow: hidden;
 
+
 
+        }
 
+        .progress-bar{
 
+            width: 0;
 
+            height: 100px;
 
+            background-color: blue;
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+        }
 
+        .progress-border .progress-num{
 
+            position: absolute;
 
+            top: 0;
 
+            left: 50px;
 
+            z-index: 1;
 
+            font-size: 40px;
 
+            font-weight: bolder;
 
+            height: 100px;
 
+            line-height: 100px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="progress-content">
 
+        <div class="progress-border">
 
+            <div class="progress-num">0%</div>
 
+            <div class="progress-bar"></div>
 
+        </div>
 
+        <button id="btn">start</button>
 
+    </div>
 
+    <script>
 
+        var oNum = document.getElementsByClassName("progress-num")[0];
 
+        var oBar = document.getElementsByClassName("progress-bar")[0];
 
+        var oBtn = document.getElementById("btn");
 
+        var i = 0;
 
+        var timer = null;
 
+        oBtn.onclick = function(){
 
+            // oBar.style.width = "10px";
 
+            timer = setInterval(function(){
 
+                // if(oBar.offsetWidth >= 600){
 
+
 
+                // }
 
+                if(i >= 100){
 
+                    clearInterval(timer);
 
+                }else{
 
+                    oBar.style.width = oBar.offsetWidth + 6 + "px";
 
+                    oNum.innerText = ++i + "%";
 
+                }
 
+            },16);
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 54 - 0
5_DOM/练习8_一道杠.html
مشاهده فایل 

@@ -0,0 +1,54 @@
 
+<!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{
 
+            height: 50px;
 
+            width: 200px;
 
+            background-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+    <script>
 
+        var oBox = document.getElementsByClassName("box")[0];
 
+        var timer1 = null;
 
+        var timer2 = null;
 
+        
+        // 鼠标移入，宽度增加
 
+        oBox.onmouseenter = function(){
 
+            // 清除另一个变短的定时器
 
+            clearInterval(timer2)
 
+            // 设定定时函数不断增加元素宽度
 
+            timer1 = setInterval(function(){
 
+                // 判断宽度是否大于600px 如果大于600px 清除定时器
 
+                if(oBox.offsetWidth >= 600){
 
+                    clearInterval(timer1);
 
+                }else{
 
+                    // 每执行一次增加10px
 
+                    oBox.style.width = oBox.offsetWidth + 10 + "px";
 
+                }
 
+            },16);
 
+        }
 
+        // 鼠标移出，宽度减少
 
+        oBox.onmouseleave = function(){
 
+            // 清除另一个变长的定时器
 
+            clearInterval(timer1);
 
+            // 设定定时函数不断减少元素宽度
 
+            timer2 = setInterval(function(){
 
+                // 判断宽度是否小于200px 如果小于200px 清除定时器
 
+                if(oBox.offsetWidth <= 200){
 
+                    clearInterval(timer2);
 
+                }else{
 
+                    // 每执行一次减少10px
 
+                    oBox.style.width = oBox.offsetWidth - 10 + "px";
 
+                }
 
+            },16);
 
+        }
 
+    </script>
 
+</body>
 
+</html>