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 相关文章推荐
基于jquery封装的一个js分页
Nov 15 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 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
模仿OSO的论坛(一)
2006/10/09 PHP
php htmlspecialchars加强版
2010/02/16 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
js正确获取元素样式详解
2009/08/07 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
外贸销售员求职的自我评价
2013/11/23 职场文书
医院科室评语
2015/01/04 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫