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 相关文章推荐
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
javascript实现简单留言板案例
Feb 09 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
多文件上载系统完整版
2006/10/09 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
python对url格式解析的方法
2015/05/13 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
python计算两个数的百分比方法
2018/06/29 Python
python hook监听事件详解
2018/10/25 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
python中if嵌套命令实例讲解
2021/02/25 Python
校园公益广告语
2014/03/13 职场文书
投标承诺书怎么写
2014/05/24 职场文书
公司委托书怎么写
2014/08/02 职场文书
普宁寺导游词
2015/02/04 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书