我们在访问某些网站的时候,经常会在网站顶部看到动态问候语,比如早晨八点多显示 “早上好,今天又是美好的一天!”,这样做可以很好地提升网站用户体检,所以,今天为大家简单分享一下实现代码,分 JavaScript 版 和 PHP 版两种,选择其一即可。
JS 版
JS 版由于是在客户端浏览器执行,比较省心,推荐使用此方法,下文提供了两个版本,一个来自于网络,另一个是本站使用的。
1、版本一
这一个来自于网络,显示问候语及日期星期,例如:“中午好!2022年7月31日 星期日”,将下面的代码粘贴到页面中指定位置即可。
<div id="user-profile" class="greetings"> <script type="text/javascript"> var hello = ""; var hour = new Date().getHours(); // 获取问候语 if (hour < 6) { hello = "凌晨好!"; } else if (hour < 9) { hello = "早上好!"; } else if (hour < 12) { hello = "上午好!"; } else if (hour < 14) { hello = "中午好! "; } else if (hour < 17) { hello = "下午好! "; } else if (hour < 19) { hello = "傍晚好!"; } else if (hour < 22) { hello = "晚上好! "; } else { hello = "夜深了! "; } document.write(hello); // 获取日期及星期 var d, s = ""; var x = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"); d = new Date(); s += d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日 "; s += x[d.getDay()]; document.write(s); </script> </div>
效果如下:
2、版本二
分享一下本站使用的 JS 代码,不同时间段会显示不同的问候语,问候语内容大家可以自行修改,每小时对应一条。
<div id="user-profile" class="greetings"> <script type="text/javascript"> var x = new Array( "梦是心灵的思想,晚安", "月浅灯深,早些休息 ", "晚上星月争辉,美梦陪你入睡 ", "夜深了,熬夜很容易长痘痘的", "你是夜猫子吗,要注意身体哦", "夜有些深,心若累了就早点休息", "清晨好,这么早就来啦,早安", "新的一天开始了,祝你有一个好心情 ", "一天之际在于晨,又是美好的一天", "上午好,冲杯咖啡感受阳光的温暖吧", "今天你看上去好精神哦", "忙碌了一上午,该准备吃午饭啦", "吃完午饭了吗,休息一下吧", "茶余饭饱,看看窗外的风景", "阳光暖暖的,享受美好的时光吧", "下午茶时间到了,来杯咖啡吧", "下午好,累了吗?", "下午好,活动一下筋骨吧", "太阳落山了,一起去看夕阳吧", "晚上好,今天的心情怎么样?", "忙碌了一天,累了吧?", "清风伴明月,虫鸣伴君眠", "这么晚了,早点儿休息吧", "亲,这么晚了,还不休息吗?" ); var day = new Date(); var nge_hour = day.getHours(); var nge_warmprompt = x[nge_hour]; // 此处原本为 if...else...写的,为了节约篇幅改用了数组的形式 document.write('<span>'); document.write(nge_warmprompt); document.write("</span>"); //document.getElementById("greetings").innerHTML = nge_warmprompt; </script> </div>
效果如下:
PHP 版本
定义一个后台接口,然后在前端页面需要展示的地方调用接口显示问候语。
1、定义后台接口
在网站根目录下新建一个文件夹 greetings,在该文件夹下新建 api.php 文件,内容如下:
<?php $contents = array( "梦是心灵的思想,晚安", "月浅灯深,早些休息", "晚上星月争辉,美梦陪你入睡", "夜深了,熬夜很容易长痘痘的", "你是夜猫子吗,要注意身体哦", "夜有些深,心若累了就早点休息", "清晨好,这么早就来啦,早安", "新的一天开始了,祝你有一个好心情", "一天之际在于晨,又是美好的一天", "上午好,冲杯咖啡感受阳光的温暖吧", "今天你看上去好精神哦", "忙碌了一上午,该准备吃午饭啦", "吃完午饭了吗,休息一下吧", "茶余饭饱,看看窗外的风景", "阳光暖暖的,享受美好的时光吧", "下午茶时间到了,来杯咖啡吧", "下午好,累不吗?", "下午好,活动一下筋骨吧", "太阳落山了,一起去看夕阳吧 !", "晚上好,今天的心情怎么样?", "忙碌了一天,累了吧?", "清风伴明月,虫鸣伴君眠", "这么晚了,早点儿休息吧", "亲,这么晚了,还不休息吗?" ); if (isset($_GET['hour'])) { $hour = $_GET['hour']; } else { date_default_timezone_set('Asia/Shanghai'); $hour = date("H"); } $content = $contents[$hour]; // 此处原本为 if...else...写的,为了节约篇幅改用了数组的形式 //编码判断,用于输出相应的响应头部编码 if (isset($_GET['charset']) && !empty($_GET['charset'])) { $charset = $_GET['charset']; if (strcasecmp($charset, "gbk") == 0) { $content = mb_convert_encoding($content, 'gbk', 'utf-8'); } } else { $charset = 'utf-8'; } header("Content-Type: text/html; charset={$charset}"); //格式化判断,输出js或纯文本 if ($_GET['format'] === 'js') { echo "function greetings(){;document.write('" . $content . "');}"; //echo "document.getElementById('greetings').innerHTML = '". $content ."'"; } else { echo $content; }
此时,通过浏览器访问 https://www.pieruo.com/greetings/api.php?format=js&charset=utf-8&hour=12,会显示如下内容(域名改成自己的):
2、在页面中调用
在页面指定位置调用接口,其中向后台传递了 hour 参数,为客户端时间中的小时。
<div id="user-greetings" class="greetings"> <script type="text/javascript"> var nge_hour = new Date().getHours(); document.write('<script type="text/javascript" src="https://www.pieruo.com/greetings/api.php?format=js&charset=utf-8&hour=' + nge_hour + '"><\/script>'); // var url = "https://www.pieruo.com/api/greetings/api.php?format=js&charset=utf-8&hour=" + nge_hour; // var s = document.createElement("script"); // s.type = "text/javascript"; // s.src = url; // document.getElementsByTagName("div")[0].appendChild(s); </script> <span><script>greetings()</script></span> <!-- <span id="greetings"></span> --> <div class="clear"></div> </div>
效果如下:
结束语
本文简单分享了给网站或个人博客顶部添加动态问候语的实现方法,分 JS 版和 PHP 版两种,如果单纯为了展示效果,选择 JS 实现方式即可,PHP 版的实现方式可以作为参考。如果有任何意见或建议,欢迎在下方评论处留言。
本文已通过「原本」原创作品认证,转载请注明文章出处及链接。