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之尺寸调整组件的深入解析
Jun 19 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
vue 单页应用和多页应用的优劣
Oct 22 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
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
详解php实现页面静态化原理
2017/06/21 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
vue实现文件上传功能
2018/08/13 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python实现文件名批量替换和内容替换
2014/03/20 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
药剂专业学生求职信范文
2013/12/28 职场文书
社区国庆节活动方案
2014/02/05 职场文书
激励口号大全
2014/06/17 职场文书
个人专业技术总结
2015/03/05 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
卫生主题班会
2015/08/14 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
聊聊redis-dump工具安装问题
2022/01/18 Redis