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滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
JavaScript Uploadify文件上传实例
Feb 28 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 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
改造一台复古桌面收音机
2021/03/02 无线电
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
如何定义TensorFlow输入节点
2020/01/23 Python
使用Django清空数据库并重新生成
2020/04/03 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
函授本科自我鉴定
2013/11/03 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
村干部培训班主持词
2014/03/28 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript