黑马程序员技术交流社区

标题: 怎样完善定时器走马灯? [打印本页]

作者: 何圣东 时间: 2012-3-21 22:10
标题: 怎样完善定时器走马灯?
如下图,并附html档案,请高手赐教!

03走马灯.zip (803 Bytes, 下载次数: 60)

作者: 莫洪刚 时间: 2012-3-22 09:52
首先我们放三个按钮,把功能实现再说:
<input type="button" id="LeftStartBtn" value="向左"  />
<input type="button" id="RightStartBtn" value="向右"  />
<input type="button" id="StopBtn" value="停止" />

      //页面加载完毕的时候执行
      window.onload = function () {
      //获得三个按钮
         var LeftStartBtn = document.getElementById("LeftStartBtn");
         var RightStartBtn = document.getElementById("RightStartBtn");
         var StopBtn = document.getElementById("StopBtn");
         var LeftStartid; //左边IntervalID
         var RightStartid; //右边IntervalID
         //开始向左移动
         LeftStartBtn.onclick = function () {
            //同时清空左右的Interval,必须的(详细下面看)
            clearInterval(LeftStartid);
            clearInterval(RightStartid);
            LeftStartid = setInterval(function () {
                  var title = document.title;
                  var firstStr = title.substr(0, 1); //获得一个字符
                  var EndStr = title.substr(1, title.length - 1);//获得剩下的字符
                  var newstr = EndStr + firstStr;
                  document.title = newstr;
            }, 1000)
         }
         //开始向右移动
         RightStartBtn.onclick = function () {
            //同时清空左右的Interval,必须的(详细下面看)
            clearInterval(LeftStartid);
            clearInterval(RightStartid);
            RightStartid = setInterval(function () {
                  var title = document.title;
                  var endStr = title.charAt(title.length - 1); //获得最右边的最后一个字符
                  var firstStr = title.substring(0, title.length - 1);//获得以上之前的字符串
                  var newstr = endStr + firstStr;//最右边加到最前面就是了
                  document.title = newstr;
            }, 1000)

         }
         //停止所有的定时器
         StopBtn.onclick = function () {
            clearInterval(LeftStartid);
            clearInterval(RightStartid);
         }

      }

setInterval是一个很好完个东东,有了它我们可以现实很多动态效果,比如图片的淡入淡出,图片移动,文字滚动等效果。他可以多次执行。意思是,你点击很多次,那么它就执行很多次,你肯定见过的情况是我本来设置的是2秒,为什么跑的那么快？继续点,跑的更加的快,是不是很奇怪？

你说,如果对向左或则向右连续点两次的话,再点停止就停不下来了。我们来分析一下：

你点击向左按钮一次,它先清除了rightTimeid,再执行向左的操作。人家正在高兴的向左,你突然点击向右按钮一次,于是它这时又清除了leftTimeId,再执行向右的操作。以上操作了一次,看是没什么效果和错误,点击停止也停下来了,但是你重复这样做,人家就不高兴了,你到底要清除哪一个rightTimeid和leftTimeId？是上一个,还是上上个？而你点击停止按钮,清除只是最后一个
leftTimeId或则rightTimeid的其中一个。为什么是其中一个？因为在点击停止之前,你向左向右,已经清除了一个。而你清除的是他们中的最后一个,上上个上上上个还没清除呢,人家当然继续跑咯,所以你需要在点击向左,或则向右的同时,同时清空左右的Interval。最后才会把所有的Interval清空。

作者: 何圣东 时间: 2012-3-22 22:57

莫洪刚发表于 2012-3-22 09:52
首先我们放三个按钮,把功能实现再说:

哦了,谢谢你!其实就是把我的代码这样改下,如下图:

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2