进度条（layui+js）"/>
学写一个糊弄人的进度条（layui+js）
学写一个糊弄人的进度条
- 一、效果展示：
- 二、layui配置
- 三、完整源码及超详细注释
- 四、免费完整源码工程下载
一、效果展示：
众所周知，进度条是一种烦人的东西╭(╯^╰)╮
它用于实时显示处理任务的速度，完成度，剩余未完成任务量的大小，和可能需要处理时间。下面来一起写一个进度条叭。
二、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; //获取jsvar element = layui.element; //获取layui//active事件var active = {loading: function (othis) {//当loading按钮被点击后var DISABLED = 'layui-btn-disabled';//layui-btn-disabled表示禁止点击的按钮othis.addClass(DISABLED);//将按钮设置为禁止点击状态//模拟loadingvar n = 0,//n表示进度百分百，取0到100timer = 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设计一个动态进度条
更多推荐
学写一个糊弄人的进度条（layui+js）
发布评论