倒计时跳转URL
倒计时跳转URL 是一种常见的网页交互技术，它允许网页在设定的时间结束后自动导航至另一个预设的URL地址。这种技术常见于网页广告展示、用户操作提示、页面过渡等待等情况。
开发步骤
1、初始化HTML基础框架
使用!DOCTYPE html声明文档类型，并通过html:5的快捷代码创建HTML5的基础结，然后设置语言和标题。
<!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>倒计时跳转URL</title> </head> <body> <!-- 主体内容容器 --> <!-- LOGO模块 --> <!-- 白色模块 --> <!-- 跳转文本信息 --> <!-- 进入站点提示 --> </body> </html>
2、主体内容容器
设置灰色背景；
设置“主体内容容器”的显示位置左右居中，距离顶部20%的距离。
<div class="goto-page"> <!-- LOGO模块 --> <!-- 白色模块 --> <!-- 跳转文本信息 --> <!-- 进入站点提示 --> </div>
css
/* 设置整个页面的背景颜色为浅灰色 */
body {
background: #e8eaec;
}
/* 定义goto-page类的基本样式，设置宽度、水平居中以及顶部外边距 */
.goto-page {
width: 600px;
margin: 0 auto;
margin-top: 20%;
}3、LOGO模块
用img标签显示logo，img标签外面套个div控制居中和间距。
<div class="goto-logo"> <img src="img/4-2.svg" alt="前端开发"> </div>
css
/* 定义goto-logo类的样式，使其内部元素采用flex布局，水平居中，并设置底部外边距 */
.goto-logo{
display: flex;
justify-content: center;
margin-bottom: 20px;
}
/* 设置goto-logo内的图片大小自适应，宽高比保持不变 */
.goto-logo img{
width: 200px;
height: auto;
}4、白色模块
添加代码
<div class="goto-loading"> <!-- 跳转文本信息 --> <!-- 进入站点提示 --> </div>
css
/* 定义goto-loading类的样式，包括内边距、背景色、圆角边框和阴影效果 */
.goto-loading {
padding: 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 15px 20px rgb(18 19 20 / 10%);
}5、跳转文本信息
添加代码
<div class="goto-tips"> 您即将离开本站，并前往 ，该网站不属于本站页面，我们无法确认该网页是否安全，请注意保护您的账号和财产安全 </div>
css
/* 定义goto-tips类的样式，包括背景渐变色、圆角边框、内边距、字体大小、字重、颜色及行高 */
.goto-tips {
background: rgb(88 216 255 / 10%);
border-radius: 6px;
padding: 10px 20px;
font-size: 16px;
font-weight: 400;
color: #222226;
line-height: 28px;
}6、进入站点提示
<div class="goto-info"> <span>正在进入：</span> <a href="https://www.ytwes.com">www.ytwes.com </a> <span class="num">3秒</span> </div>
css
/* 定义goto-info类的样式，使其中的内容垂直居中对齐，设置上外边距、内上边距、分割线、字体大小和断词换行 */
.goto-info {
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid rgba(136, 136, 136, .2);
font-size: 14px;
word-break: break-all;
text-align: center;
}
/* 定义goto-info内a标签的样式，去除下划线并设置链接颜色 */
.goto-info a {
text-decoration: none;
color: #0188fb;
}
/* 定义goto-info内.num类的样式，设置颜色和左右间距 */
.goto-info .num {
color: #f70808;
}7、3秒后跳转
通过num，显示倒计时，结束后，进行跳转
// 获取class为'num'的元素
const a = document.querySelector('.num')
// 初始化倒计时数值为3
let num = 3
// 创建一个定时器，每隔1000毫秒执行一次回调函数
let timerID = setInterval(function () {
// 减少倒计时数值
num--
// 当倒计时大于0时，更新元素内容为剩余秒数
if (num > 0) {
a.innerHTML = `${num}秒`
}
// 当倒计时为0时，清除定时器并跳转到指定网址
if (num === 0) {
clearInterval(timerID)
location.href = 'https://www.ytwes.com'
}
}, 1000)8、完
效果演示
文档如有描述不清楚、错误或者过时的地方，欢迎留言指出。
文档、教程内容会不定时更新，转载请标明原帖链接，以免让过时的教程流入网络。
