我们在访问某些网站的时候,经常会在网站顶部看到动态问候语,比如早晨八点多显示 “早上好,今天又是美好的一天!”,这样做可以很好地提升网站用户体检,所以,今天为大家简单分享一下实现代码,分 JavaScript 版 和 PHP 版两种,选择其一即可。

给网站添加随时间变化的动态问候语/欢迎词-图片1

JS 版

JS 版由于是在客户端浏览器执行,比较省心,推荐使用此方法,下文提供了两个版本,一个来自于网络,另一个是本站使用的。

1、版本一

这一个来自于网络,显示问候语及日期星期,例如:“中午好!2022年7月31日 星期日”,将下面的代码粘贴到页面中指定位置即可。

  1. <div id="user-profile" class="greetings">
  2. <script type="text/javascript">
  3. var hello = "";
  4. var hour = new Date().getHours();
  5. // 获取问候语
  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. document.write(hello);
  24. // 获取日期及星期
  25. var d, s = "";
  26. var x = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
  27. d = new Date();
  28. s += d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日 ";
  29. s += x[d.getDay()];
  30. document.write(s);
  31. </script>
  32. </div>

效果如下:

给网站添加随时间变化的动态问候语/欢迎词-图片2

2、版本二

分享一下本站使用的 JS 代码,不同时间段会显示不同的问候语,问候语内容大家可以自行修改,每小时对应一条。

  1. <div id="user-profile" class="greetings">
  2. <script type="text/javascript">
  3. var x = new Array(
  4. "梦是心灵的思想,晚安",
  5. "月浅灯深,早些休息 ",
  6. "晚上星月争辉,美梦陪你入睡 ",
  7. "夜深了,熬夜很容易长痘痘的",
  8. "你是夜猫子吗,要注意身体哦",
  9. "夜有些深,心若累了就早点休息",
  10. "清晨好,这么早就来啦,早安",
  11. "新的一天开始了,祝你有一个好心情 ",
  12. "一天之际在于晨,又是美好的一天",
  13. "上午好,冲杯咖啡感受阳光的温暖吧",
  14. "今天你看上去好精神哦",
  15. "忙碌了一上午,该准备吃午饭啦",
  16. "吃完午饭了吗,休息一下吧",
  17. "茶余饭饱,看看窗外的风景",
  18. "阳光暖暖的,享受美好的时光吧",
  19. "下午茶时间到了,来杯咖啡吧",
  20. "下午好,累了吗?",
  21. "下午好,活动一下筋骨吧",
  22. "太阳落山了,一起去看夕阳吧",
  23. "晚上好,今天的心情怎么样?",
  24. "忙碌了一天,累了吧?",
  25. "清风伴明月,虫鸣伴君眠",
  26. "这么晚了,早点儿休息吧",
  27. "亲,这么晚了,还不休息吗?"
  28. );
  29. var day = new Date();
  30. var nge_hour = day.getHours();
  31. var nge_warmprompt = x[nge_hour]; // 此处原本为 if...else...写的,为了节约篇幅改用了数组的形式
  32. document.write('<span>');
  33. document.write(nge_warmprompt);
  34. document.write("</span>");
  35. //document.getElementById("greetings").innerHTML = nge_warmprompt;
  36. </script>
  37. </div>

效果如下:

给网站添加随时间变化的动态问候语/欢迎词-图片3

PHP 版本

定义一个后台接口,然后在前端页面需要展示的地方调用接口显示问候语。

1、定义后台接口

在网站根目录下新建一个文件夹 greetings,在该文件夹下新建 api.php 文件,内容如下:

  1. <?php
  2. $contents = array(
  3. "梦是心灵的思想,晚安",
  4. "月浅灯深,早些休息",
  5. "晚上星月争辉,美梦陪你入睡",
  6. "夜深了,熬夜很容易长痘痘的",
  7. "你是夜猫子吗,要注意身体哦",
  8. "夜有些深,心若累了就早点休息",
  9. "清晨好,这么早就来啦,早安",
  10. "新的一天开始了,祝你有一个好心情",
  11. "一天之际在于晨,又是美好的一天",
  12. "上午好,冲杯咖啡感受阳光的温暖吧",
  13. "今天你看上去好精神哦",
  14. "忙碌了一上午,该准备吃午饭啦",
  15. "吃完午饭了吗,休息一下吧",
  16. "茶余饭饱,看看窗外的风景",
  17. "阳光暖暖的,享受美好的时光吧",
  18. "下午茶时间到了,来杯咖啡吧",
  19. "下午好,累不吗?",
  20. "下午好,活动一下筋骨吧",
  21. "太阳落山了,一起去看夕阳吧 !",
  22. "晚上好,今天的心情怎么样?",
  23. "忙碌了一天,累了吧?",
  24. "清风伴明月,虫鸣伴君眠",
  25. "这么晚了,早点儿休息吧",
  26. "亲,这么晚了,还不休息吗?"
  27. );
  28. if (isset($_GET['hour'])) {
  29. $hour = $_GET['hour'];
  30. } else {
  31. date_default_timezone_set('Asia/Shanghai');
  32. $hour = date("H");
  33. }
  34.  
  35. $content = $contents[$hour]; // 此处原本为 if...else...写的,为了节约篇幅改用了数组的形式
  36. //编码判断,用于输出相应的响应头部编码
  37. if (isset($_GET['charset']) && !empty($_GET['charset'])) {
  38. $charset = $_GET['charset'];
  39. if (strcasecmp($charset, "gbk") == 0) {
  40. $content = mb_convert_encoding($content, 'gbk', 'utf-8');
  41. }
  42. } else {
  43. $charset = 'utf-8';
  44. }
  45. header("Content-Type: text/html; charset={$charset}");
  46. //格式化判断,输出js或纯文本
  47. if ($_GET['format'] === 'js') {
  48. echo "function greetings(){;document.write('" . $content . "');}";
  49. //echo "document.getElementById('greetings').innerHTML = '". $content ."'";
  50. } else {
  51. echo $content;
  52. }

此时,通过浏览器访问 https://www.pieruo.com/greetings/api.php?format=js&charset=utf-8&hour=12,会显示如下内容(域名改成自己的):

给网站添加随时间变化的动态问候语/欢迎词-图片4

2、在页面中调用

在页面指定位置调用接口,其中向后台传递了 hour 参数,为客户端时间中的小时。

  1. <div id="user-greetings" class="greetings">
  2. <script type="text/javascript">
  3. var nge_hour = new Date().getHours();
  4. document.write('<script type="text/javascript" src="https://www.pieruo.com/greetings/api.php?format=js&charset=utf-8&hour=' + nge_hour + '"><\/script>');
  5. // var url = "https://www.pieruo.com/api/greetings/api.php?format=js&charset=utf-8&hour=" + nge_hour;
  6. // var s = document.createElement("script");
  7. // s.type = "text/javascript";
  8. // s.src = url;
  9. // document.getElementsByTagName("div")[0].appendChild(s);
  10. </script>
  11. <span><script>greetings()</script></span>
  12. <!-- <span id="greetings"></span> -->
  13. <div class="clear"></div>
  14. </div>

效果如下:

给网站添加随时间变化的动态问候语/欢迎词-图片5

结束语

本文简单分享了给网站或个人博客顶部添加动态问候语的实现方法,分 JS 版和 PHP 版两种,如果单纯为了展示效果,选择 JS 实现方式即可,PHP 版的实现方式可以作为参考。如果有任何意见或建议,欢迎在下方评论处留言。

本文已通过「原本」原创作品认证,转载请注明文章出处及链接。

夏日阳光
  • 本文由 夏日阳光 发表于 2022年5月31日
  • 本文为夏日阳光原创文章,转载请务必保留本文链接:https://www.pieruo.com/214.html
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证
加载中...