网页标题动态变化

共454字,阅读约2分钟
图片[1]-网页标题动态变化-墨初博客

今天学到一个特别有趣的代码,就是通过 visibilitychange 页面可见性改变事件,来实现动态标题的效果

JS代码如下,添加到需要的地方即可

<script type="text/javascript">
    var Titile = document.title,    /*保存初始标题*/
        titleTime; 
    document.addEventListener("visibilitychange", titleChange);    /*添加监听事件*/

    // 当页面不可见与可见时
    function titleChange() {
        if (document.hidden) {
            document.title = ""•﹏•" + Titile";
            clearTimeout(titleTime)
        } else {
            document.title = "ヽ(✿゚▽゚)ノ欢迎回来";
            titleTime = setTimeout(backTitle, 1000)
        }
    }

    // 恢复初始标题
    function backTitle() {
        document.title = Titile
    }
</script>
© 版权声明
THE END
喜欢就支持一下吧
点赞3
分享
评论 抢沙发
墨初的头像-墨初博客

昵称

取消
昵称表情代码图片