javascript定時器的簡單應(yīng)用示例【控制方塊移動】
更新時間：2019年06月17日 10:07:19 作者：longzhoufeng
這篇文章主要介紹了javascript定時器的簡單應(yīng)用,結(jié)合javascript事件觸發(fā)控制方塊移動操作分析了javascript定時器使用相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了javascript定時器的簡單應(yīng)用。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.fzitv.net 定時器的應(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>
運行結(jié)果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
您可能感興趣的文章:
相關(guān)文章
使用 jQuery(Ajax)/PHP/MySQL實現(xiàn)自動完成功我覺得我有必要寫這個教程，因為曾經(jīng)見到的大部分關(guān)于自動完成的應(yīng)用程序都只是給你一個程序源碼包，然后告訴你怎么使用，而不是告訴你它是如何工作的以及為什么這樣做。2008-06-06
這篇文章主要介紹了js如何清空input?file的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
利用js判斷瀏覽器類型(是否為IE,Firefox,Opera瀏覽器)
我們開發(fā)的人來說經(jīng)常要加個判斷，要不可能某些功能沒法正常使用。要是沒加個判斷就會給大家?guī)硇┞闊?/div> 2013-11-11
你必須知道的Javascript知識點之"單線程事件驅(qū)動"的使用
本篇文章小編為大家介紹，你必須知道的Javascript知識點之"單線程事件驅(qū)動"的使用。需要的朋友參考下2013-04-04
js對象是否擁有某一個屬性的判斷方法有很多，下面為大家介紹個比較實用的技巧，希望對大家有所幫助2013-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單的音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
今天小編就為大家分享一篇關(guān)于js中null與空字符串""的區(qū)別講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
js導(dǎo)出Excel表格超出26位英文字符的解決方法ES6
下面小編就為大家?guī)硪黄猨s導(dǎo)出Excel表格超出26位英文字符的解決方法ES6。具有很好的參考價值。一起跟隨小編過來看看吧，希望對大家有所幫助2017-11-11
js中對于TextArea的選中區(qū)域后進行處理的代碼，需要的朋友可以參考下。2010-12-12
這篇文章主要介紹了微信小程序如何實現(xiàn)五星評價功能,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10最新評論