JS-简单地匀速运动框架
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>运动框架-匀速运动</title>
<style type="text/css">
.div {
width: 100px;
height: 100px;
background-color: chartreuse;
margin-top: 20px;
position: relative;
left: 0;
top: 0;
}
</style>
<script type="text/javascript">
var timer = null;
function start() {
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div');
//1
clearInterval(timer);
timer = setInterval(function() {
var speed = 1;
//2
if(oDiv.offsetLeft >= 1100) {
clearInterval(timer);
}
else{
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
} }, 30)
}
</script>
</head> <body>
<input type="button" id="btn" value="运动" onclick="start()" />
<div class="div" id="div"></div>
<p>关键点:1:清除定时器，2：if/else判断</p>
</body> </html>
学习路径：智能社的开发教程：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc
JS-简单地匀速运动框架的更多相关文章
- [js高手之路]打造通用的匀速运动框架
本文,是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让变 ...
- Node.js简单介绍并实现一个简单的Web MVC框架
编号:1018时间:2016年6月13日16:06:41功能:Node.js简单介绍并实现一个简单的Web MVC框架URL :https://cnodejs.org/topic/4f16442cca ...
- [js高手之路]面向对象版本匀速运动框架
这篇文章的效果,需要看过以下3篇文章: [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件 [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出) [js高手之路]打造通用的匀速运动框架 ...
- Atitit.js javascript的rpc框架选型
Atitit.js javascript的rpc框架选型 1. Dwr1 2. 使用AJAXRPC1 2.2. 数据类型映射表1 3. json-rpc轻量级远程调用协议介绍及使用2 3.1. 2.3 ...
- node.js 在 Express4.0 框架使用 Connect-Busboy 实现文件上传
node.js下四种post提交数据的方式 今天说分享的是其中一种,就是上传文件. Express 4.0 以后,将功能原子化,高内聚,低耦合,独立出了很多中间件 今天主要分享文件上传 对于conne ...
- Maven+Spring+Hibernate+Shiro+Mysql简单的demo框架(二)
然后是项目下的文件:完整的项目请看 上一篇 Maven+Spring+Hibernate+Shiro+Mysql简单的demo框架(一) 项目下的springmvc-servlet.xml配置文件: ...
- [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架
MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...
- 使用Node.js实现简易MVC框架
在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...
- [转] 使用Node.js实现简易MVC框架
在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...
- koa2源码解读及实现一个简单的koa2框架
阅读目录 一:封装node http server. 创建koa类构造函数. 二:构造request.response.及 context 对象. 三:中间件机制的实现. 四:错误捕获和错误处理. k ...
随机推荐
- 怎样编写socket套接字
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...
- Ajax-java中的ajax使用，以及编码问题
结合Ajax类使用:http://www.cnblogs.com/hfultrastrong/p/7267171.html javascript代码: <script type="te ...
- 数据库之“on”“where”区别
数据库在通过连接两张或者多张表返回记录时,都会生成一张中间的临时表,然后再将这张临时表返回给用户 在使用inner join(内连接)没有区别,但是 在使用left jion时,on和where条件的 ...
- imx6 fec分析
/***************************************************************************** * imx6 fec分析 * 本文主要分析 ...
- Spring 4 官方文档学习（十一）Web MVC 框架之themes
http://docs.spring.io/spring/docs/current/spring-framework-reference/html/mvc.html#mvc-themeresolver ...
- 64位程序，long*转long 出错
原因: long*在64位程序中占8个字节,long占4个字节.强转会出错. 解决方法: 把long用long long替换,long long 占8个字节
- ANSI 标准是为了确保 C++ 的便携性
ANSI 标准ANSI 标准是为了确保 C++ 的便携性 —— 您所编写的代码在 Mac.UNIX.Windows.Alpha 计算机上都能通过编译. 由于 ANSI 标准已稳定使用了很长的时间,所有 ...
- tarjan算法-解决有向图中求强连通分量的利器
小引 看到这个名词-tarjan,大家首先想到的肯定是又是一个以外国人名字命名的算法.说实话真的是很佩服那些算法大牛们,佩服得简直是五体投地啊.今天就遇到一道与求解有向图中强连通分量的问题,我的思路就 ...
- SpringMVC-Controller
接上: web.xml Spring-servlet.xml Controller层是控制层,在其类上添加@Controller注解,会被Spring-servlet.xml中的<context ...
- Android开发之经常使用的时间格式
/** * 获取如今时间 * * @return 返回时间类型 yyyy-MM-dd HH:mm:ss */ public static Date getNowDate() { ...