用js实现网页标题的字体滚动效果

来源：互联网发布：快递员取件抢单软件编辑：程序博客网时间：2024/05/17 21:39

在网页中看到网页的标题滚动效果，以下是是用dom实现的简单的标题滚动（走马灯）效果

<head>    <title>郑州欢迎你</title>    <script type="text/javascript">       var timerId;        function scroll() {            var title = document.title;            var lastCh = title.charAt(title.length - 1); //容易错            var leftStr = title.substring(0, title.length - 1);                        document.title = lastCh + leftStr;        }        //每调用一次setInterval都会产生一个新的定时器，并且旧的不会自动停止。所以看起来好像“越跑越快”！            </script></head><body ><input type="button" value="滚动" onclick="if(timerId){clearInterval(timerId);}timerId=setInterval('scroll()', 500)" /><input type="button" value="停止（错误写法）" onclick="clearInterval(setInterval('scroll()', 500))" /><input type="button" value="停止" onclick="clearInterval(timerId)" /></body>

特别提醒一下

每调用一次setInterval都会产生一个新的定时器，并且旧的不会自动停止。所以看起来好像“越跑越快”！

clearInterval(setInterval('scroll()', 500))，错，不会停止原先的定时器，因为setInterval就产生一个新的定时器，刚产生就被clear。

0 0