Layui里的倒计时的使用

谁践踏了优雅 2022-01-22 03:05 432阅读 0赞

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：设置完成以后，打开浏览器看看有没有效果  
浏览器效果截图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]: /images/20220122/c33480a68b324613ac81de87acbf98e4.png