html 新消息title闪动实现

最新推荐文章于 2025-06-05 17:04:43 发布

随缘的一个人

最新推荐文章于 2025-06-05 17:04:43 发布

阅读量7.6k

点赞数

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

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现在HTML页面上新消息提示的Title闪动效果的方法。该方法通过定时器来切换浏览器标签页的标题，以吸引用户的注意力。在窗口最小化或失去焦点时，会触发Title的闪动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html 新消息title闪动实现

JS代码如下

<script type="text/javascript">
        setTimeout('flash_title()', 2000); //2秒之后调用一次
        function flash_title() {
            //当窗口效果为最小化，或者没焦点状态下才闪动
            if (isMinStatus() || !window.focus) {
                newMsgCount();
            } else {
                document.title = '测试DEMO';//窗口没有消息的时候默认的title内容
                window.clearInterval();
            }
        }
        //消息提示
        var flag = false;
        function newMsgCount() {
            if (flag) {
                flag = false;
                document.title = '【新消息】';
            } else {
                flag = true;
                document.title = '【　　　】';
            }
            window.setTimeout('flash_title(0)', 380);
        }
        //判断窗口是否最小化
        //在Opera中还不能显示
        var isMin = false;
        function isMinStatus() {
            //除了Internet Explorer浏览器，其他主流浏览器均支持Window outerHeight 和outerWidth 属性
            if (window.outerWidth != undefined && window.outerHeight != undefined) {
                isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
            } else {
                isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
            }
            //除了Internet Explorer浏览器，其他主流浏览器均支持Window screenY 和screenX 属性
            if (window.screenY != undefined && window.screenX != undefined) {
                isMin = window.screenY < -30000 && window.screenX < -30000;//FF Chrome       
            } else {
                isMin = window.screenTop < -30000 && window.screenLeft < -30000;//IE
            }
            return isMin;
        }
    </script>