JS實(shí)現(xiàn)靜止元素自動(dòng)移動(dòng)示例
更新時(shí)間：2014年04月14日 16:23:53 作者：
這篇文章主要介紹了JS實(shí)現(xiàn)靜止元素自動(dòng)移動(dòng)的具體實(shí)現(xiàn),需要的朋友可以參考下
一個(gè)元素是靜止的，使它在屏幕上實(shí)現(xiàn)自動(dòng)移動(dòng)。
這是一個(gè)比較簡(jiǎn)單問題，在學(xué)習(xí)中遇到了，把它寫了下來(lái)。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
#sp1{
border: red solid ;
display: inline-block;
width: 30px;
height: 20px;
font-size: 20px;
text-align: center;
}
</style>
<script>
var timenum;
var mar=0;//控制移動(dòng)量的變量
var flag = 0;//實(shí)現(xiàn)控制左右移動(dòng)的一個(gè)變量
//實(shí)現(xiàn)向右移動(dòng)的函數(shù)
function moveright(){
sp1.style.marginLeft=mar+"px";
mar=mar+5;
}
//實(shí)現(xiàn)向右移動(dòng)的函數(shù)
function moveleft(){
sp1.style.marginLeft=mar+"px";
mar=mar-5;
}
function go() {
var sp1 =document.getElementById("sp1");
var btn1 = document.getElementById("start");
if(!btn1.disabled){
btn1.disabled = true;
document.getElementById("pause").disabled=false;
}
sp1.innerHTML=parseInt(sp1.innerHTML)+1;
timenum = window.setTimeout(go,10);
if(flag==1){
window.setTimeout(moveleft,10);
}
if(flag==0){
window.setTimeout(moveright,10);
}
if(mar>(window.outerWidth)){
flag=1;
}
if(mar<0){
flag=0;
}
}
function stop(){
document.getElementById("start").disabled = false;
document.getElementById("pause").disabled=true;
window.clearTimeout(timenum);
}
</script>
</head>
<body>
<button id="start" <button id="pause" disabled>暫停</button>
<br/>
<span id="sp1">0</span>
</body>
</html>
這是一個(gè)比較簡(jiǎn)單問題，在學(xué)習(xí)中遇到了，把它寫了下來(lái)。
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
#sp1{
border: red solid ;
display: inline-block;
width: 30px;
height: 20px;
font-size: 20px;
text-align: center;
}
</style>
<script>
var timenum;
var mar=0;//控制移動(dòng)量的變量
var flag = 0;//實(shí)現(xiàn)控制左右移動(dòng)的一個(gè)變量
//實(shí)現(xiàn)向右移動(dòng)的函數(shù)
function moveright(){
sp1.style.marginLeft=mar+"px";
mar=mar+5;
}
//實(shí)現(xiàn)向右移動(dòng)的函數(shù)
function moveleft(){
sp1.style.marginLeft=mar+"px";
mar=mar-5;
}
function go() {
var sp1 =document.getElementById("sp1");
var btn1 = document.getElementById("start");
if(!btn1.disabled){
btn1.disabled = true;
document.getElementById("pause").disabled=false;
}
sp1.innerHTML=parseInt(sp1.innerHTML)+1;
timenum = window.setTimeout(go,10);
if(flag==1){
window.setTimeout(moveleft,10);
}
if(flag==0){
window.setTimeout(moveright,10);
}
if(mar>(window.outerWidth)){
flag=1;
}
if(mar<0){
flag=0;
}
}
function stop(){
document.getElementById("start").disabled = false;
document.getElementById("pause").disabled=true;
window.clearTimeout(timenum);
}
</script>
</head>
<body>
<button id="start" <button id="pause" disabled>暫停</button>
<br/>
<span id="sp1">0</span>
</body>
</html>
相關(guān)文章
JavaScript時(shí)間戳與時(shí)間日期間相互轉(zhuǎn)換
今天做項(xiàng)目遇到這樣的問題，要將獲取到的時(shí)間轉(zhuǎn)換為時(shí)間戳，通過(guò)查閱相關(guān)資料，問題順利解決，下面小編把具體實(shí)現(xiàn)代碼分享到腳本之家平臺(tái)，需要的朋友參考下2017-12-12
使用js操作css實(shí)現(xiàn)js改變背景圖片示例
有個(gè)朋友在weibo上問我可不可以用JS和CSS讓頁(yè)面每次刷新隨機(jī)產(chǎn)生一張背景圖，當(dāng)然是可以的。具體的方法看下面的實(shí)現(xiàn)代碼吧2014-03-03
這篇文章主要介紹了JavaScript中set與get方法用法,簡(jiǎn)單描述了set與get方法的功能,并結(jié)合實(shí)例形式分析了set與get方法的具體使用技巧,需要的朋友可以參考下2018-08-08
本地對(duì)象Array的原型擴(kuò)展實(shí)現(xiàn)代碼
該擴(kuò)展方法目的為刪除數(shù)組中的重復(fù)項(xiàng)，并返回一個(gè)包含所有重復(fù)條目的新數(shù)組；2010-12-12
JS實(shí)現(xiàn)的簡(jiǎn)單鼠標(biāo)跟隨DiV層效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單鼠標(biāo)跟隨DiV層效果,涉及JavaScript基于時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
Js為表單動(dòng)態(tài)添加節(jié)點(diǎn)內(nèi)容的方法
這篇文章主要介紹了Js為表單動(dòng)態(tài)添加節(jié)點(diǎn)內(nèi)容的方法,實(shí)例分析了js針對(duì)表單節(jié)點(diǎn)進(jìn)行添加操作的常用技巧,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)車輛管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
本篇文章主要介紹了mui框架移動(dòng)開發(fā)初體驗(yàn)詳解小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
小程序?qū)崿F(xiàn)tab標(biāo)簽頁(yè)
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)tab標(biāo)簽頁(yè)，可點(diǎn)擊切換，滑動(dòng)切換頁(yè)面,文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11