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

教程分享评论3751字数 3562阅读模式

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

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

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

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>

效果如下:

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

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,会显示如下内容(域名改成自己的):

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

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>

效果如下:

给网站添加随时间变化的动态问候语/欢迎词-图片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:
确定

拖动滑块以完成验证