知更鸟begin主题顶部添加问候语和显示时间

自然 2019年6月19日14:53:13 2 94

学习的路是永远不对走到尽头的,我们永远在路上。对于建站的摸索自然也在不断探寻,不断改进。今天给大家分享一下自然现在在用的顶部问候语和显示时间效果。

知更鸟begin主题顶部添加问候语和显示时间

顶部添加问候语和显示时间

修改的方式非常简单,只需要打开主题路径 inc/user/user-profile.php文件将下面的代码插入指定位置(如图)即可,这篇文章时根据最新版本(2019年61更新)的知更鸟begin主题写的,和老版本可能会有一定的差别。

知更鸟begin主题顶部添加问候语和显示时间

大概是在user-profile.php文件的第106行代码下面,途中的红框空了一行是自然加上去的,实际并不存在。

我们显示问候语和时间是使用javascript实现的效果,代码如下。

  1. <script type="text/javascript">today = new Date();
  2.     var day;
  3.     var date;
  4.     var hello;
  5.     hour = new Date().getHours();
  6.     if (hour < 6) {
  7.         hello = ' 凌晨好! ';
  8.     } else if (hour < 9) {
  9.         hello = ' 早上好!';
  10.     } else if (hour < 12) {
  11.         hello = ' 上午好!';
  12.     } else if (hour < 14) {
  13.         hello = ' 中午好! ';
  14.     } else if (hour < 17) {
  15.         hello = ' 下午好! ';
  16.     } else if (hour < 19) {
  17.         hello = ' 傍晚好!';
  18.     } else if (hour < 22) {
  19.         hello = ' 晚上好! ';
  20.     } else {
  21.         hello = '夜深了! ';
  22.     }
  23.     function GetCookie(sName) {
  24.         var arr = document.cookie.match(new RegExp("(^| )" + sName + "=([^;]*)(;|$)"));
  25.         if (arr != null) {
  26.             return unescape(arr[2])
  27.         };
  28.         return null;
  29.     }
  30.     var Guest_Name = decodeURIComponent(GetCookie('author'));
  31.     var webUrlwebUrl = webUrl;
  32.     if (Guest_Name != "null") {
  33.         hello = Guest_Name + ' , ' + hello + ' 欢迎回来。';
  34.     }
  35.     document.write(' ' + hello);</script>
  36. <span id="localtime">现在是:
  37. <script type="text/javascript">var d, s = "";
  38.     var x = new Array("星期日""星期一""星期二""星期三""星期四""星期五""星期六");
  39.     d = new Date();
  40.     s += d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日 ";
  41.     s += x[d.getDay()];
  42. document.writeln(s);</script></span>

小结

在我们网站的顶部添加添加一个温馨的问候语并展示当前时间是相当有必要的,原先的问候语-登陆-注册的样式显得比较生硬,一直的都是一个效果,不利于用户体验。美化的顶部让然看起来更加舒服,不仅可以提醒方可注意当前时间,还可以提升用户友好度。

weinxin
网科文媒
快来关注一下,你想要的这里都有喔!
自然

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  1   博主  1

    • avatar 心灵博客 3

      加上天气信息吧,有接口

        • avatar 自然 7

          @心灵博客 再加上天气预报,怎么有点像是门户论坛的感觉