javascript定時器的簡單應用示例【控制方塊移動】

2019-11-19 11:19:45

字體：大中小

來源：轉載

供稿：網友

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

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.survivalescaperooms.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>

運行結果：