js实现title消息-标签闪烁

lilianggui

于 2019-11-04 11:14:02 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/lilianggui/article/details/102893185

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

为了提醒用户网站有新消息待查看，可以在title标签实现一个闪动效果，虽然这个效果不是很招用户喜爱，但是很实用啊。主要原理就是实现一个定时器来不停的改变title的值，达到闪动的效果，主要代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">

        <button onclick="showMsg()">显示消息</button>
        <button onclick="stopMsg()">结束消息</button>
    </div>
    <script>

        let message = {
            timeout: null,
            oldTitle: document.title,
            time: 0,
            showMessage(msg){
                message.timeout = setInterval(function(){
                    message.time ++;
                    let title = '';
                    if(message.time % 2 === 0){
                        title = '【】';
                    }else{
                        title = '【 ' + msg + ' 】';
                    }
                    document.title = title;
                },600);

            },
            stopMessage(){
                document.title = message.oldTitle;
                clearTimeout(message.timeout);
            }
        };

        function showMsg(){
            message.showMessage('新消息');
        }

        function stopMsg(){
            message.stopMessage('新消息');
        }

    </script>
</body>
</html>