<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动</title>
</head>
<body>
<input type="button" value="运动" id="btn">
<div id="div1" style="width: 100px; height: 100px;background-color: #eee; position: absolute;"></div>

<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var oBtn=document.getElementById('btn');
var oTimer=null;
oBtn.onclick=function(){
clearInterval(oTimer); //开启定时器之前先关闭定时器，防止同时调用好几个定时器
oTimer=setInterval(function(){
if (oDiv.offsetLeft>=300) {
clearInterval(oTimer);
}else{
oDiv.style.left=oDiv.offsetLeft+5+'px'; //加if判断是因为当div已经到达300处时再点击div仍会动一下
}
},30)
}
}
</script>
</body>
</html>

运动 js的更多相关文章

  1. js动画 Css提供的运动 js提供的运动

    1.     动画 (1)      Css样式提供了运动 过渡的属性transition  从一种情况到另一种情况叫过渡 Transition:attr  time  linear  delay: ...

  2. 有方向的运动js

    <!doctype html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  3. js实现缓冲运动，和匀速运动有点不相同

    缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...

  4. 二、JavaScript语言--JS动画--JS动画效果

    运动框架实现思路: 1.速度(改变值:left , right , width , height , opacity) 2.缓冲运动 3.多物体运动 4.任意值改变 5.链式运动 6.同时运动 js用 ...

  5. JS学习随手笔记

    ===================字符串===================== 字符串中间的空格也是要算长度的. 每一个字符都可以返回对应的Unicode 编码 文字的简单加密都是通过char ...

  6. JS面向对象介绍

    JS面向对象介绍 首先面向对象是什么?为什么要使用面向对象. 因为JavaScript对每个创建的对象都会自动设置一个原型(谷歌火狐中是proto),指向它的原型对象prototype,举个例子: f ...

  7. js入门学习~ 运动应用小例

    要实现的效果如下: 鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~ (且各运动相互之前不干扰)  主要是练习多个物体的运动框架~~ --------------------- ...

  8. js模拟抛出球运动

    js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...

  9. 使用原生JS实现一个风箱式的demo，并封装了一个运动框架

    声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的 ...

随机推荐

  1. Ping出现TTL expired in transit的原因

    今天上班检查服务器时发现出现TTL expired in transit的提示,这种提示还是第一次见,如图: ping 和 tracert 的结果 用tracert来看路由状况,原来是出现路由环路导致 ...

  2. 二模12day1解题报告

    T1.笨笨与电影票(ticket) 有n个1和m个0,求每个数前1的个数都大于等于0的个数的排列数. 非常坑的一道题,推导过程很烦.首先求出所有排列数是 C(n+m,m),然后算不合法的个数. 假设存 ...

  3. Android test---robotium----简单例子

    1.首先新建一个要被测试的工程,命名为”robotium“:一个很简单的Android 应用程序:主页面只有个 TextView 控件: 2. 在建一个用于测试的工程 ,命名为”robotiumTes ...

  4. oracle修改字段长度

    alter table 表名 modify (字段名 字段类型长度);alter table cachemsg modify (callernum varchar(40));

  5. Lenovo ThinkPad W520 4282-A76

    processor: Intel Quad Core i7-2630QM (2GHz, 8MB L3, 1333MHz FSB, 45W) graphics adapter: NVIDIA Quadr ...

  6. bonext.js学习笔记

    bonext.js是个什么鬼? 首先这是一个前端开发框架,建立在Backbone.js的基础上,使用Jquery操作Dom,Bootstrap负责布局,Art-Template渲染模板,再加上自定义一 ...

  7. S2SH CRUD 整合

    采用的框架 Struts2+Spring4+Hbiernate4. 目录结构 :    EmployeeAction: package com.xx.ssh.actions; import java. ...

  8. Mysql存储过程调用

    mysql存储过程实例教程 发布时间:2014-04-09编辑:JB01 这篇文章主要介绍了mysql存储过程的使用方法,mysql存储过程实例教程,有需要的朋友参考下.   1.1create  p ...

  9. VS CODE 下的 ESLint 安装以及使用

    经过半年的前端磨练(就是不停地敲敲代码),自认水平提高的速度还是可以的. 现在回头看下写过的代码,发现以前写的代码真的是不忍惨睹. 比如 变量名乱起 风格多变 注释乱写或者没写 等等错误; 这不是一个 ...

  10. private + virtual in Java/C++

    在Java中,private方法是隐式final的,就是说即使在子类中定义一个一模一样的方法,编译器认为这是两个没有联系的方法.private方法不参与运行时多态,这点和 final方法.static ...