当前位置:首页 > 技术博客 > JavaScript > 【硬核原创】网站标题根据用户变化而变化

【硬核原创】网站标题根据用户变化而变化

4年前 (2021-06-25)JavaScript1058


最近有朋友问我 www.timicm.com 这个网站的标题效果什么实现的,本着无私奉献的精神和你们分享一下


title是不断变化的,怎么变化呢?


当你访问这个网站的时候他会先获取你的本地IP并且通过第三方库查询IP的归属地,然后在将获取到的归属地传给HTML。

其实就这么简单,实际操作也不难,废话不多说,开凎。


开始之前先给大家推荐一个免费的IP查询接口

http://ip.ws.126.net/ipquery 

这个接口是免费的、支持https协议,而且是通过js的形式返回数组格式


有了接口然后是敲逻辑

因为上面的接口都是会默认获取用户当前的ip,所以不需要单独做处理了

我写代码更倾向于简介高效,所以我选择了jQuery

//1、引入jq官方包,如果你项目里有jq就忽略这一步
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
//2、直接通过script标签引入上面那个接口,我拿第二个举例说明
<script src="https://ip.ws.126.net/ipquery"></script>

//返回的数据为:var lo="山东省", lc="济南市"; var localAddress={city:"济南市", province:"山东省"}

得到了数据直接给title赋值不就好了吗

$(document).attr('title',"欢迎来到:" + lo + lc + "的门户");

//输出  欢迎来到:山东省济南市的门户

就这么简单,你以为呢?

进阶篇

通过上面就可以实现标题随用户位置变化而变化了,但是接口并非完美无瑕,有时候或获取不到用户所在的市,只能获取省份, 

那么我们就要先判断一下有没有获取到,没获取到就返回省份

if(lc==""){
    $(document).attr('title',"欢迎来到:" + lo + "的门户");
    //输出   欢迎来到:山东省的门户 
}else{
    $(document).attr('title',"欢迎来到:" + lo + lc + "的门户");
    //输出   欢迎来到:山东省济南市的门户 
}


//如果你想把位置里的省和市这两个字去掉也不是不可以,通过严谨的分析研究发现,他们有一个共同点就是在位置的最后一位
//我们获取到的数据把最后一位截掉不就好了吗?

let newLo = lc.substr(0, lo.length - 1);
let newLc = lc.substr(0, lc.length - 1);

if(newLc==""){
    $(document).attr('title',"欢迎来到:" + newLo + "的门户");
    //输出  欢迎来到:山东的门户 
}else{
    $(document).attr('title',"欢迎来到:" + newLo + newLc + "的门户");
     //输出 欢迎来到:山东济南的门户 
}


以此类推,改网站的描述、关键词、等一些文字就会了吧?

版权声明:本文由 LzxBlog 发布,如需转载请注明出处。

本文链接:https://www.liuzhixi.cn/html/89.html

标签: JavaScript

相关文章

通俗的理解js中的&&和||

通俗的理解js中的&&和||

js中的&&和||本质是什么呢?进行布尔值的且和或的运算。当运算到某一个变量就得出最终结果之后,就返回哪个变量。在javascript中:以下内...

JavaScript 中定义数组和操作数组

JavaScript 中定义数组和操作数组

一.认识数组数组就是某类数据的集合,数据类型可以是整型、字符串、甚至是对象Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),...

圆形光影mp3音频播放器特效

圆形光影mp3音频播放器特效

原生js css3绘制圆形光影音乐播放器,支持上一首或下一首切换,播放暂停,音量控制,音乐播放进度条控制,音乐列表播放,输入添加音乐播放地址等功能。这是一款很全...

Bilibili头部景深对焦效果

Bilibili头部景深对焦效果

交互式鼠标悬停头图景深对焦效果<head>       <meta n...

javascript 滚动插入元素动画特效

javascript 滚动插入元素动画特效

监听窗体滚动条,新的元素会以 左移、右移、淡出、淡入 等各种方式插入到文档流中<head>     <...

关于bootstrap.min.js.map报错404的问题

关于bootstrap.min.js.map报错404的问题

相信很多用过BootStrap框架的伙伴都遇到过bootstrap.min.js.map 404的错误,明明自己并没有去调用这个文件为什么会报这个错误呢?小沫就...

评论列表

南通伍林堂文化传播有限公司

感谢分享,已经用上

历史大全
4年前 (2021-06-25)

这种对SEO不是很友好

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。