使用layui组件库制作进度条

最新推荐文章于 2024-05-21 15:43:31 发布

一只不吃老鼠的猫

最新推荐文章于 2024-05-21 15:43:31 发布

阅读量739

点赞数 2

分类专栏：前端文章标签： layui javascript 前端进度条

本文链接：https://blog.csdn.net/love521314123/article/details/130158839

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用layui组件库制作进度条

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <!-- 引入 layui 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css">
</head>
<body>

    <button id="start-button" class="layui-btn">启动进度条</button>

    <div class="layui-progress layui-progress-big" lay-showPercent="true">
        <div class="layui-progress-bar layui-bg-green" lay-percent="0%" id="progress-bar"></div>
    </div>

    <!-- 引入 layui 的 JS 文件 -->
    <script src="https://cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>
    <script>
        layui.use(['jquery', 'element'], function(){
            var $ = layui.jquery;
            var element = layui.element;
            var progress = $('.layui-progress-bar');
            var percent = 0;
            var timer;
            // 假设每50毫秒更新一次，总共16秒
            //可以按照自己的需求更改进度条的时间
            var step = (100 / 16) * 0.05; 
            $('#start-button').on('click', function(){
                timer = setInterval(function(){
                    percent+=step;
                    if (percent >= 100) {
                        clearInterval(timer);
                        percent = 100
                        //$('.progress-container').css('display', 'none');
                    }
                    progress.css('width', percent + '%');
                    progress.attr('lay-percent', percent.toFixed(2) + '%');
                    element.init();
                    element.progress('demo', percent.toFixed(2) + '%');
                }, 50);
            });
        });
    </script>
</body>
</html>