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 ...
随机推荐
- 【springmvc笔记】第二课 环境搭建和第一个springmvc例子
1. 开发工具准备 eclipse + jdk1.7 spring-framework-4.3.9.RELEASE 2. 新建Dynamic Web Project项目,命名为springmvc. 3 ...
- unsupported major.monor version 51.0 (unable to load *.servlet)………………
unsupported major.monor version 51.0 (unable to load *.servlet)------ 这种异常是因为编译war或者java程序的JDK版本和运行部 ...
- warning: incompatible implicit declaration of built-in function 'exit'
warning: incompatible implicit declaration of built-in function 'exit' 解决方法: 在头文件里 引入 stdlib 文件, #i ...
- 轻量级ORM框架Dapper应用二：使用Dapper实现CURD操作
在上一篇文章中,讲解了如何安装Dapper,这篇文章中将会讲解如何使用Dapper使用CURD操作. 例子中使用到的实体类定义如下: using System; using System.Collec ...
- [HTML] 使用size和maxlength分别控制文本框宽度和输入字符数的限制
① size一般可以直观的看到,就是文本框的宽度,只能决定文本框的宽度,也就是可以看到的字符的个数. 如:size="5" 这意味着如果输入 我的国家是北京 那么只能看见 我 ...
- android 内存管理机制、异常、垃圾回收
当 Android 应用程序退出时,并不清理其所占用的内存,Linux 内核进程也相应的继续存在,所谓“退出但不关闭”.从而使得用户调用程序时能够在第一时间得到响应. 当系统内存不足时,系统将激活内存 ...
- Java运行时，各种类型存储介绍
Java的内存分配 Java程序运行时的内存结构分成:方法区.栈内存.堆内存.本地方法栈几种. 方法区 存放装载的类数据信息,包括:基本信息:每个类的全限定名.每个类的直接超类的全限定 ...
- TFS2010 分支问题
最近在使用TFS2010分支的时候,对项目怎么分支都无法分支. 原因:TFS只支持对文件夹分支不针对项目分支 解决:项目建一个文件夹 把项目移动进去,再进行分支即可. 提示:Nuget会出现意外的路径 ...
- 验证码显示不出来,在THINKPHP中的使用
未开启 php_gd2设置 php的配置文件php.ini,搜索extension=php_gd2.dll,去掉前面的分号即可: 1.在模块类中增加一个 verify 方法来用于显示验证码Public ...
- windows下dubbo-admin和zookeeper安装部署
1. 概述 ZooKeeper是Hadoop的正式子项目,它是一个针对大型分布式系统的可靠协调系统,提供的功能包括:配置维护.名字服务.分布式同步.组服务等.ZooKeeper的目标就是封装好复杂 ...