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之网页换肤实现代码
Apr 30 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
VueJS全面解析
Nov 10 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 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 adodb操作mysql数据库
2009/03/19 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
Vue 获取数组键名的方法
2018/06/21 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
通过实例学习Python Excel操作
2020/01/06 Python
python爬虫请求头设置代码
2020/07/28 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
缓刑人员的思想汇报
2014/01/11 职场文书
小学数学教学反思
2014/02/02 职场文书
毕业自我鉴定书
2014/03/24 职场文书
文明村镇申报材料
2014/05/06 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
公司停电通知
2015/04/15 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python