js 实现简易动态进度条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    a {
        text-decoration: none;
        color: pink;
    }

    body>div:nth-child(2) {
        width: 600px;
        height: 150px;
        background-color: skyblue;
        position: absolute;
        top: 35%;
        left: 35%;
        display: none;
    }

    p {
        position: absolute;
        right: 10%;
    }

    body>div:nth-child(2)>div:nth-child(2) {
        position: absolute;
        top: 30%;
        left: 5%;
    }

    body>div:nth-child(2)>div:nth-child(3) {
        border: 1px black solid;
        position: absolute;
        bottom: 40%;
        left: 5%;
        width: 500px;
        height: 20px;
        margin: 0 auto;
    }

    body>div:nth-child(2)>div:nth-child(3)>div {
        height: 20px;
        background-color: pink;

    }
</style>

<body>
    <div>
        <h1>文章标题<a href="#">点击登录</a></h1>

        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut laboriosam placeat ullam inventore totam ipsa,
            eos in fugiat quibusdam beatae laborum nihil, cum aut dolore? Distinctio dignissimos fugit facilis eveniet!
        </div>
    </div>
    <div>
        <div>
            <p>x</p>
        </div>
        <div>正在登陆...</div>
        <div>
            <div></div>
        </div>
    </div>
    <script src="./dl.js"></script>
</body>

</html>
 
js部分
let bodyEle = document.getElementsByTagName("body")[0];
let divEle = document.getElementsByTagName("div");
let aEle = document.getElementsByTagName("a")[0];
let user = 0;

aEle.addEventListener("click", function () {
    divEle[2].style.display = "block";
    let a = setInterval(function () {
        divEle[5].style.width = user + "px";
        user++;
        console.log(a);
        if (user > 500) {
            divEle[2].style.display = "none";
            clearInterval(a);
        }
    }, 1)
    
});
 
posted @ 2020-10-11 18:51  Wwink  阅读(194)  评论(0)    收藏  举报