index.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <title>工具模块 - 组件</title>
  2. <div class="layui-card layadmin-header">
  3. <div class="layui-breadcrumb" lay-filter="breadcrumb">
  4. <a lay-href="">主页</a>
  5. <a><cite>组件</cite></a>
  6. <a><cite>工具模块</cite></a>
  7. </div>
  8. </div>
  9. <div class="layui-fluid">
  10. <div class="layui-row layui-col-space15">
  11. <div class="layui-col-md12">
  12. <div class="layui-card">
  13. <div class="layui-card-header">倒计时</div>
  14. <div class="layui-card-body">
  15. 请选择要计算的日期:
  16. <div class="layui-inline">
  17. <input type="text" class="layui-input" id="test-util-countdown" value="2099-01-01 00:00:00">
  18. </div>
  19. <blockquote class="layui-elem-quote" style="margin-top: 10px;">
  20. <div id="test-util-countdown-ret"></div>
  21. </blockquote>
  22. </div>
  23. </div>
  24. </div>
  25. <div class="layui-col-md12">
  26. <div class="layui-card">
  27. <div class="layui-card-header">某个时间在当前时间的多久前</div>
  28. <div class="layui-card-body">
  29. 请选择要计算的日期:
  30. <div class="layui-inline">
  31. <input type="text" class="layui-input" id="test-util-timeago">
  32. </div>
  33. <span class="layui-word-aux" id="test-util-timeago-ret"></span>
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. <script>
  40. layui.use(['admin', 'util', 'laydate', 'layer'], function(){
  41. var util = layui.util
  42. ,laydate = layui.laydate
  43. ,layer = layui.layer;
  44. //倒计时
  45. var thisTimer, setCountdown = function(y, M, d, H, m, s){
  46. var endTime = new Date(y, M||0, d||1, H||0, m||0, s||0) //结束日期
  47. ,serverTime = new Date(); //假设为当前服务器时间,这里采用的是本地时间,实际使用一般是取服务端的
  48. clearTimeout(thisTimer);
  49. util.countdown(endTime, serverTime, function(date, serverTime, timer){
  50. var str = date[0] + '天' + date[1] + '时' + date[2] + '分' + date[3] + '秒';
  51. lay('#test-util-countdown-ret').html(str);
  52. thisTimer = timer;
  53. });
  54. };
  55. setCountdown(2099,1,1);
  56. laydate.render({
  57. elem: '#test-util-countdown'
  58. ,type: 'datetime'
  59. ,done: function(value, date){
  60. setCountdown(date.year, date.month - 1, date.date, date.hours, date.minutes, date.seconds);
  61. }
  62. });
  63. //某个时间在当前时间的多久前
  64. var setTimeAgo = function(y, M, d, H, m, s){
  65. var str = util.timeAgo(new Date(y, M||0, d||1, H||0, m||0, s||0));
  66. lay('#test-util-timeago-ret').html(str);
  67. };
  68. laydate.render({
  69. elem: '#test-util-timeago'
  70. ,type: 'datetime'
  71. ,done: function(value, date){
  72. setTimeAgo(date.year, date.month - 1, date.date, date.hours, date.minutes, date.seconds);
  73. }
  74. });
  75. });
  76. </script>