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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
jquery foreach使用示例
Sep 12 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
js实现简单的秒表
Jan 16 Javascript
js实现纯前端压缩图片
Nov 16 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的bbs设计(五)
2006/10/09 PHP
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
PHP 可阅读随机字符串代码
2010/05/26 PHP
php中文验证码实现方法
2015/06/18 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
angularjs请求数据的方法示例
2019/08/06 Javascript
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
党员评议个人总结
2014/10/20 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
租车协议书
2015/01/27 职场文书
收银员岗位职责
2015/02/03 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
MySQL 如何设计统计数据表
2021/06/15 MySQL
5行Python代码实现一键批量扣图
2021/06/29 Python
JS setTimeout与setInterval的区别
2022/04/20 Javascript