编程 Javascript

JS运动基础框架实例分析

Posted in Javascript onMarch 03, 2015

本文实例讲述了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程序设计有所帮助。

JS运动基础框架实例分析

- Author -

mikyou

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用js做一个小游戏平台 (一)

Dec 29 Javascript

JavaScript面向对象之静态与非静态类

Feb 03 Javascript

jQuery 自定义函数写法分享

Mar 30 Javascript

JS实现往下不断流动网页背景的方法

Feb 27 Javascript

Angular中的Promise对象($q介绍)

Mar 03 Javascript

jQuery实现仿腾讯微博滑出效果报告每日天气的方法

May 11 Javascript

js图片切换具体实现代码

Oct 13 Javascript

JavaScript实现随机数生成器（去重）

Oct 13 Javascript

Vue通过ref父子组件拿值方法

Sep 12 Javascript

js计时事件实现圆形时钟

Mar 25 Javascript

JS 5种遍历对象的方式

Jun 16 Javascript

js+canvas实现转盘效果（两个版本）

Sep 13 Javascript

jQuery DOM插入节点操作指南

Mar 03 #Javascript

JS运动框架之分享侧边栏动画实例

Mar 03 #Javascript

jQuery DOM删除节点操作指南

Mar 03 #Javascript

JS实现表格数据各种搜索功能的方法

Mar 03 #Javascript

深入理解JavaScript系列（27）：设计模式之建造者模式详解

Mar 03 #Javascript

javascript验证身份证号

Mar 03 #Javascript

JS烟花背景效果实现方法

Mar 03 #Javascript