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 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
一个简单的js树形菜单
Dec 09 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
js脚本实现数据去重
Nov 27 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
深入解析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
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
design vue 表格开启列排序的操作
2020/10/28 Javascript
跟老齐学Python之编写类之二方法
2014/10/11 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
pycharm远程调试openstack代码
2017/11/21 Python
python并发编程之线程实例解析
2017/12/27 Python
Python实现基于POS算法的区块链
2018/08/07 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
开业庆典答谢词
2014/01/18 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
同学聚会策划方案
2014/06/06 职场文书
清洁工岗位职责
2015/02/13 职场文书
母亲节寄语大全
2015/02/27 职场文书
教学副校长工作总结
2015/08/13 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript