js跑步算法的实现代码


Posted in Javascript onDecember 04, 2013

先复制一下,看看运行的效果吧,其中用到的精髓是setInterval()方法:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JavaScript</title>
<style>
html
{
background-color:silver;
}
.point1
{
position:absolute;
left:10px;
top:40px;
}
.point2
{
position:absolute;
left:100px;
top:40px;
}
.hr1
{
position:absolute;
top:60px;
}
</style>
<script type="text/JavaScript">
document.onmousedown = mousedown;
document.onmouseup = mouseup;
var intervalProcess;
var direct = true;
function mousedown(){
intervalProcess = setInterval("MovePoint()", 1);
}
function mouseup(){
clearInterval(intervalProcess);
}
function MovePoint(){
with (document.getElementById("point1").style){
if (isNaN(parseInt(left)))
left = "10px";
else {
document.getElementById("point2").style.left = "200px";
if (parseInt(left) < 0)
direct = true;
if (parseInt(left) > parseInt(document.getElementById("point2").style.left))
direct = false;
if (direct)
left = parseInt(left) + 1 + "px";
else
left = parseInt(left) - 1 + "px";
}
}
}
</script>
</head>
<body>
<div class="point1" id="point1"><font color=blue>a</font></div>
<div class="point2" id="point2"><font color=red>b</font></div>
<hr class="hr1" />
</body>
</html>
Javascript 相关文章推荐
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 #Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 #Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 #Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 #Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 #Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 #Javascript
JavaScript伸缩的菜单简单示例
Dec 03 #Javascript
You might like
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
WordPress网站性能优化指南
2015/11/18 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
CI框架表单验证实例详解
2016/11/21 PHP
js活用事件触发对象动作
2008/08/10 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
Python pandas如何向excel添加数据
2020/05/22 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
简历中个人自我评价分享
2014/03/15 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
2014年党课学习材料
2014/05/11 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
行政处罚告知书
2015/07/01 职场文书