javascript定時(shí)器的簡單應(yīng)用示例【控制方塊移動(dòng)】

更新時(shí)間：2019年06月17日 10:07:19 作者：longzhoufeng

這篇文章主要介紹了javascript定時(shí)器的簡單應(yīng)用,結(jié)合javascript事件觸發(fā)控制方塊移動(dòng)操作分析了javascript定時(shí)器使用相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript定時(shí)器的簡單應(yīng)用。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.dhdzp.com 定時(shí)器的應(yīng)用</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>

運(yùn)行結(jié)果：

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

利用JS定時(shí)器實(shí)現(xiàn)元素移動(dòng)

相關(guān)文章

javascript搜索自動(dòng)提示功能的實(shí)現(xiàn)
使用 jQuery(Ajax)/PHP/MySQL實(shí)現(xiàn)自動(dòng)完成功我覺得我有必要寫這個(gè)教程，因?yàn)樵?jīng)見到的大部分關(guān)于自動(dòng)完成的應(yīng)用程序都只是給你一個(gè)程序源碼包，然后告訴你怎么使用，而不是告訴你它是如何工作的以及為什么這樣做。
2008-06-06
js如何清空input?file的值
這篇文章主要介紹了js如何清空input?file的值問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
利用js判斷瀏覽器類型(是否為IE,Firefox,Opera瀏覽器)
我們開發(fā)的人來說經(jīng)常要加個(gè)判斷，要不可能某些功能沒法正常使用。要是沒加個(gè)判斷就會給大家?guī)硇┞闊?/div> 2013-11-11
你必須知道的Javascript知識點(diǎn)之"單線程事件驅(qū)動(dòng)"的使用
本篇文章小編為大家介紹，你必須知道的Javascript知識點(diǎn)之"單線程事件驅(qū)動(dòng)"的使用。需要的朋友參考下
2013-04-04
判斷js對象是否擁有某一個(gè)屬性的js代碼
js對象是否擁有某一個(gè)屬性的判斷方法有很多，下面為大家介紹個(gè)比較實(shí)用的技巧，希望對大家有所幫助
2013-08-08
JavaScript實(shí)現(xiàn)簡單的音樂播放器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
js中null與空字符串""的區(qū)別講解
今天小編就為大家分享一篇關(guān)于js中null與空字符串""的區(qū)別講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2019-01-01
js導(dǎo)出Excel表格超出26位英文字符的解決方法ES6
下面小編就為大家?guī)硪黄猨s導(dǎo)出Excel表格超出26位英文字符的解決方法ES6。具有很好的參考價(jià)值。一起跟隨小編過來看看吧，希望對大家有所幫助
2017-11-11
js TextArea的選中區(qū)域處理
js中對于TextArea的選中區(qū)域后進(jìn)行處理的代碼，需要的朋友可以參考下。
2010-12-12
微信小程序如何實(shí)現(xiàn)五星評價(jià)功能
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)五星評價(jià)功能,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10