JS運(yùn)動(dòng)基礎(chǔ)框架實(shí)例分析
更新時(shí)間：2015年03月03日 11:09:19 作者：mikyou
這篇文章主要介紹了JS運(yùn)動(dòng)基礎(chǔ)框架,實(shí)例分析了javascript定時(shí)器及div樣式的使用技巧,需要的朋友可以參考下
本文實(shí)例講述了JS運(yùn)動(dòng)基礎(chǔ)框架。分享給大家供大家參考。具體分析如下：
這里需要注意：
1. 在開始運(yùn)動(dòng)時(shí)關(guān)閉已有的定時(shí)器
2. 把運(yùn)動(dòng)和停止隔開
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background: red;
position: absolute;
left:0;
top:60px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
var oBt=document.getElementsByTagName('input')[0];
var time=null;
oBt.onclick=function(){
clearInterval(time);//這里首先要關(guān)閉一個(gè)定時(shí)器，這是因?yàn)榻鉀Q在運(yùn)動(dòng)過程中多次點(diǎn)擊按鈕從而產(chǎn)生多個(gè)定時(shí)器疊加的bug
time=setInterval(function(){
var speed=7;
if(oDiv.offsetLeft<=600)
oDiv.style.left=oDiv.offsetLeft+speed+'px';
else{
clearInterval(time);
}
},30);
}
}
</script>
</head>
<body>
<input type="button" value="開始運(yùn)動(dòng)" />
<div id="div1"></div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background: red;
position: absolute;
left:0;
top:60px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
var oBt=document.getElementsByTagName('input')[0];
var time=null;
oBt.onclick=function(){
clearInterval(time);//這里首先要關(guān)閉一個(gè)定時(shí)器，這是因?yàn)榻鉀Q在運(yùn)動(dòng)過程中多次點(diǎn)擊按鈕從而產(chǎn)生多個(gè)定時(shí)器疊加的bug
time=setInterval(function(){
var speed=7;
if(oDiv.offsetLeft<=600)
oDiv.style.left=oDiv.offsetLeft+speed+'px';
else{
clearInterval(time);
}
},30);
}
}
</script>
</head>
<body>
<input type="button" value="開始運(yùn)動(dòng)" />
<div id="div1"></div>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- js實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果的方法
- js實(shí)現(xiàn)同一頁面多個(gè)不同運(yùn)動(dòng)效果的方法
- JS運(yùn)動(dòng)框架之分享側(cè)邊欄動(dòng)畫實(shí)例
- JS實(shí)現(xiàn)多物體緩沖運(yùn)動(dòng)實(shí)例代碼
- JS實(shí)現(xiàn)勻速運(yùn)動(dòng)的代碼實(shí)例
- JS勻速運(yùn)動(dòng)演示示例代碼
- JS多物體 任意值 鏈?zhǔn)?緩沖運(yùn)動(dòng)
- js實(shí)現(xiàn)同一頁面多個(gè)運(yùn)動(dòng)效果的方法
相關(guān)文章
用JavaScript 判斷用戶使用的是 IE6 還是 IE7
判斷IE瀏覽器的腳本，方便根據(jù)瀏覽器不懂，支持不同的代碼的分別調(diào)用。2008-01-01
javascript消除window.close()的提示窗口
有人問起，怎么去掉js調(diào)用window.close()時(shí)怎么去掉那可惡的提示，咋一看好像還真不好弄，IE的安全機(jī)制好像就不允許通過腳本關(guān)閉本頁面，但是IE好像可以允許js關(guān)閉彈出窗口，那我們是不是可以通過一定的技巧欺騙一下IE，繞過去呢。鼓搗了幾下，似乎還真可以做到2015-05-05
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)撥打電話功能的示例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
JavaScript該如何學(xué)習(xí) 怎樣輕松學(xué)習(xí)JavaScript
JavaScript該如何學(xué)習(xí)？如何輕松學(xué)習(xí)JavaScript？這篇文章主要介紹了輕松學(xué)習(xí)JavaScript的方法2017-06-06
基于Bootstrap漂亮簡(jiǎn)潔的CSS3價(jià)格表(附源碼下載)
該價(jià)格表基于Bootstrap網(wǎng)格系統(tǒng)來進(jìn)行布局，通過簡(jiǎn)單的CSS3代碼來美化價(jià)格表，樣式非常的時(shí)尚漂亮，且能在不同屏幕下展示良好的效果,需要的朋友可以參考下2017-02-02
JS實(shí)現(xiàn)超精簡(jiǎn)的鏈接列表在固定區(qū)域內(nèi)滾動(dòng)效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)超精簡(jiǎn)的鏈接列表在固定區(qū)域內(nèi)滾動(dòng)效果代碼,非常常見的頁面元素屬性變換控制實(shí)現(xiàn)滾動(dòng)效果,簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-11-11
JS數(shù)組中常用方法技巧學(xué)會(huì)進(jìn)階成為大佬
這篇文章主要為大家介紹了JS數(shù)組中常用的方法技巧，學(xué)會(huì)了你就在進(jìn)階成為大佬的道路上又邁進(jìn)了一步，希望能夠有所幫助，祝大家多多進(jìn)步2021-10-10
使用JavaScript判斷一個(gè)元素是否在可視范圍內(nèi)的幾種方法
在Web開發(fā)中,有時(shí)我們需要知道一個(gè)元素是否在用戶的可視范圍內(nèi),以便執(zhí)行相應(yīng)的操作,比如延遲加載圖片、實(shí)現(xiàn)懶加載、或是觸發(fā)動(dòng)畫效果, 本文將詳細(xì)介紹使用 JavaScript 如何判斷一個(gè)元素是否在可視范圍內(nèi)的幾種方法,需要的朋友可以參考下2024-02-02
微信小程序 點(diǎn)擊控件后選中其它反選實(shí)例詳解
這篇文章主要介紹了微信小程序 點(diǎn)擊控件后選中其它反選實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-02-02
Bootstrap CSS組件之下拉菜單(dropdown)
這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS組件之下拉菜單(dropdown),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12