html自动向右移动,JS实现静止元素自动移动示例

一个元素是静止的，使它在屏幕上实现自动移动。

这是一个比较简单问题，在学习中遇到了，把它写了下来。

#sp1{

border: red solid ;

display: inline-block;

width: 30px;

height: 20px;

font-size: 20px;

text-align: center;

}

var timenum;

var mar=0;//控制移动量的变量

var flag = 0;//实现控制左右移动的一个变量

//实现向右移动的函数

function moveright(){

sp1.style.marginLeft=mar+"px";

mar=mar+5;

}

//实现向右移动的函数

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);

}

暂停

0