滚动标题案例

最新推荐文章于 2021-04-13 11:08:02 发布

小白小白从不日白

最新推荐文章于 2021-04-13 11:08:02 发布

阅读量210

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_43285360/article/details/115571840

版权

javascript 专栏收录该内容

105 篇文章

订阅专栏

在开始这个案例之前我们首先要了解的是setInterval() 方法的基本用法：
setInterval()

按照指定的周期（以毫秒计）来调用函数或计算表达式，直到 clearInterval() 被调用或窗口被关闭
返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行

那么可能现在又需要提前了解一下 clearInterval() 方法的基本用法：
clearInterval()

取消由 setInterval() 函数设定的定时执行操作
参数必须是由 setInterval() 返回的 ID 值
要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量

现在我们来练习一下setInterval()和clearInterval()方法：

 	<div id="myProgress">
        <div id="myBar"></div>
    </div>
    <br>
    <button onclick="move()">点我</button>

<style>
        #myProgress {
            width: 100%;
            height: 30px;
            position: relative;
            background-color: #ddd;
        }
        
        #myBar {
            background-color: #f40;
            width: 10%;
            height: 30px;
            position: absolute;
        }
</style>

<script>
    function move() {
        var ele = document.getElementById('myBar');

        var width = 0;

        var id = setInterval(function() {
            if (width == 100) {
                clearInterval(id);
            } else {
                width++;
                ele.style.width = width + '%';
            }
        }, 10);
    }
</script>

请添加图片描述

好，言归正传，在熟悉了以上两个方法后，接下来我们进入滚动标题这个真正的案例吧！

<head lang="en">
    <meta charset="UTF-8">
    <title>document节点练习</title>
</head>

<script>
        //setInterval(function,millseconds);
        //描述：按照指定的周期(毫秒)来调用函数或计算表达式
        setInterval(function() {

            //得到元素
            var docTitle = document.title;

            //把标题字符串切割为数组
            var titleArr = docTitle.split('');

            //把数组的第一元素删除，然后添加到最后
            titleArr.push(titleArr.shift());

            //把数组合并为字符串
            var newTitle = titleArr.join('');

            document.title = newTitle;
        }, 500);
</script>