JavaScript进度条

进度条到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);