我正在尝试使用JavaScript在HTML文件的后台添加计时事件。这是我的代码。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Loading Screen</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="box">
<div class="b b1"></div>
<div class="b b2"></div>
<div class="b b3"></div>
<div class="b b4"></div>
<style>
</div>
</html>
如果需要在样式文件中添加代码，则为style.css文件夹。
body {
margin: 0;
padding: 0;
background: #e55039;
}
.box {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
.box .b {
border-radius: 50%;
border-left: 4px solid;
border-right: 4px solid;
border-top: 4px solid transparent !important;
border-bottom: 4px solid transparent !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: ro 2s infinite;
}
.box .b1 {
border-color: #4a69bd;
width: 120px;
height: 120px;
}
.box .b2 {
border-color: #f6b93b;
width: 100px;
height: 100px;
animation-delay: 0.2s;
}
.box .b3 {
border-color: #2ecc71;
width: 80px;
height: 80px;
animation-delay: 0.4s;
}
.box .b4 {
border-color: #34495e;
width: 60px;
height: 60px;
animation-delay: 0.6s;
}
@keyframes ro {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
50% {
transform: translate(-50%, -50%) rotate(-400deg);
}
100% {
transform: translate(-50%, -50%) rotate(200deg);
}
}
应该发生的是，我在登录页面上单击“登录”，然后会出现5秒钟，然后进入下一页。
有多种方法可以完成自动重定向当前页面。
您最初说过JavaScript，所以这里是一个JS解决方案：
setTimeout(function () {
window.location.href = 'my_new_page.htm';
}, 5000);
这将在5000毫秒（5秒）后将页面重定向到my_new_page.htm（更改为所需的页面）。
您也可以使用标准重定向，完全不需要JavaScript @
<head>
... Other head HTML
<meta http-equiv="refresh" content="5;url=my_new_page.htm" />
</head>
只需将meta标记放入head中，页面将在5秒后自动重定向到my_new_page.htm。