javascript定时器的简单应用示例【控制方块移动】


Posted in Javascript onJune 17, 2019

本文实例讲述了javascript定时器的简单应用。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 定时器的应用</title>
  <style>
    #Div1 { width: 100px; height: 100px; position: absolute; background-color: red; top: 50px; }
  </style>
</head>
<body>
<input id="oBtn1" type="button" value="铵钮">
<div id="Div1"></div>
<script>
  var oBtn = document.getElementById("oBtn1");
  var oDiv = document.getElementById("Div1");
  //var timer=null;
  //oDiv.timer=null;
  oBtn.onclick = function() {
    clearInterval(oDiv.timer)
    oDiv.timer = setInterval(function() {
      var speed = parseInt(getStyle(oDiv, "left")) + 9;
      if(speed > 800) {
        speed = 800;
      }
      oDiv.style.left = speed + "px"
      if(speed == 800) {
        clearInterval(oDiv.timer);
        //alert(speed)
      }
    }, 50)
  }
  function getStyle(obj, attr) {
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]
  }
</script>
</body>
</html>

运行结果:

javascript定时器的简单应用示例【控制方块移动】

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js 刷新页面的代码小结 推荐
Apr 02 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
原生js+canvas实现下雪效果
Aug 02 Javascript
深入解析koa之异步回调处理
Jun 17 #Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 #Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 #Javascript
JS实现的字符串数组去重功能小结
Jun 17 #Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 #Javascript
深入解析koa之中间件流程控制
Jun 17 #Javascript
深入解读Node.js中的koa源码
Jun 17 #Javascript
You might like
用PHP函数解决SQL injection
2006/10/09 PHP
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
PHP memcache扩展的三种安装方法
2009/04/26 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
jquery的颜色选择插件实例代码
2008/10/02 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
Python装饰器简单用法实例小结
2018/12/03 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
python绘制雪景图
2019/12/16 Python
iPython pylab模式启动方式
2020/04/24 Python
如何用Python 加密文件
2020/09/10 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
物业电工岗位职责
2013/11/20 职场文书
党员承诺书范文
2014/05/19 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
《藏戏》教学反思
2016/02/23 职场文书
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server