<!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. HsqlDB Demo

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...

  2. MySQL学习（一）

    mysql left join,right join,inner join用法分析 left join:是以A表的记录为基础的,A可以看成左表,B可以看成右表,left join是以左表为准的. 换句 ...

  3. java学习第20天（IO流）

    构造方法File file = new File("e:\\demo"); 创建文件夹 File file = new File("e:\\demo"); fi ...

  4. Webservice接口

    快递查询接口 http://webservice.36wu.com/ExpressService.asmxip查询接口 http://webservice.36wu.com/ipService.asm ...

  5. Asp.net 未处理异常

    页面级捕获未处理异常 - Page 的 Error 事件 Protected Sub Page_Error(ByVal sender As Object, ByVal e As System.Even ...

  6. xampp windows版本安装后无法使用大文件下载的解决办法

    找到httpd.conf 在<Directory "C:/xampp/htdocs"> </Directory>添加EnableSendfile On

  7. Linux内核分析总结

    张潇月 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 学习目录: (1)计算机是如何工作的   h ...

  8. HUSTOJ搭建实录

    要做一个MOOC平台,要求有在线编程功能,想偷个懒,于是用了HUSTOJ...... 系统:Ubuntu14.04 Kylin 步骤: 一.搭建服务器和相应环境 apache2: sudo apt-g ...

  9. Mybatis分页插件

    mybatis配置 <!-- mybatis分页插件 --> <bean id="pagehelper" class="com.github.pageh ...

  10. mybatis单个插入和批量插入的简单比较

    在J2EE项目中,mybatis作为主流持久层框架,许多知识值得我们去钻研学习,今天,记录一下数据插入性能(单个插入和批量插入). 一,测试对象 public class Test { private ...