当前博客：27-快码FOF中文编程layui教学-组件：进度条

171 次浏览【转载需注明来源】

收藏内容 (0) (0)

个性签名：请输入个性签名___________

进度条大家都知道吧，在软件安装，删除，文件上传，下载，一系列需要等待的情况都可以用进度条来显示进度，

layui也内置了进度条组件，在上传文件的时候，我经常使用它，

使用方法非常简单，进度条代码如下：

<区块 类名="lay-进度条">
	<区块 类名="lay-进度条-进度" lay-百分比="10%"></区块>
</区块>
<区块 类名="lay-进度条" lay-显示百分比="显示">
	<区块 类名="lay-进度条-进度 lay-橙色背景" lay-百分比="30%"></区块>
</区块>
<区块 类名="lay-进度条 lay-进度条-大尺寸" lay-显示百分比="显示" lay-过滤器="演示">
	<区块 类名="lay-进度条-进度 lay-蓝色背景" lay-百分比="0%"></区块>
</区块>
<按钮 类名="lay-按钮" 点击回调="设置进度()">设置进度条为50%</按钮>
<按钮 类名="lay-按钮" 点击回调="模拟进度()">模拟进度条</按钮>
<脚本>
	定义函数 设置进度() {
		lay_元素.进度("演示", "50%");
	}
	定义函数 模拟进度() {
		变量 进度 = 0;
		变量 时间钟 = 启动时钟(定义函数 () {
			进度 = (进度 + 计算类.取随机数() * 10) | 0;
			如果 (进度 > 100) {
				进度 = 100;
				关闭时钟(时间钟);
			}
			lay_元素.进度("演示", 进度 + "%");
		}, 300 + 计算类.取随机数() * 1000);
	}
</脚本>

代码效果展示：