给博客添加弹窗欢迎信息

八月 18, 2023 / Mr.x / 10阅读 / 0评论/ 分类: 实用
给博客添加弹窗欢迎信息 — 荣小站
前端 JavaScript 交互

给博客添加弹窗欢迎信息

访客访问网站时自动弹出欢迎信息，显示来源渠道、操作系统、浏览器、时间段问候语。

这是一个有趣的交互功能——当访客访问你的网站时，会弹出一个友好的欢迎信息。根据访客的来源（百度、谷歌等）、操作系统、浏览器以及当前时间段，动态展示不同的问候语。

效果演示

点击下方按钮模拟访客进入效果：

👇 点击体验弹窗效果

第一步：引入依赖

⚠️ 非常重要：没有调用 layer.js 代码不会显示弹框，可能还会影响其它 JS 代码的运行。

引入 jQuery

<script src="https://www.cenguigui.cn/api/UserInfo/js/jquery.min.js"></script>

引入 layer 弹窗插件

<script src="https://www.cenguigui.cn/api/UserInfo/js/layer.js" type="text/javascript" charset="utf-8"></script>

第二步：放置核心代码

将以下代码放在网站底部 </body> 之前：

<script>
$(function(){
    // 获取来源页面
    var t = document.createElement("a");
    t.href = document.referrer;
    var msgTitle = t.hostname;
    var name = t.hostname.split(".")[1];
    
    // 根据搜索引擎来源设置显示名称
    if("" !== document.referrer){
        switch (name) {
            case 'bing': msgTitle = '必应搜索'; break;
            case 'baidu': msgTitle = '百度搜索'; break;
            case 'so': msgTitle = '360搜索'; break;
            case 'google': msgTitle = '谷歌搜索'; break;
            case 'sm': msgTitle = '神马搜索'; break;
            case 'sogou': msgTitle = '搜狗搜索'; break;
            default: msgTitle = t.hostname;
        }
    };
    
    // 根据时间显示不同的问候语
    var time = (new Date).getHours();
    var msg = '';
    if (23 < time || time <= 5) msg = "你是夜猫子呀？这么晚还不睡觉，明天起的来嘛？";
    else if (5 < time && time <= 7) msg = "早上好！一日之计在于晨，美好的一天就要开始了！";
    else if (7 < time && time <= 11) msg = "上午好！工作顺利嘛，不要久坐，多起来走动走动哦！";
    else if (11 < time && time <= 14) msg = "中午了，工作了一个上午，现在是午餐时间！";
    else if (14 < time && time <= 17) msg = "午后很容易犯困呢，今天的运动目标完成了吗？";
    else if (17 < time && time <= 19) msg = "傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~";
    else if (19 < time && time <= 21) msg = "晚上好，今天过得怎么样？";
    else if (21 < time && time <= 23) msg = "已经这么晚了呀，早点休息吧，晚安~";
    
    // 调用 API 获取访客信息并弹窗
    $.ajax({
        type:"get", 
        url:"https://api.cenguigui.cn/api/UserInfo/",  
        data:{type:'json'},
        async:true,   
        success:function(data){
            layer.msg("Hi~ 来自"+ data.data.location +'~<br/>Hi~ 从'+msgTitle+'来的朋友！<br/>使用 '+ data.data.os +"<br/"+ data.data.browser +' 访问本站！' + '<br/>' + msg);
        }
    }); 
});
</script>

代码功能拆解

1. 来源识别

var t = document.createElement("a");
t.href = document.referrer;
var name = t.hostname.split(".")[1];
// name = 'baidu' → 显示"百度搜索"

通过 document.referrer 获取访客从哪个页面跳转过来，然后解析域名判断搜索引擎。

2. 时间段问候

var time = (new Date).getHours();  // 获取当前小时 (0-23)
if (23 < time || time <= 5) msg = "夜猫子...";
else if (5 < time && time <= 7) msg = "早上好！";
// ... 以此类推
时间段问候语
23:00 - 05:00夜猫子呀？
05:00 - 07:00早上好！
07:00 - 11:00上午好！
11:00 - 14:00中午了！
14:00 - 17:00午后好！
17:00 - 19:00傍晚了！
19:00 - 21:00晚上好！
21:00 - 23:00晚安~

3. API 调用

$.ajax({
    url: "https://api.cenguigui.cn/api/UserInfo/",
    success: function(data){
        // data.data.location  →  地理位置
        // data.data.os        →  操作系统
        // data.data.browser   →  浏览器
    }
});

调用第三方 API 获取访客的地理位置、操作系统、浏览器等信息。

注意事项

  • ⚠️ jQuery 是必须的——代码依赖 jQuery 的 $ 和 $.ajax
  • ⚠️ layer.js 必须引入——否则弹窗无法显示
  • 💡 首次访问才弹窗——可以用 localStorage 记录，避免重复弹出打扰用户
  • 💡 可替换 API——如果有自己的 IP 信息接口，可以替换 url

#给博客添加弹窗欢迎信息(1)

评论