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

我们在访问某些网站的时候，经常会在网站顶部看到动态问候语，比如早晨八点多显示 “早上好，今天又是美好的一天！”，这样做可以很好地提升网站用户体检，所以，今天为大家简单分享一下实现代码，分 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 版的实现方式可以作为参考。如果有任何意见或建议，欢迎在下方评论处留言。