js实现元素运动代码实例下载

本章节分享一个能够实现元素直线运动的代码实例，代码非常的简单，仅供参考之用，希望能够对初学者带来一定的参考。

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css"> 
*{
  margin:0px;
  padding:0px;
}
#run{ 
  border:5px red solid ; 
  display:inline-block; 
  width:40px; 
  height:20px; 
  font-size:20px; 
  text-align:center; 
} 
</style> 
<script type="text/javascript"> 
var timer=null; 
var maR=0;
var flag=0;
  
function moveright(){ 
  run.style.marginLeft=maR+"px"; 
  maR=maR+1; 
} 
  
function moveleft(){ 
  run.style.marginLeft=maR+"px"; 
  maR=maR-1; 
} 
  
function go(){ 
  start.disabled=true;
  pause.disabled=false;
  run.innerHTML=parseInt(run.innerHTML)+1; 
  timer=setTimeout(go,10); 
  if(flag==1){ 
    setTimeout(moveleft,10); 
  } 
  if(flag==0){ 
    setTimeout(moveright,10); 
  } 
  if(maR>(window.outerWidth-60)){ 
    flag=1; 
  } 
  if(maR<0){ 
    flag=0; 
  } 
} 
  
function stop(){ 
  start.disabled=false; 
  pause.disabled=true; 
  clearTimeout(timer); 
} 
  
window.onload=function(){
  var start=document.getElementById("start"); 
  var pause=document.getElementById("pause");
  start.onclick=function(){
    go();
  }
  pause.onclick=function(){
    stop()
  }
}
</script> 
</head> 
<body> 
<button id="start">开始运动</button> 
<button id="pause" disabled>暂停运动</button> 
<br/> 
<span id="run">0</span> 
</body> 
</html>

代码描述：js元素运动。js实现元素运动代码实例下载

下载全部收藏

126 167

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册