标题
时空穿越跳转单页，喜欢的拿走
逍遥 - 12月30日 09:29
79℃ 0
内容
今天闲来无事写了一个这样的跳转单页
不知道你们喜欢吗？/
代码赠送
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时空穿越警告</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif;
}
body {
background-color: #0a0e17;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #fff;
}
/* 核心容器 */
.warning-card {
width: 500px;
background-color: #141a29;
border: 1px solid #2a3347;
border-radius: 8px;
padding: 30px;
box-shadow: 0 0 20px rgba(255, 0, 0, 0.15);
position: relative;
overflow: hidden;
}
/* 顶部红线装饰 */
.warning-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #ff3333, transparent);
}
/* 警告图标 */
.warning-icon {
text-align: center;
font-size: 30px;
color: #ff3333;
margin-bottom: 10px;
}
/* 标题样式 */
.title {
text-align: center;
font-size: 24px;
color: #ff3333;
margin-bottom: 8px;
}
.sub-title {
text-align: center;
font-size: 14px;
color: #99a3b8;
margin-bottom: 25px;
}
/* 目标地址栏 */
.target-url {
background-color: #0f141f;
border-left: 3px solid #ff3333;
padding: 12px 15px;
font-size: 14px;
margin-bottom: 15px;
color: #e0e6f0;
}
/* 警告提示条 */
.warning-bar {
background-color: #8b1a1a;
color: #fff;
padding: 8px 15px;
border-radius: 4px;
font-size: 13px;
margin-bottom: 30px;
text-align: center;
}
/* 倒计时区域 */
.countdown {
text-align: center;
margin-bottom: 15px;
}
.countdown-num {
font-size: 48px;
color: #ff3333;
margin-bottom: 5px;
}
.countdown-text {
font-size: 14px;
color: #99a3b8;
}
/* 进度条 */
.progress-bar {
width: 100%;
height: 4px;
background-color: #2a3347;
border-radius: 2px;
margin-bottom: 25px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #ff3333, #3388ff);
width: 100%;
animation: progress 3s linear forwards;
}
@keyframes progress {
from { width: 100%; }
to { width: 0%; }
}
/* 按钮区域 */
.btn-group {
display: flex;
gap: 15px;
}
.btn {
flex: 1;
padding: 12px 0;
border-radius: 4px;
border: none;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
}
.btn-cancel {
background-color: #8b1a1a;
color: #fff;
}
.btn-cancel:hover {
background-color: #a82222;
}
.btn-go {
background-color: #1a508b;
color: #fff;
}
.btn-go:hover {
background-color: #2266aa;
}
/* 响应式适配 */
@media (max-width: 550px) {
.warning-card {
width: 90%;
padding: 20px;
}
}
</style>
</head>
<body>
<div>
<div>⚠</div>
<h1>时空穿越警告</h1>
<p>你正在前往一个可能存在危险的时空坐标</p>
<div>
目标地址:<br>
http://www.81dir.com
</div>
<div>警告：检测到高风险！建议武装穿越</div>
<div>
<div id="countdownNum">3</div>
<div>秒后自动穿越</div>
</div>
<div>
<div id="progressFill"></div>
</div>
<div>
<button class="btn btn-cancel" id="cancelBtn">× 取消穿越</button>
<button class="btn btn-go" id="goBtn">→ 立即前往</button>
</div>
</div>
<script>
// 配置项 - 替换为你要跳转的URL
const TARGET_URL = "http://www.81dir.com";
let countdownTimer = null; // 倒计时定时器
let remainSeconds = 3; // 初始倒计时秒数
// 获取DOM元素
const countdownNum = document.getElementById("countdownNum");
const cancelBtn = document.getElementById("cancelBtn");
const goBtn = document.getElementById("goBtn");
const progressFill = document.getElementById("progressFill");
// 倒计时逻辑
function startCountdown() {
countdownTimer = setInterval(() => {
remainSeconds--;
countdownNum.textContent = remainSeconds;
// 倒计时结束自动跳转
if (remainSeconds <= 0) {
clearInterval(countdownTimer);
window.location.href = TARGET_URL;
}
}, 1000);
}
// 取消跳转
cancelBtn.addEventListener("click", () => {
clearInterval(countdownTimer);
countdownNum.textContent = "0";
progressFill.style.animation = "none"; // 停止进度条动画
alert("已取消时空穿越");
});
// 立即前往
goBtn.addEventListener("click", () => {
clearInterval(countdownTimer);
window.location.href = TARGET_URL;
});
// 启动倒计时
startCountdown();
</script>
</body>
</html>你可能想看：
标签
- 最近发表
- 相关推荐
-
- 一款特酷的GO跳转完整代码，我不就不信你不喜欢
- 极致时空 - zblog主题 zblog插件
- 连城读书_小说网,华语原创小说旗帜门户,军事小说,校园小说,言情小说,同人小说,耽美小说在线阅读,百合在线小说,穿越小说
- 万卷书屋_都市言情小说阅读网_穿越玄幻小说_免费耽美小说电子书
- 一款简约好看的引导页源码，适合做跳转页面
- 单页个人分享页面包含个人信息、分享内容卡片
- 高品质袜子推广单页（一眼识款 + 质感凸显）
- 马年祝福 HTML 单页代码
- 在线编辑 HTML 代码并实时预览效果的单页应用
- 云虚拟主机云服务器首页介绍单页支持适配任何网站
- 马年大吉酒桌马年酒桌语” 为主题的 HTML 单页
- 生日祝福单页代码，包含了动态飘雪效果、生日祝福语和精美的样式