当别人从其他网站访问自己的网站时,如果在自己网站右下角有提示“欢迎来自XXX的朋友访问本站”,是不是逼格满满?!
CSS
css需要了解定位(fixed,absolute) ,其余的话就是一些很基础的CSS样式知识了。
JavaScript
1、需要用到location
对象中的pathname
以及document
的referer
属性。即:location.pathname
和 document.referer
。
2、以及一定 的正则知识:用来匹配来源域名。
3、还用到了jquery 操作dom方便点,需要的可自行换成原生js。
CSS
<style type="text/css">
.from-notice {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
/*width: 250px;*/
height: 30px;
background: #00cec9;
padding: 10px;
border-radius: 5px;
color: #fff;
line-height: 34px;
z-index: 99999;
}
.from-notice .site {
font-weight: bold;
color: #000;
}
.from-notice .times {
position: absolute;
right: 9px;
top: -6px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
.from-notice .times:hover {
color: #e74c3c;
}
</style>
.from-notice 是整个父容器。采用fixed定位。 .times 是右上的x,定位到右上。
JavaScript
<script type="text/javascript">
let from_site = {
'baidu.com':'百度搜索',
'google.com':'谷歌搜索',
'google.com.hk':'谷歌搜索',
'misiyu.cn':'迷思雨博客',
'hu60.net':'虎绿林',
'127.0.0.1:5500':'本地'
};
let from = document.referrer;
let from_domain = get_domain(from);
let timer = null;
if (from_domain && location.host.indexOf(from_domain) === -1) {
let times = $("<span class=\"times\">×</span>").click(function () {
$(this).parent('.from-notice').slideUp(500);
clearTimeout(timer);
});
let notice_site = from_site.hasOwnProperty(from_domain) ? from_site[from_domain] : from_domain;
let msg = `欢迎来自 <span class="site">${notice_site}</span> 的朋友访问本博客。`;
let showDom = $("<div></div>").addClass("from-notice").html(msg);
times.appendTo(showDom);
showDom.appendTo($("body")).show(600);
timer = setTimeout(function () {
$('.from-notice').slideUp(500);
}, 3000);
}
function get_domain(url) {
let result = url.match(/https?:\/\/(?:[w]){0,3}\.?(.*?)\//);
// console.log(result)
// console.log()
if (result && result.length >= 2) {
return result[1];
} else {
return null;
}
}
</script>
get_domain方法里面通过正则获取来源域名。
默认会显示网站域名(在from_site对象里面定义的,该对象key和value都是字符串类型。)
如下:
let from_site = {
'baidu.com':'百度搜索',
'google.com':'谷歌搜索',
'google.com.hk':'谷歌搜索',
'misiyu.cn':'迷思雨博客',
'hu60.net':'虎绿林',
'127.0.0.1:5500':'本地'
};
1、代码采用了let 申明变量,不兼容低版本浏览器,想要兼容换成var
2、本地演示想要查看效果的话需要将一判断条件删除:
因为这是判断是否是同网站的。
3、需要用户服务器打开test.html
然后跳转到notice.html
,方能看到效果。
也即不能一文件系统打开文件。如下:
要以服务器形式打开,因为才能获取到referer
服务器推荐使用
vscode
的Live Server 参考:https://www.misiyu.cn/article/6.html#HTML%E7%83%AD%E5%88%B7%E6%96%B0