实现一个糊弄人的进度条layui+js

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

@TOC

一、效果展示:

请添加图片描述

众所周知,进度条是一种烦人的东西╭(╯^╰)╮

它用于实时显示处理任务的速度,完成度,剩余未完成任务量的大小,和可能需要处理时间。下面来一起写一个进度条叭。

二、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>


相关文章
|
9月前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
|
容器
layui下拉多选框xm-select.js插件的使用
layui下拉多选框xm-select.js插件的使用
822 0
|
9月前
|
移动开发 JavaScript 前端开发
分享36个JS滚动,29个JS进度条,12个JS日历代码,总有一款适合您
分享36个JS滚动,29个JS进度条,12个JS日历代码,总有一款适合您
86 0
|
9月前
|
移动开发 JavaScript 前端开发
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您
148 0
|
9月前
|
JavaScript
用html,js和layui写一个简单的点击打怪小游戏
用html,js和layui写一个简单的点击打怪小游戏
96 0
|
9月前
|
移动开发 JavaScript 前端开发
用Html和js和layui写一个简单猜拳小游戏
用Html和js和layui写一个简单猜拳小游戏
119 0
|
JavaScript
进入页面js加载进度条demo效果示例(整理)
进入页面js加载进度条demo效果示例(整理)
进入页面js加载进度条demo效果示例(整理)
|
JavaScript
js进度条载入demo效果示例(整理)
js进度条载入demo效果示例(整理)
|
JSON 前端开发 API
layui框架实战案例(8):web图片裁切插件croppers.js组件实现上传图片的自定义截取(含php后端)
layui框架实战案例(8):web图片裁切插件croppers.js组件实现上传图片的自定义截取(含php后端)
596 0
|
JavaScript 前端开发
javascript实现数据自动模拟系列(1):ProgressBarWars.js进度条动画轮播
javascript实现数据自动模拟系列(1):ProgressBarWars.js进度条动画轮播
91 0

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    59
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    32
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    48
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    60
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    59
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    58