<code><script>

layer.msg('hello');

</script>

3.3.1.2 layui 模块化使用

引入layui.css

引入layui.js

layui.use('form', function () {

var layer = layui.layer;

layer.msg('hello');

});

3.3.1.3 内置方法

layer.open

layer.msg

3.3.1.4 type-基本层类型

类型：Number，默认：0

layer提供了5种层类型。可传入的值有：

0（信息框，默认）

1（页面层）

2（iframe层）

3（加载层）

4（tips层）

若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

3.3.1.5 title-标题

类型：String/Array/Boolean，默认：‘信息’

title支持三种类型的值，若你传入的是普通的字符串，如title :‘我是标题’，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false

总结:

title :'我是标题'

title: ['文本', 'font-size:18px;']

title: false

3.3.1.6 content-内容

类型：String/DOM/Array，默认：‘’

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同

/!\*

如果是页面层

\*/

layer.open({

type: 1,

content: '传入任意的文本或html' //这里content是一个普通的String

});

layer.open({

type: 1,

content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响

});

//Ajax获取

$.post('url', {}, function(str){

layer.open({

type: 1,

content: str //注意，如果str是object，那么需要字符拼接。

});

});

/!\*

如果是iframe层

\*/

layer.open({

type: 2,

content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']

});

/!\*

如果是用layer.open执行tips层

\*/

layer.open({

type: 4,

content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM

});

3.3.1.7 area - 宽高

类型：String/Array，默认：‘auto’

在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: ‘500px’，高度仍然是自适应的。当你宽高都要定义时，你可以area: [‘500px’, ‘300px’]

3.3.1.8 icon - 图标

信息框和加载层的私有参数

类型：Number，默认：-1（信息框）/0（加载层）

信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2

3.3.2 日期与时间选择

3.3.2.1 作为独立组件使用(未下载到独立版本)

3.3.2.2 在 layui 模块中使用

layui.use('form', function () {

var laydate = layui.laydate;

});

3.3.1.4 基础参数选项

通过核心方法：laydate.render(options) 来设置基础参数，也可以通过方法：laydate.set(options) 来设定全局基础参数.

laydate.render({

elem: '#test1' //指定元素

});

3.3.1.5 elem - 绑定元素

类型：String/DOM，默认值：无

必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象

laydate.render({

elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等

});

3.3.1.6 type - 控件选择类型

类型：String，默认值：date

用于单独提供不同的选择器类型

//日期范围选择

laydate.render({

elem: '#test'

,range: true //或 range: '~' 来自定义分割字符

});

//日期时间范围选择

laydate.render({

elem: '#test'

,type: 'datetime'

,range: true

});

//时间范围选择

laydate.render({

elem: '#test'

,type: 'time'

,range: true

});

//年范围选择

laydate.render({

elem: '#test'

,type: 'year'

,range: true

});

//年月范围选择

laydate.render({

elem: '#test'

,type: 'month'

,range: true

### 最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

>技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

![](https://img-blog.csdnimg.cn/img_convert/ce331c95b55bd5e643195912027ceff9.webp?x-oss-process=image/format,png)

te.render(options)` 来设置基础参数，也可以通过方法：`laydate.set(options)` 来设定全局基础参数.

>

>

>

laydate.render({

elem: ‘#test1’ //指定元素

});

##### 3.3.1.5 elem - 绑定元素

>

> 类型：String/DOM，默认值：无

> 必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象

>

>

>

laydate.render({

elem: ‘#test’ //或 elem: document.getElementById(‘test’)、elem: lay(‘#test’) 等

});

##### 3.3.1.6 type - 控件选择类型

>

> 类型：String，默认值：date

> 用于单独提供不同的选择器类型

>

>

>

| type可选值 | 名称 | 用途 |

| --- | --- | --- |

| year | 年选择器 | 只提供年列表选 |

| month | 年月选择器 | 只提供年、月选择 |

| date | 日期选择器 | 可选择：年、月、日。type默认值，一般可不填 |

| time | 时间选择器 | 只提供时、分、秒选择 |

| datetime | 日期时间选择器 | 可选择：年、月、日、时、分、秒 |

//日期范围选择

laydate.render({

elem: ‘#test’

,range: true //或 range: ‘~’ 来自定义分割字符

});

//日期时间范围选择

laydate.render({

elem: ‘#test’

,type: ‘datetime’

,range: true

});

//时间范围选择

laydate.render({

elem: ‘#test’

,type: ‘time’

,range: true

});

//年范围选择

laydate.render({

elem: ‘#test’

,type: ‘year’

,range: true

});

//年月范围选择

laydate.render({

elem: ‘#test’

,type: ‘month’

,range: true

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

[外链图片转存中…(img-6uoxGipW-1727195870161)]