运用定时器写一个移动的方块

最新推荐文章于 2020-11-10 15:31:56 发布

平淡中的乐趣

最新推荐文章于 2020-11-10 15:31:56 发布

阅读量359

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/gghhm/article/details/90450594

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

运用定时器写一个移动的方块

上一篇我写了一些定时器的用法，继而根据这些用法来一起写一个具体实例，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width:200px;
            height:200px;
            background:indianred;
            position:absolute;
            left:0;
        }
        #clear{
            position:absolute;
            bottom:300px;
        }
    </style>
    <script>
        window.onload=function(){
            var box = document.getElementById("box");
            var clear = document.getElementById("clear")
            var num = 0;
            var speen = 0.1
            function num1() {
                if(num>1200){speen = -0.1}
                if(num<0){speen = 0.1}
                num += speen;
                box.style.left = num + 'px'

            }
                run = setInterval(num1,0.01)
            clear.onclick = function(){
                clearInterval(run)

            }
        }
    </script>
</head>
<body>
<div id="box"></div>
<button id="clear">删除</button>
</body>
</html>

这里是设计了删除按钮，用来删除一个移动方块的移动。