| 标题 | JS运动基础框架实例分析 |
| 内容 | 这篇文章主要介绍了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程序设计有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。