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