本篇文章详细介绍了使用JavaScript制作倒计时页面的步骤,通过倒计时5秒后自动跳转至六思逸,帮助读者更好的掌握使用JavaScript制作页面的方法。
效果图
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>六思逸</title>
<style>
#box {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: black;
color: white;
font-size: 50px;
font-weight: bold;
border-radius: 50%;
}
</style>
</head>
<!-- 制作一个倒计时5秒钟的页面,时间显示为0时跳转到六思逸) -->
<body>
<div id="box"></div>
<script>
function box(num) {
document.getElementById('box').innerHTML = num;
let timer = window.setInterval(function () {
num--;
console.log(num)
document.getElementById('box').innerHTML = num;
if (num <= 0) {
window.location.href = 'https://www.6s1.cn/'
window.clearInterval(timer)
}
}, 1000);
}
box(5)
</script>
</body>
</html>