JS运动基础框架实例分析
更新时间：2015年03月03日 11:09:19 作者：mikyou
这篇文章主要介绍了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>
<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程序设计有所帮助。
相关文章
这篇文章主要介绍了ElementUI中Tree组件使用案例讲解,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了javaScript数组迭代方法，ECMAScript5为数组定义了5个迭代方法，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了javascript设计模式之策略模式学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
前端边界又拓宽,走进火热的云原生云开发赛道,随着云原生时代的到来,各大厂纷纷上云,下面这篇文章主要给大家介绍了关于前端云原生之微信小程序云服务配置的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要为大家详细介绍了小程序自定义轮播图圆点组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06![数据分析软件之FineReport教程：[5]参数界面JS（全）](//img.jbzj.com/images/xgimg/bcimg5.png)
数据分析软件之FineReport教程：[5]参数界面JS（全）
表格软件FineReport在设计报表时经常会用到，这篇文章主要介绍数据分析软件之FineReport教程：[5]参数界面JS，需要的朋友可以参考下2015-08-08
这篇文章主要介绍了 typeScript入门基础，TypeScript 是由微软开发的开源、跨平台的编程语言，是 javaScript 的超集，最终被编译为 javaScript代码。常常被简称为TS支持JS、ES语法，下文将继续其他基础介绍，需要的朋友可以参考一下2022-02-02
为什么要做圆角的div： 圆角div平滑美观，某些情况下有比较不错的效果。比如说要做一个报message的消息框，那么动态的生成一个圆角div则很有意义。而对html样式控制的css本身是不直接支持圆角div的。2009-10-10
这篇文章主要介绍了使用js实现一个简单的滚动条过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要为大家详细介绍了javascript canvas时钟模拟器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
![数据分析软件之FineReport教程：[5]参数界面JS（全）](http://img.jbzj.com/images/xgimg/bcimg5.png)
最新评论