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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
浅谈Node 异步IO和事件循环
May 05 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 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
如何开始收听短波广播
2021/03/01 无线电
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
举例讲解Python中is和id的用法
2015/04/03 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
TensorFlow如何实现反向传播
2018/02/06 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
python对Excel的读取的示例代码
2020/02/14 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
车辆转让协议书
2014/04/15 职场文书
小学班主任评语大全
2014/04/23 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
个人收入证明模板
2014/09/18 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
总经理致辞
2015/07/29 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python