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 相关文章推荐
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
js获取图片宽高的方法
Nov 25 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
js实现选项卡效果
Mar 07 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 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 base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
浅谈Vue.js
2017/03/02 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
jQuery创建折叠式菜单
2019/06/15 jQuery
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
python获取list下标及其值的简单方法
2016/09/12 Python
机器学习python实战之决策树
2017/11/01 Python
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
六道php面试题附答案
2014/06/05 面试题
编写strcpy函数
2014/06/24 面试题
给校长的建议书300字
2014/05/16 职场文书
联片教研活动总结
2014/07/01 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
环境卫生标语
2015/08/03 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
PHP RabbitMQ消息列队
2022/05/11 PHP