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 相关文章推荐
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
JavaScript简介
Feb 15 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 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+ajax 无刷新删除数据
2010/02/20 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
Python解释执行原理分析
2014/08/22 Python
Python实现Linux下守护进程的编写方法
2014/08/22 Python
Python包和模块的分发详细介绍
2020/06/19 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
初中生期末考试的自我评价
2013/12/17 职场文书
编辑找工作求职信分享
2014/01/03 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
成立公司计划书
2014/05/07 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
Nginx源码编译安装过程记录
2021/11/17 Servers