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

最近有朋友问我 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 + "的门户");
     //输出 欢迎来到：山东济南的门户 
}

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