点击“开始运动”按钮，红色的#red区块开始向右匀速运动，抵达到黑色竖线位置自动停止，再次点击“开始运动”#red区块也不会再运动。同时为了便于后期维护，要求运动速度可在代码中灵活调整。
细节要求：
1、点击开始运动按钮后，在抵达终点线前，无论再次点击多少次按钮，#red区块均维持运动速率不变。
2、#red区块最后停滞位置不能超出黑色竖线。
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title>JS小案例：匀速运动</title>
<style>
#red {
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 50px;
left: 0;
} .black {
position: absolute;
width: 1px;
height: 200px;
left: 900px;
background: black; }
</style>
<script>
//补充代码 </script>
</head> <body>
<input type='button' value='开始运动' id='btn' />
<div id='red'></div>
<div class='black'></div>
</body> </html>
参考代码：
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title>JS小案例：匀速运动</title>
<style>
#red {
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 50px;
left: 0;
} .black {
position: absolute;
width: 1px;
height: 200px;
left: 900px;
background: black; }
</style>
<script> window.onload = function () { var oDiv = document.getElementById('red');
var oBtn = document.getElementById('btn');
var timer = null;
function startMove() { var speed = 11;
var iTarget = 700;
/* 点击开始运动按钮后，在抵达终点线前，无论再次点击多少次按钮，#red区块均维持运动速率不变。
*需要确保每次触发点击事件都只有开一个定时器，否则会出现点击越多，运动越快的情况。
*/
if (timer) {
clearInterval(timer);
}
timer = setInterval(function () { /*
*通过if……else结构避免运动抵达目标后点击按钮，#red区块继续运动。
*要确保运动不超出目标值，需要确保当#red与目标点的距离小于或等于speed值时，运动距离不能为speed，要单独进行设置。
*/
if (iTarget - oDiv.offsetLeft < speed && 700 - oDiv.offsetLeft >= 0) {
oDiv.style.left = iTarget + 'px';
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
} }, 30);
}
oBtn.onclick = startMove; } </script>
</head> <body>
<input type='button' value='开始运动' id='btn' />
<div id='red'></div>
<div class='black'></div>
</body> </html>
问题代码1：
window.onload = function () {
var oDiv = document.getElementById('red');
var oBtn = document.getElementById('btn');
var timer = null;
function startMove() {
var speed = 11;
var iTarget = 700;
timer = setInterval(function () {
if (iTarget - oDiv.offsetLeft < speed && 700 - oDiv.offsetLeft >= 0) {
oDiv.style.left = iTarget + 'px';
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
}, 30);
}
oBtn.onclick = startMove;
}
这个会出现什么问题？在抵达目标点前，点击按钮会发现#red约跑越快。
问题代码2：
window.onload = function () {
var oDiv = document.getElementById('red');
var oBtn = document.getElementById('btn');
var timer = null;
function startMove() {
var speed = 11;
var iTarget = 700;
if (timer) {
clearInterval(timer);
}
timer = setInterval(function () {
if (iTarget - oDiv.offsetLeft < speed && 700 - oDiv.offsetLeft >= 0) {
oDiv.style.left = iTarget + 'px';
clearInterval(timer);
}
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}, 30);
}
oBtn.onclick = startMove;
}
这个会出现什么问题？在抵达目标点后，点击按钮，#red还会继续运动一下。
问题代码3：
window.onload = function () {
var oDiv = document.getElementById('red');
var oBtn = document.getElementById('btn');
var timer = null;
function startMove() {
var speed =9;
var iTarget = 700;
if (timer) {
clearInterval(timer);
}
timer = setInterval(function () {
if (oDiv.offsetLeft >= iTarget) {
clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
}, 30);
}
oBtn.onclick = startMove;
}
这个会出现什么问题？#red运动终止点有可能超出目标值一点，没有准确停止在目标值点。
js匀速运动框架案例的更多相关文章
-
[js高手之路]打造通用的匀速运动框架
本文,是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让变 ...
-
[js高手之路]面向对象版本匀速运动框架
这篇文章的效果,需要看过以下3篇文章: [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件 [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出) [js高手之路]打造通用的匀速运动框架 ...
-
H5案例分享：JS手势框架 —— Hammer.js
JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许 ...
-
Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
-
Node.js Express 框架
Node.js Express 框架 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP ...
-
全端开发必备！10个最好的 Node.js MVC 框架
Node.js 是最流行的 JavaScript 服务端平台,它允许建立可扩展的 Web 应用程序.Node.js 包含不同类型的框架,如 MVC 框架.全栈框架.REST API 以及大量的服 ...
-
带无缝滚动的轮播图（含JS运动框架）
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
-
js运动框架之一条乱跑的虫子
克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...
-
Mithril – 构建杰出 Web 应用的 JS MVC 框架
Mithril 是一个客户端的 Javascript MVC 框架.它是一个工具,使应用程序代码分为数据层,UI 层和粘合层.提供了一个模板引擎与一个虚拟的 DOM diff 实现,用于高性能渲染,支 ...
随机推荐
-
NYOJ 455
1.应该交代清楚,参加宴会的人不知道一共有多少顶帽子.假如知道有n顶帽子的话,第一次开灯看见有n-1只,自然就知道自己是第n顶黑帽子,所以应该是这n个人在第一次关灯就打自己脸,不过这么一来就没意思了, ...
-
Python for Infomatics 第12章 网络编程五（译）
注:文章原文为Dr. Charles Severance 的 <Python for Informatics>.文中代码用3.4版改写,并在本机测试通过. 12.8 用urllib读取二进 ...
-
java中wait/notify机制
通常,多线程之间需要协调工作.例如,浏览器的一个显示图片的线程displayThread想要执行显示图片的任务,必须等待下载线程 downloadThread将该图片下载完毕.如果图片还没有下载完,d ...
-
[BZOJ1659][Usaco2006 Mar]Lights Out 关灯
[BZOJ1659][Usaco2006 Mar]Lights Out 关灯 试题描述 奶牛们喜欢在黑暗中睡觉.每天晚上,他们的牲口棚有L(3<=L<=50)盏灯,他们想让亮着的灯尽可能的 ...
-
【BZOJ】【1067】 【SCOI2007】降雨量
思路题 玛雅,这分类讨论快讨论地疯了…… 从huzecong神的题解那里得到的灵感…… 首先考虑最好确定的情况:为true的时候,此时必须同时满足 1.x和y这两年的降雨量已知,且rain[x]< ...
-
redis的hashes类型
redis hash 是一个string类型的field和value 的映射表.它的添加.删除操作都是O(1) . hash特别适合用于存储对象.相较于将对象的每个字段存成单个string类型 . 将 ...
-
安卓Menu键的问题
近期开发中有须要Menu键,结果发现了一个非常尴尬的问题.我的測试机上有Menu键.可是測试平板上没有,队友的測试机上竟然也没有Menu键.这着实有些尴尬... 上网谷歌之后才发现问题所在: 仅仅有在 ...
-
给 Virtualbox 中 Ubuntu 系统设置静态 IP ，让 DNS 配置信息不会在重启后被清除
虚拟机网络选择 桥接网卡 模式. 主要涉及两个步骤: 1. 修改 /etc/network/interfaces 文件: 2. 修改 dns : 第一步,修改 interfaces 文件: sudo ...
- 一张图解析nvm,npm,nodejs之间的关系
-
CSS盒子模型之详解
前言: 盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.一.css盒子模型概念 CSS盒子模型 又称框模型 (Box Model) ,包含了元 ...