提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

学写一个糊弄人的进度条（layui+js）

JS 一个 进度条 layui
2023-09-27 14:19:45 时间

学写一个糊弄人的进度条

一、效果展示：

请添加图片描述
众所周知，进度条是一种烦人的东西╭(╯^╰)╮
它用于实时显示处理任务的速度，完成度，剩余未完成任务量的大小，和可能需要处理时间。下面来一起写一个进度条叭。

二、layui配置

首先在官网下载layui
将html文件如下图创建好
在这里插入图片描述
在html文件头中链接到layui

<head>
    <!--在html文件头中链接到layui-->
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>

引入layui.js

<!--引入layui.js-->
    <script src="./layui/layui.js"></script>

三、完整源码及超详细注释

<!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>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>

<body>


    <!--动态进度条-->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>正在加载，请稍后...</legend>
    </fieldset>

    <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
        <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
    </div>

    <div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
        <button class="layui-btn site-demo-active" data-type="loading">模拟loading</button>
    </div>

    </div>
    <!--引入layui.js-->
    <script src="./layui/layui.js"></script>
    <!--layui配置-->
    <script>
        //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
        layui.use('element', function () {
            var $ = layui.jquery; //获取js
            var element = layui.element; //获取layui

            //active事件
            var active = {
                loading: function (othis) {//当loading按钮被点击后
                    var DISABLED = 'layui-btn-disabled';//layui-btn-disabled表示禁止点击的按钮
                    othis.addClass(DISABLED);//将按钮设置为禁止点击状态

                    //模拟loading
                    var n = 0,//n表示进度百分百，取0到100
                        timer = setInterval(function () {//设置一个定时器
                            n = n + Math.random() * 10 | 0;//Math.random() * 10 | 0表示随机选取一个0到10的整数
                            if (n > 100) {//当n大于100时，将n设置为100，结束定时器，并恢复按钮，
                                n = 100;
                                clearInterval(timer);
                                othis.removeClass(DISABLED);//去掉禁止点击的限制
                            }
                            element.progress('demo', n + '%');//每次n增加后，改变进度条，element.progress可以改变进度条的值
                        }, 300 + Math.random() * 1000);//表示本定时器是每隔300~1300ms之间执行一次function

                }
            };

            $('.site-demo-active').on('click', function () {//抓取到模拟loading按钮，绑定click点击事件
                var othis = $(this),
                    type = $(this).data('type');
                active[type] ? active[type].call(this, othis) : '';//如果按钮被点击，则触发active
            });


        });
    </script>
</body>
</html>

四、免费完整源码工程下载

CSDN下载：layui-progress+element+js设计一个动态进度条

相关文章