JS基礎入門篇（十四）—運動

時間 2019-11-11

原文原文鏈接

1.思考：頁面上有一個寬高都爲100px的盒子，若是想點擊此盒子，讓它的寬變成300px，應該怎麼作？css

思路一：選擇用js的點擊事件作，給盒子添加類名，並在類名中寫對應的css樣式。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: red;
            transition: 1s;
        }

        #box.c{
           width: 300px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var box=document.getElementById("box");
        console.log(box);
        box.onclick=function () {
            console.log(1);
            this.className="c";
        }
    </script>
</body>
</html>

思路二：使用定時器作，讓盒子的寬度每20毫秒加5px。直到盒子的寬度大於或着等於300px。函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var box=document.getElementById("box");
        box.onclick=function () {
            var num=5;
            var w=parseFloat(getComputedStyle(box).width);
            var timer=setInterval(function () {
                w+=5;
                if(w>=300){
                    clearInterval(timer);
                    w=300
                }
                box.style.width=w+"px";
            },20)
        }
    </script>
</body>
</html>

將思路二封裝成函數，使的每一個元素均可以使用。例如還改變盒子的高度值，能夠改變傳入的參數值。this

<script>
    var box=document.getElementById("box");
    //Element:頁面中哪一個元素
    //attr：元素的哪一個屬性
    //step：每一個週期改變多少
    //target：元素的目標值
    function move(element,attr,step,target) {
        var now=parseFloat(getComputedStyle(element)[attr]);
        var timer=setInterval(function () {
            now+=step;
            if(now>=target){
                clearInterval(timer);
                now=target
            }
            element.style[attr]=now+"px";
        },20)
    }
    box.onclick=function () {
        move(box,"width",5,300);
    }

</script>

2.有時候須要在規定時間完成寬的變大或者變小。
例如須要在2秒完成，盒子從寬100px到0code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    var box=document.getElementById("box");
    //Element:頁面中哪一個元素
    //attr：元素的哪一個屬性
    //target：元素的目標值
    //duration：持續時間
    function move(element,attr,target,duration) {
        var star=parseFloat(getComputedStyle(element)[attr]);//起點
        var c=target-star;//c表示總路程
        var t=duration;//所需時間
        var starTime=new Date().getTime();//開始時間
        var timer=setInterval(function () {
            var nowTime=new Date().getTime();//如今時間
            var takeTime=nowTime-starTime;//花費時間
            if(takeTime>=t){
                clearInterval(timer);
                takeTime=t;
            }
            var now=c/t*takeTime+star;//路程/時間*已花費時間+本來寬度=那一刻的寬度（跟路程公式同樣）
            element.style[attr]=now+"px";
        },20)
    }
    box.onclick=function () {
        move(box,"width",0,5000);
    }

</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。