JS实现标题闪烁

最新推荐文章于 2021-06-18 11:29:20 发布

dannywj1371

最新推荐文章于 2021-06-18 11:29:20 发布

阅读量3k

点赞数

分类专栏： JavaScript 文章标签： function timer 浏览器 null

JavaScript 专栏收录该内容

84 篇文章 0 订阅

订阅专栏

<html>
<head>
    <title>JS效果-浏览器标题栏闪烁</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript">
        // 使用message对象封装消息
        var message = {
            time: 0,
            title: document.title,
            timer: null,
            // 显示新消息提示
            show: function () {
                var title = message.title.replace("【　　　】", "").replace("【新消息】", "");
                // 定时器，设置消息切换频率闪烁效果就此产生
                message.timer = setTimeout(function () {
                    message.time++;
                    message.show();
                    if (message.time % 2 == 0) {
                        document.title = "【新消息】" + title
                    }

                    else {
                        document.title = "【　　　】" + title
                    };
                }, 600);
                return [message.timer, message.title];
            },
            // 取消新消息提示
            clear: function () {
                clearTimeout(message.timer);
                document.title = message.title;
            }
        };
        message.show();
        // 页面加载时绑定点击事件，单击取消闪烁提示
        function bind() {
            document.onclick = function () {
                message.clear();
            };
        }
    </script>
</head>
<body οnlοad="bind();">
    点击页面取消消息闪烁提示
</body>
</html>

dannywj1371

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现标题闪烁

JS效果-浏览器标题栏闪烁 // 使用message对象封装消息 var message = { time: 0, title: document.title, timer: null, // 显示新消息提示 show: fun
复制链接

扫一扫

专栏目录