JS基础入门篇（十四）—运动

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>

JS基础入门篇（十四）—运动

梁志芳

引用和评论

git 基本命令

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具