JS基本入門篇（十四）—活動

2023年4月1日 153次阅读 来源: 梁志芳

1.思索：頁面上有一個寬高都為100px的盒子，假如想點擊此盒子，讓它的寬變成300px，應當怎麼做 ？

思緒一：挑選用js的點擊事宜做，給盒子增加類名，並在類名中寫對應的css款式。

<!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>

將思緒二封裝成函數，使的每一個元素都能夠運用。比方還轉變盒子的高度值，能夠轉變傳入的參數值。

<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到0

<!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>
    原文作者：梁志芳
    原文地址: https://segmentfault.com/a/1190000015050321
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞