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 相关文章推荐
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
webpack-dev-server远程访问配置方法
Feb 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
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
Angular实现form自动布局
2016/01/28 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
Python中bisect的用法及示例详解
2020/07/20 Python
python中np是做什么的
2020/07/21 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
用Python写一个for循环的例子
2016/07/19 面试题
结婚邀请函范文
2014/01/14 职场文书
化验员岗位职责
2015/02/14 职场文书
财务部岗位职责范本
2015/04/14 职场文书
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
Python Django项目和应用的创建详解
2021/11/27 Python
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB