这篇文章主要介绍了 JS 运动基础框架, 实例分析了 javascript 定时器及 div 样式的使用技巧, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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 程序设计有所帮助。
来源: