HTML+JS+CSS实现随机跳转到一个网址
个人主页：sccens.net
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>即将奔赴</title>
<link rel="shortcut icon" href="https://www.baige.icu/2021/11/18/831059a162611.jpeg">
<style type="text/css">
* {
color: #111827;
}
a {
text-decoration: none;
}
.blink {
position: fixed;
height: 100%;
width: 100%;
text-align: center;
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
animation: blink 3s linear infinite;
-webkit-animation: blink 3s linear infinite;
-moz-animation: blink 3s linear infinite;
-ms-animation: blink 3s linear infinite;
-o-animation: blink 3s linear infinite;
}
.all_bg{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 780px;
z-index:-10;
zoom: 1;
background-color: #fff;
background: url(https://www.baige.icu/2021/11/24/ea10908f9dba0.jpg);
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
@keyframes blink {
0% {
opacity: 0;
transform: scale(1);
}
20% {
opacity: 0;
transform: scale(1);
}
40% {
opacity: 0.3;
transform: scale(1);
}
80% {
opacity: 1;
transform: scale(0.98);
}
90% {
opacity: 1;
transform: scale(0.98);
}
100% {
opacity: 0.2;
transform: scale(1.2);
}
}
@-webkit-keyframes blink {
0% {
opacity: 0;
transform: scale(1);
}
20% {
opacity: 0;
transform: scale(1);
}
40% {
opacity: 0.3;
transform: scale(1);
}
80% {
opacity: 1;
transform: scale(0.98);
}
90% {
opacity: 1;
transform: scale(0.98);
}
100% {
opacity: 0.2;
transform: scale(1.2);
}
}
@-moz-keyframes blink {
0% {
opacity: 0;
transform: scale(1);
}
20% {
opacity: 0;
transform: scale(1);
}
40% {
opacity: 0.3;
transform: scale(1);
}
80% {
opacity: 1;
transform: scale(0.98);
}
90% {
opacity: 1;
transform: scale(0.98);
}
100% {
opacity: 0.2;
transform: scale(1.2);
}
}
@-ms-keyframes blink {
0% {
opacity: 0;
transform: scale(1);
}
20% {
opacity: 0;
transform: scale(1);
}
40% {
opacity: 0.3;
transform: scale(1);
}
80% {
opacity: 1;
transform: scale(0.98);
}
90% {
opacity: 1;
transform: scale(0.98);
}
100% {
opacity: 0.2;
transform: scale(1.2);
}
}
@-o-keyframes blink {
0% {
opacity: 0;
transform: scale(1);
}
20% {
opacity: 0;
transform: scale(1);
}
40% {
opacity: 0.3;
transform: scale(1);
}
80% {
opacity: 1;
transform: scale(0.98);
}
90% {
opacity: 1;
transform: scale(0.98);
}
100% {
opacity: 0.2;
transform: scale(1.2);
}
}
.botCenter {
position: fixed;
width: 100%;
height: 50px;
bottom: 2px;
line-height: 20px;
font-size: 12px;
text-align: center;
animation: botCenter 3s linear;
-webkit-animation: botCenter 3s linear;
-moz-animation: botCenter 3s linear;
-ms-animation: botCenter 3s linear;
-o-animation: botCenter 3s linear;
}
@keyframes botCenter {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
40% {
opacity: 0.3;
}
80% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes botCenter {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
40% {
opacity: 0.3;
}
80% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-moz-keyframes botCenter {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
40% {
opacity: 0.3;
}
80% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-ms-keyframes botCenter {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
40% {
opacity: 0.3;
}
80% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-o-keyframes botCenter {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
40% {
opacity: 0.3;
}
80% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="blink">
<a href="https://sccens.net/" target="_blank"
title="点击加入“奔赴”，分享网站流量 :-)">欢迎回来，即将奔赴<br />Welcome back, coming soon...</a>
</div>
<script>
function jumpUrl(){
var arr = new Array(
"https://www.sccens.net",
"https://sccens.net",
"https://www.xxhzm.cn",
"https://blog.xinmouren.cn/",
"https://www.adomais.com",
);
window.location.href = arr[Math.floor(Math.random() * arr.length)];
}
setTimeout(function () {
jumpUrl();},5000);//设定跳转时间，1s=1000
</script>
<div class="all_bg"></div>
</body>
</html>我的想法是建一个文本，文本里面存入需要奔赴的链接，然后利用JS直接访问文本（灵感来源于随机图片api），但是自己学艺不精没办法实现。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021 年 11 月，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
