JS 的setInterval等一秒才执行，怎么弄？

wu201314 · 发表于 2014-8-21 10:16:12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>首页</title>
  <style type="text/css">
  body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;}
  body{font:12px "宋体","Arial Narrow",HELVETICA; -webkit-text-size-adjust:100%; line-height:25px;}
  a{color:#333;text-decoration:none}
  a:hover{text-decoration:underline;}
  ul,li{list-style:none; margin:0px; padding:0px;}
  img{border:0;vertical-align:middle;}

#slide{ width: 350px; margin:50px auto; border:1px solid red; padding:10px;}
  .top,.bottom{ width: 350px; line-height: 35px; font-size: 18px; text-align: center; font-weight: bold; color: #fff; background-color: red; cursor: pointer;}
  .slid_m{ width: 350px; overflow: hidden; height: 550px; overflow: hidden;}
  .slid_m ul{ position: relative; top: 0px;}
  .slid_m li{ background-color: #cfcfcf; height: 100px; line-height: 100px; color: red; font-size: 36px; text-align: center; color: #000; margin:5px 0px; overflow: hidden; float: left; width: 350px;}
  </style>
  <script type="text/javascript">
  function getClass(obj,iClass){
  var aRest = obj.getElementsByTagName('*');
  var aClass = [];
  var i=0; 
  for(i=0; i<aRest.length; i++){
    if(aRest[i].className==iClass){
      aClass.push(aRest[i]);
    }
  }
  return aClass;
}
function getStyle(obj,attr){
  if(obj.currentStyle){
    return obj.currentStyle[attr];
  }else{
    return getComputedStyle(obj,false)[attr];
  }
}
function Movement(obj,attr,itarget){
  clearInterval(obj.timer);
  obj.timer=setInterval(function(){
    var icur = 0;
    icur = parseInt(getStyle(obj,attr));
    var ispend = (itarget-icur)/8;
    ispend = ispend>0?Math.ceil(ispend):Math.floor(ispend);
    if(icur==itarget){
      clearInterval(obj.timer);
    }else{
      obj.style[attr]=icur+ispend+'px';
    }
  },30)
}

window.onload=function(){
  var oslide = document.getElementById('slide');
  var otop = getClass(oslide,'top')[0];
  var obottom = getClass(oslide,'bottom')[0];
  var oslide_m = getClass(oslide,'slid_m')[0];
  var om_ul = oslide_m.getElementsByTagName('ul')[0];
  var om_li = om_ul.getElementsByTagName('li');
  var liHeight = parseInt(getStyle(om_li[0],'height'))+10
  om_ul.innerHTML+=om_ul.innerHTML;
  om_ul.style.height=liHeight*om_li.length+'px';
  setInterval(function(){
    if(parseInt(getStyle(om_ul,'top'))==-parseInt(getStyle(om_ul,'height'))/2){
      // alert('message')

om_ul.style.top=0;
    }else{
      Movement(om_ul,'top',parseInt(getStyle(om_ul,'top'))-liHeight);
    }
  },1000)
   otop.onclick=function(){
      Movement(om_ul,'top',parseInt(getStyle(om_ul,'top'))-liHeight);
   }
}

</script>
</head>
<body>
  <div id="slide">
    <div class="top">上</div>
    <div class="slid_m">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    </div>
    <div class="bottom">下</div>
  </div>
</body>
</html>

提示：您可以先修改部分代码再运行

因为是一秒执行一行，所以，他会这一次判断，下一次才跳到0去，所以到了这个地方就有2秒才跳

jw630 · 发表于 2014-8-21 11:36:57

om_ul.style.top=0;后面没有执行滚动了
在后面也加上
Movement(om_ul,'top',parseInt(getStyle(om_ul,'top'))-liHeight);

atlantis2007 · 发表于 2014-8-21 14:48:27

你发的这个，不是隔一秒执行一次的？？？

zfloveme · 发表于 2014-8-22 09:25:14

这种效果为何不用jQuery来写呢，就三行代码就能搞定的事情；非要用JS基类代码写，自己看了也累~

faeng220 · 发表于 2014-8-22 09:46:59

你是要让它一进去,就跳一个?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>首页</title>
  <style type="text/css">
  body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;}
  body{font:12px "宋体","Arial Narrow",HELVETICA; -webkit-text-size-adjust:100%; line-height:25px;}
  a{color:#333;text-decoration:none}
  a:hover{text-decoration:underline;}
  ul,li{list-style:none; margin:0px; padding:0px;}
  img{border:0;vertical-align:middle;}

#slide{ width: 350px; margin:50px auto; border:1px solid red; padding:10px;}
  .top,.bottom{ width: 350px; line-height: 35px; font-size: 18px; text-align: center; font-weight: bold; color: #fff; background-color: red; cursor: pointer;}
  .slid_m{ width: 350px; overflow: hidden; height: 550px; overflow: hidden;}
  .slid_m ul{ position: relative; top: 0px;}
  .slid_m li{ background-color: #cfcfcf; height: 100px; line-height: 100px; color: red; font-size: 36px; text-align: center; color: #000; margin:5px 0px; overflow: hidden; float: left; width: 350px;}
  </style>
  <script type="text/javascript">
  function getClass(obj,iClass){
  var aRest = obj.getElementsByTagName('*');
  var aClass = [];
  var i=0; 
  for(i=0; i<aRest.length; i++){
    if(aRest[i].className==iClass){
      aClass.push(aRest[i]);
    }
  }
  return aClass;
}
function getStyle(obj,attr){
  if(obj.currentStyle){
    return obj.currentStyle[attr];
  }else{
    return getComputedStyle(obj,false)[attr];
  }
}
function Movement(obj,attr,itarget){
  clearInterval(obj.timer);
  obj.timer=setInterval(function(){
    var icur = 0;
    icur = parseInt(getStyle(obj,attr));
    var ispend = (itarget-icur)/8;
    ispend = ispend>0?Math.ceil(ispend):Math.floor(ispend);
    if(icur==itarget){
      clearInterval(obj.timer);
    }else{
      obj.style[attr]=icur+ispend+'px';
    }
  },30)
}

window.onload=function(){
  var oslide = document.getElementById('slide');
  var otop = getClass(oslide,'top')[0];
  var obottom = getClass(oslide,'bottom')[0];
  var oslide_m = getClass(oslide,'slid_m')[0];
  var om_ul = oslide_m.getElementsByTagName('ul')[0];
  var om_li = om_ul.getElementsByTagName('li');
  var liHeight = parseInt(getStyle(om_li[0],'height'))+10
  om_ul.innerHTML+=om_ul.innerHTML;
  om_ul.style.height=liHeight*om_li.length+'px';
  (function(){
    if(parseInt(getStyle(om_ul,'top'))==-parseInt(getStyle(om_ul,'height'))/2){
      // alert('message')

om_ul.style.top=0;
    }else{
      Movement(om_ul,'top',parseInt(getStyle(om_ul,'top'))-liHeight);
    }
    setTimeout(arguments.callee, 1000);//然后再延时1秒调用自己
  })();//让它先执行
   otop.onclick=function(){
      Movement(om_ul,'top',parseInt(getStyle(om_ul,'top'))-liHeight);
   }
}

</script>
</head>
<body>
  <div id="slide">
    <div class="top">上</div>
    <div class="slid_m">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    </div>
    <div class="bottom">下</div>
  </div>
</body>
</html>

提示：您可以先修改部分代码再运行

wu201314 · 发表于 2014-8-22 10:08:25

faeng220 发表于 2014-8-22 09:46
你是要让它一进去,就跳一个?[html]

不是的，你看一下，就是总共5个吗，然后，第一轮转完了了，就是从第一个，在到第一个的时候，会有两秒的停顿。

wu201314 · 发表于 2014-8-22 10:11:08

jw630 发表于 2014-8-21 11:36
om_ul.style.top=0;后面没有执行滚动了
在后面也加上
Movement(om_ul,'top',parseInt(getStyle(om_ul,'to ...

嗯嗯，对，就是这样，谢谢了

faeng220 · 发表于 2014-8-22 10:29:02

wu201314 发表于 2014-8-22 10:08
不是的，你看一下，就是总共5个吗，然后，第一轮转完了了，就是从第一个，在到第一个的时候，会有两秒的 ...

=,=

描述不清楚害死人呐, 你就说他转一圈之后, 会停2秒才继续转,不就行了...
你说" JS 的setInterval等一秒才执行，怎么弄？"是闹哪样呀...
我还以为你是想直接就让它跑起来呢.

删除掉 else

setInterval(function(){
if(parseInt(getStyle(om_ul,'top'))==-parseInt(getStyle(om_ul,'height'))/2){
om_ul.style.top=0;
}
Movement(om_ul,'top',parseInt(getStyle(om_ul,'top'))-liHeight);
}, 1000);//让它先执行

复制代码

wu201314 · 发表于 2014-8-22 10:54:41

faeng220 发表于 2014-8-22 10:29
=,=

描述不清楚害死人呐, 你就说他转一圈之后, 会停2秒才继续转,不就行了...

谢谢，大神

帐号		自动登录	找回密码
密码			注册

[讨论] JS 的setInterval等一秒才执行，怎么弄？