代码部分节选自js动态修改页面标题& 為wordpress頁面title添加一個動態標題,讓它動起來

首先来看一看效果

1.编辑header.php

打开/wp-content/themes/Sakura-master主题根目录编辑header.php

<head>后添加如下:
<script>// <!-- 标题动态切换代码 Start -->
window.onload = function () {
  let hour = new Date().getHours()
  let str = ''
  if (hour < 6) {
    str = '凌晨'
  } else if (hour < 9) {
    str = '早上'
  } else if (hour < 12) {
    str = '上午'
  } else if (hour < 14) {
    str = '中午'
  } else if (hour < 17) {
    str = '下午'
  } else if (hour < 19) {
    str = '傍晚'
  } else if (hour < 22) {
    str = '晚上'
  } else {
    str = '夜里'
  }
 
  function c () {
    document.title = document[a] ? '? Hi,小伙伴,' + str + '好! [' + d + ']' : d
  }
 
  let a = document.title
  let b = document.title
  let d = document.title
  typeof document.hidden !== 'undefined' ? (a = 'hidden', b = 'visibilitychange')
    : typeof document.mozHidden !== 'undefined' ? (a = 'mozHidden', b = 'mozvisibilitychange')
    : typeof document.webkitHidden !== 'undefined' && (a = 'webkitHidden', b = 'webkitvisibilitychange')
  typeof document.addEventListener === 'undefined' && typeof document[a] === 'undefined' || document.addEventListener(b, c, !1)
}
</script>

保存,刷新网页就可以看到效果了

2.自定义文字

如图讲解自定义
其他类型
效果
<script>var OriginTitile=document.title;
var jiao;
document.addEventListener('visibilitychange',function(){
if(location.href != "https://blog.ukenn.top/")(document.hidden){
document.title="(つェ⊂)誒呀,網站崩潰了";
clearTimeout(jiao);
console.log('hide');
}else{
document.title='(*´∇`*) 咦,又好了~ '+OriginTitile;
console.log('show');
jiao=setTimeout(function(){
document.title=OriginTitile;
},4000);
console.log('endChange=');
}
});
</script>
注意*这是一则由 Google AdSense 自动推荐的广告,不代表本站立场

寒蝉黎明之时,便是重生之日。