JS实现静止元素自动移动示例

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

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

  

复制代码 代码如下:

  <!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;//控制移动量的变量

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

  }

  </script>

  </head>

  <body>

  <button id="start" <button id="pause" disabled>暂停</button>

  <br/>

  <span id="sp1">0</span>

  </body>

  </html>