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

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

admin1年前 (2021-06-25)JavaScript501


最近有朋友问我 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

相关文章

百度地图JavaScript简单标点连线

百度地图JavaScript简单标点连线

背景最近在研究轨迹数据的挖掘,第一步就是把轨迹数据在地图上可视化出来,然后再进行后续的算法研究。从一开始懵懂知道百度地图有免费的 API 可以调用,到后面知道还...

Bilibili头部景深对焦效果

Bilibili头部景深对焦效果

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

前端用法:JavaScript 获取当前GPS地理位置的方法,保姆级代码!

前端用法:JavaScript 获取当前GPS地理位置的方法,保姆级代码!

在网上搜到很多,99%不能用,自己动手将整理记录一下吧,以便后续再使用!<head>     <ti...

整理:JavaScript字符串的截取以及数组的截取

整理:JavaScript字符串的截取以及数组的截取

在编写前端时,截取字符串或者是截取数组的部分元素都是频繁出现的场景,所以在这整理一下:一、截取字符串JS提供三个截取字符串的方法,分别是:slice(),sub...

大气磅礴的滑块网页背景

大气磅礴的滑块网页背景

<html>     <head>     <...

JavaScript时间日期的基操

JavaScript时间日期的基操

javascript 时间的基本操作,记录一下方便日后Ctrl C / Ctrl V获取当前月份的总天数:由于JavaScript中day的范围为1~31中的值...

评论列表

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

感谢分享,已经用上

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

这种对SEO不是很友好

发表评论

访客

看不清,换一张

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