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 相关文章推荐
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 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 特殊字符处理函数
2008/09/05 PHP
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
Python ljust rjust center输出
2008/09/06 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
Atom的python插件和常用插件说明
2018/07/08 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
安全教育演讲稿
2014/05/09 职场文书
春节联欢会策划方案
2014/05/16 职场文书
环境科学专业求职信
2014/08/04 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
公司更名通知函
2015/04/24 职场文书
工程服务质量承诺书
2015/04/29 职场文书
初一军训感言
2015/08/01 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python