进度条加载

深处莫神

发布于 2022-8-15 11:32

浏览

0收藏

进度条

进度条加载-鸿蒙开发者社区
思路：
1.就是一个autoplay函数的调用，如果加载进度大于100就清除定时器，否则就增加进度条进度

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000;
        }

        h1 {
            font-size: 3em;
        }

        .box {
            width: 30%;
            height: 100px;
            margin: 0 auto;
            /* border: 5px solid red; */
            margin-top: 20em;
            text-align: center;
            color: #fff;
        }

        #num {
            font-size: 2em;
            margin-bottom: 5px;
            font-weight: bold;
        }

        hr {
            width: 0px;
            height: 1px;
            /* 渐变颜色 */
            background: linear-gradient(45deg, rgb(198, 66, 66), rgb(68, 151, 68), rgb(73, 73, 219));
            margin: 0 auto;
            /* border: 0; */
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>loading</h1>
        <div id="num">0%</div>
        <hr />

    </div>
</body>

</html>
<script src="./assets/js/jquery.js"></script>
<script>
    function autoplay() {
        var num = $('#num').text()
        num = parseInt(num)

        // console.log(num)
        if (num >= 100) {
            clearInterval(T)
            return false
        }
        else {
            num++
            $('#num').text(`${num}%`)
            $("hr").css('width', `${num}%`)
        }

    }
    // autoplay()
    var T = setInterval(autoplay, 10)
</script>

分类

其他

标签