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程序设计有所帮助。

Javascript 相关文章推荐
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
JS 非图片动态loading效果实现代码
Apr 09 Javascript
javascript 闭包疑问
Dec 30 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
Vue实现简易计算器
Feb 25 Javascript
element跨分页操作选择详解
Jun 29 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
You might like
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
php上传文件常见问题总结
2015/02/03 PHP
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
js仿360开机效果
2019/12/26 Javascript
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
Python笔记之代理模式
2019/11/20 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
python如何调用百度识图api
2020/09/29 Python
python 实现汉诺塔游戏
2020/11/28 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
销售员自我评价怎么写
2013/09/19 职场文书
自荐书范文
2013/12/08 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
pytorch 如何使用float64训练
2021/05/24 Python