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 相关文章推荐
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
js基于canvas实现时钟组件
Feb 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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
python实现的简单窗口倒计时界面实例
2015/05/05 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python实现类之间的方法互相调用
2018/04/29 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
python Shapely使用指南详解
2020/02/18 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
详解python with 上下文管理器
2020/09/02 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
电子专业毕业生自我鉴定
2014/01/22 职场文书
离婚财产处理协议书
2014/09/30 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
入党政审材料范文
2014/12/24 职场文书
李白故里导游词
2015/02/12 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技