进度条到100%则跳转网页
image.png
HTML部分
<div id="fa">
<div id="son"> <input type="text" id="inp"></div>
</div>
</div>
<div id="hui">
</div>
CSS部分
body {
background-image: url("../img/1.png");
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
/* 超出部分不显示
*/
}
div#fa {
z-index: 2;
width: 600px;
height: 2%;
size: 3;
background-color: red;
border: 2px solid none;
border-radius: 125px;
position: absolute;
top: 45%;
left: 20%;
}
div#son {
animation: nam 3s linear forwards;
width: 10%;
height: 100%;
border-radius: 15px;
background-color: orange;
}
@keyframes nam {
0% {
width: 0;
}
100% {
width: 100%;
}
}
#inp {
font-size: 25px;
position: absolute;
left: 40%;
border: 0px;
background-color: transparent;
color: aliceblue;
}
div#hui {
top: 0%;
left: 0%;
width: 100%;
height: 100%;
position: absolute;
background-color: #000000;
z-index: 1;
opacity: 0.5;
}
js部分
let ofa = document.querySelector("#fa");
let oson = document.querySelector("#son");
let inp = document.querySelector("#inp");
setInterval(() => {
let num = `${parseInt( oson.clientWidth/ofa.clientWidth*100 ) }%`;
inp.value = num;
if (num == '100%') {
window.location.href = "index2.html";
}
}, 200);
