Using Function Closures with Timers

最新推荐文章于 2021-03-26 22:59:42 发布

转载最新推荐文章于 2021-03-26 22:59:42 发布 · 58 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangwenfei/archive/2013/05/27/setInterval.html

本文介绍了一种利用JavaScript中的setInterval方法实现HTML元素在页面上动态移动的技术方案。通过设置定时器，使得一个带有特定样式（如红色背景）的div元素能够水平移动，点击该元素可以启动或停止移动过程。此技术适用于网页动画制作和交互式UI设计。

<!DOCTYPE HTML>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #redbox{position: absolute;left: 100px;top: 100px;width: 200px;height: 200px;background-color: red;}
        </style>
    </head>
    <body>
        <script type="text/javascript">
            var intervalId=null;
            window.onload=function(){
                document.getElementById("redbox").onclick=stopStartElement;
            }
            function stopStartElement(){
                if(intervalId==null){
                    var x=100;
                    intervalId=setInterval(function(){
                        x+=5;
                        var left=x+"px";
                        document.getElementById("redbox").style.left=left;
                    },100);
                }else{
                    clearInterval(intervalId);
                    intervalId=null;
                }
            }
        </script>
        <div id="redbox"></div>
    </body>
</html>

转载于:https://www.cnblogs.com/wangwenfei/archive/2013/05/27/setInterval.html