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
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值