對js操作html的實踐【1】——實現網頁假崩潰吸引網友注意力

標籤：改變   not   targe   script   總結   .net   cti   自己   logs   

前些天逛網站的時候，發現了一些好玩的細節：當網頁失去焦點後標題顯示網頁崩潰，這將使得瀏覽者重新點回網頁。

來自ANOTHERHOME（https://www.anotherhome.net/）與晨旭部落格（https://www.chenxublog.com/）的執行個體

||||||||

（圖為ANOTHERHOME）

博主按下了F12……ヽ(￣▽￣)?發現了這樣的代碼：

 1 // title變化 2         var OriginTitile = document.title; 3         var titleTime; 4         document.addEventListener(‘visibilitychange‘, function () { 5             if (document.hidden) { 6                 $(‘[rel="shortcut icon"]‘).attr(‘href‘, "//www.anotherhome.net/wp-content/themes/Amativeness/fail.ico"); 7                 document.title = ‘(●—●)喔喲，崩潰啦！‘; 8                 clearTimeout(titleTime); 9             } else {10                 $(‘[rel="shortcut icon"]‘).attr(‘href‘, "//www.anotherhome.net/wp-content/themes/Amativeness/favicon.ico");11                 document.title = ‘(/≧▽≦/)咦！又好了！‘ + OriginTitile;12                 titleTime = setTimeout(function () {13                     document.title = OriginTitile;14                 }, 2000);15             }16         });
//（來自ANOTHERHOME）

這樣的代碼：

 1 var OriginTitile=document.title; 2 var st; 3 document.addEventListener(‘visibilitychange‘,function(){if(document.hidden){document.title="╭(°A°`)╮頁面崩潰啦 "; 4 clearTimeout(st); 5 //console.log(‘hide‘); 6 }else{document.title="(?>ω<*?) 噫又好了~ "+OriginTitile; 7 //console.log(‘show‘); 8 st=setTimeout(function(){document.title=OriginTitile;},4000); 9 //console.log(‘endChange=‘);10 }11 });
//(來自晨旭的部落格)

於是啊，就想想想往自己的網站上也添一個這樣的功能：我將以晨旭大大的代碼為模板加以修改。

1.建立一個html文檔

2.寫入<script>標籤

這一步中，博主實驗的時候，發現一個問題：title標籤一定要在假崩潰代碼之前。

否則：||||||||

將不能實現

document.title="嘖嘖嘖騙你啦 "+OriginTitile;

的預期效果，並且timeout之後標題被改變哦。

細心的童鞋會注意到ANOTHERHOME的源碼多了

$(‘[rel="shortcut icon"]‘).attr(‘href‘, "//www.anotherhome.net/wp-content/themes/Amativeness/fail.ico");

這樣一行，這改變了網頁的favicon（網頁標題左邊的小表徵圖）

總結：js可以利用document.title記錄集改變網頁標題，

document.addEventListener(‘visibilitychange‘,function(){if(document.hidden)

將可以偵測網頁是否獲得焦點。

對js操作html的實踐【1】——實現網頁假崩潰吸引網友注意力