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入门教程(7) History历史对象
Jan 31 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
vue中destroyed方法的使用说明
Jul 21 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
ftp类(myftp.php)
2006/10/09 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
Python入门篇之条件、循环
2014/10/17 Python
Django日志模块logging的配置详解
2017/02/14 Python
用Python实现KNN分类算法
2017/12/22 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
Python 私有化操作实例分析
2019/11/21 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
eBay德国站:eBay.de
2017/09/14 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
学生会主席演讲稿
2014/04/25 职场文书
小学假期安全广播稿
2014/09/28 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
实习报告怎么写
2019/06/20 职场文书
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS