首先我们放三个按钮,把功能实现再说:
<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清空。 |
收藏
淘帖
踩
