Layui里的倒计时的使用

	1：layui是一个非常强大并且实用的插件，首先肯定是要在自己的HTML里面引用这个插件<script src="layui/layui.all.js"></script>；然后再写一个div盒子，给这个盒子一个ID叫test，给这个盒子设置一些样式，比如设置一下背景颜色，让文字居中，设置一下字体颜色，设置字体的大小，设置上内边距，宽度100%，高度700；
Css样式代码：

#test{
background: #A6A6A6;
text-align: center;
color: rgba(206,15,240,0.46);
padding: 20% 0;
font-size: 30px;
width: 100%;
height: 700px;
}
2：接下来就是编辑JS代码了，先写一个页面加载事件，然后引用layui模块加载名称为“util”，再随便变量一个结束时间比如2020年1月1日，当前服务器时间的话就获取现在的时间就行了，然后用layui封装的方法：util.countdown，第一个参数为结束时间，第二个参数为当前时间，然后回调函数里面再传递date, serverTime, timer，再变量一段文字，var str = date[0] + ‘天’ + date[1] + ‘时’ + date[2] + ‘分’ + date[3] + ‘秒’，其中data为传递的时间，然后通过ID获取到刚刚那个div盒子，给它的HTML赋值：‘距离2020年1月1日还有：’+ str，其中str为刚刚变量的那段文字，这样差不多就完成了
JS代码：
window.οnlοad=function(){
layui.use(‘util’, function(){
var util = layui.util;
var endTime = new Date(2020,1,1).getTime()
,serverTime = new Date().getTime();
util.countdown(endTime, serverTime, function(date,serverTime,timer){
var str = date[0] + ‘天’ + date[1] + ‘时’ + date[2] + ‘分’ + date[3]秒
layui.$(’#test’).html(‘距离2020年1月1日还有：’+ str);
});
});
}
3：设置完成以后，打开浏览器看看有没有效果
浏览器效果截图：

在浏览器中可以看出，确实是完成了的，而且时间也是不断变化的，当然，图片里面肯定是不能动的，去亲自试一下吧。