JS运动基础框架实例分析

编程学习 2021-07-04 21:47www.dzhlxh.cn编程入门
这篇文章主要介绍了JS运动基础框架,实例分析了javascript定时器及div样式的使用技巧,需要的朋友可以参考下

本文实例讲述了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 © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板