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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 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判断是否连接上网络的方法
2015/07/01 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
php 常用的系统函数
2017/02/07 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
js实现文字截断功能
2016/09/14 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
Python验证码识别处理实例
2015/12/28 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
《日月潭》教学反思
2014/02/28 职场文书
共产党员承诺书
2014/03/25 职场文书
校企合作协议书
2014/04/16 职场文书
大学社团计划书
2014/05/01 职场文书
食品流通安全承诺书
2014/05/22 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
党支部先进事迹材料
2014/12/24 职场文书
幼儿教师辞职信
2015/02/27 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
高中英语教学反思范文
2016/03/02 职场文书