menu MoeLoli
用js为网站加上会变化的Title
368 浏览 | 2020-03-28 | 阅读时间: 约 1 分钟 | 分类: 还没有分类qwq | 标签: javascript,美化
请注意,本文编写于 180 天前,最后修改于 179 天前,其中某些信息可能已经过时。
BGM

因为最近正在推CLANNAD,昨天刚推完了古河渚线。不得不说CLANNAD真的是一部很棒的galgame鸭,巨推。呢这篇文章的BGM就是团子大家族了。(/≧▽≦)/

正文

最近上课摸鱼的时候发现有些博客标签页上的文字竟然会变,好神奇的哎!感觉很好玩就去搜了一下可以用js搞。于是决定来水一篇文章。话不多说咱直接上代码。增加了延时个返回原标题。

/*在网上找的又自己改了一下*/
(function(){    
        var vendorPrefix=getBrowserPrefix();
        var eventName=visibilityEvent(vendorPrefix);
        document.addEventListener(eventName,visibilityEventCallback);        
        var oldTitle=document.title;
        function visibilityEventCallback(){
            if(document.hidden){
                oldTitle=document.title;
                document.title="| ω・´)哎呦~页面崩溃了~";                
            }else{
                document.title="(ノ≧▽≦)ノ お帰りなさい!";
                function sleep(ms) {
                  return new Promise(resolve => 
                      setTimeout(resolve, ms)
                  )
                }
                sleep(1500).then(()=>{
                  document.title=oldTitle;
                })  
            }                     
        }    
/*下面的代码来自网络,来解决浏览器兼容性问题?小白表示看不懂,但还是加上吧*/        
        // Get Browser-Specifc Prefix
        function getBrowserPrefix() {        
              // Check for the unprefixed property.  
              if ('hidden' in document) {
                return null;
            }        
            // All the possible prefixes.  
            var browserPrefixes = ['moz', 'ms', 'o', 'webkit'];            
            for (var i = 0; i < browserPrefixes.length; i++) {
                var prefix = browserPrefixes[i] + 'Hidden';
                if (prefix in document) {
                  return browserPrefixes[i];
                }  
            }       
             // The API is not supported in browser.  
             return null;
        }        
        // Get Browser Specific Hidden Property
        function hiddenProperty(prefix) {
            if (prefix) {
                return prefix + 'Hidden';
            } else {
                return 'hidden';
            }
        }        
        // Get Browser Specific Visibility State
        function visibilityState(prefix) {
          if (prefix) {
            return prefix + 'VisibilityState';
          } else {
            return 'visibilityState';
          }
        }        
        // Get Browser Specific Event
        function visibilityEvent(prefix) {
          if (prefix) {
            return prefix + 'visibilitychange';
          } else {
            return 'visibilitychange';
          }
        }            
    })();    

然后我再看大佬的博客文章偶然发现了更简化的形式。而且很好看。随手改了又改了一下。删了一点东西咱现在用的就是下面这个~

var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function() {
   if (document.hidden) {
      document.title = '| ω・´)哎呦~页面崩溃了~ ';
      clearTimeout(titleTime);
   }
else {
   document.title = '(ノ≧▽≦)ノ お帰りなさい! ';
      titleTime = setTimeout(function() {
      document.title = OriginTitile;
   }, 1500);
}});    

咕咕咕,为啥发这篇文章的时候,宝塔免费的防火墙还拦截了qwq

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

发表评论

email
web

全部评论 (共 4 条评论)

    2020-04-07 11:36
    wow,学习了/扶额
    这个很不错= =,之前有想过去捣鼓一个但是最后还是放弃了/捂脸
    看到这篇文章属实是……copy了/捂脸
      2020-04-07 11:46
      @辛落嗯嗯,一起学习
      我也是看的大佬的文章,有空钻研一下js(正在学了0%
    2020-04-06 12:43
    已经加上了
      2020-04-06 12:48
      @Jazee嘿嘿
Emoji

Warning: file_get_contents(): SSL: Connection reset by peer in /www/wwwroot/moeloli.top/usr/themes/Cuckoo/includes/owo.php on line 47

Warning: file_get_contents(): Failed to enable crypto in /www/wwwroot/moeloli.top/usr/themes/Cuckoo/includes/owo.php on line 47

Warning: file_get_contents(https://www.moeloli.top/usr/themes/Cuckoo/assets/json/owo.json): failed to open stream: operation failed in /www/wwwroot/moeloli.top/usr/themes/Cuckoo/includes/owo.php on line 47

Warning: array_keys() expects parameter 1 to be array, null given in /www/wwwroot/moeloli.top/usr/themes/Cuckoo/includes/owo.php on line 49