JS运动基础框架实例分析

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

JS运动基础框架实例分析

mikyou   2020-05-13 我要评论

本文实例讲述了JS运动基础框架。分享给大家供大家参考。具体分析如下:

这里需要注意:

1. 在开始运动时关闭已有的定时器
2. 把运动和停止隔开

复制代码 代码如下:
<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title></title> 
        <style type="text/css"> 
            #div1{ 
                width: 200px; 
                height: 200px; 
                background: red; 
                position: absolute; 
                left:0; 
                top:60px; 
            } 
        </style> 
        <script type="text/javascript"> 
            window.onload=function(){ 
                var oDiv=document.getElementById("div1"); 
                var oBt=document.getElementsByTagName('input')[0]; 
                var time=null; 
                oBt.onclick=function(){ 
                    clearInterval(time);//这里首先要关闭一个定时器,这是因为解决在运动过程中多次点击按钮从而产生多个定时器叠加的bug 
                    time=setInterval(function(){ 
                        var speed=7; 
                        if(oDiv.offsetLeft<=600) 
                        oDiv.style.left=oDiv.offsetLeft+speed+'px'; 
                        else{ 
                            clearInterval(time); 
                        } 
                    },30); 
                } 
            } 
        </script> 
    </head> 
    <body> 
        <input type="button" value="开始运动" /> 
        <div id="div1"></div> 
    </body> 
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们