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

最新推荐文章于 2021-06-09 16:27:01 发布

原创最新推荐文章于 2021-06-09 16:27:01 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#标题滚动 #setInterval #js显示标题滚动 #javascript #Dom

jquery 同时被 3 个专栏收录

13 篇文章

订阅专栏

标题滚动

1 篇文章

订阅专栏

走马灯效果

1 篇文章

订阅专栏

本文介绍了一个简单的网页标题滚动效果的实现方法，通过JavaScript操作DOM来不断改变页面标题，形成走马灯的效果。文章还强调了定时器使用时的常见误区。

在网页中看到网页的标题滚动效果，以下是是用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。