我们在访问某些网站的时候,经常会在网站顶部看到动态问候语,比如早晨八点多显示 “早上好,今天又是美好的一天!”,这样做可以很好地提升网站用户体检,所以,今天为大家简单分享一下实现代码,分 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 版的实现方式可以作为参考。如果有任何意见或建议,欢迎在下方评论处留言。
本文已通过「原本」原创作品认证,转载请注明文章出处及链接。