LayUI前端开发实战记录

一、使用弹出框完成页面遮罩

layer.msg('加载中......', {icon: 16, shade: [0.5, '#f5f5f5'], scrollbar: false, offset: 'auto', time: 2000});

二、弹出框设置显示时间

layer.msg('修改成功!',{time:500});

三、时间控件

一）只可选择分秒

【时间格式：mm:ss    限定选定范围的最大最小值】（只选择时分时，效果可类似，但是小时会显示）

（1）代码

layui.use('laydate', function(){
    var laydate = layui.laydate;

    //时间选择器 
    laydate.render({
        elem: '#taskMin',
        type: 'time',
        theme: 'molv',
        format: 'mm:ss',
        min: '00:00:00',
        max: '00:60:00',
    });

});

（2）效果：

2）只可选择时分

a）代码：添加CSS样式 【width：】

<style type="text/css">
	.layui-laydate-content>.layui-laydate-list {
		padding-bottom: 0px;
		overflow: hidden;
	}
	.layui-laydate-content>.layui-laydate-list>li{
		width:50%
	}

	.merge-box .scrollbox .merge-list {
		padding-bottom: 5px;
	}

</style>

效果：