向页面中插入不同格式的时间（timeDate.js）

前言，因项目需要，需要在H5页面中插入时间。

为了方便以后直接调用，所以动手做了一个小插件。（此插件基于jquery）

可以先看看效果（不用插件可以达到一样的效果，方便下次还有调用时间）

如图：

先看看我如何调用的，

代码如下：

$(".l_date").timeDate({show:"H-m"});
$(".l_year").timeDate({show:"M-D-W"});

对你没看错，就这两行代码，实现上面的时间和日期。

最后贴上插件源码，如下：

  1 /*
  2  * timeDate.js
  3  * by LafiteWu    
  4  * by QQ:863512936
  5  * 2018-01-04 v1.0
  6  */
  7 
  8 
  9 (function($) {
 10     $.fn.timeDate = function(options) {
 11         var that = $(this);
 12         var defaults = {
 13             show: "Y/M/D/W", //显示形式 
 14              zero: true, // 是否开启零,也是总开关，当它值为false时，下面的值无效
 15              Month_zero: true, // 月份是否加零
 16              Day_zero: true, // 日期上是否加零
 17              Hours_zero: true, // 小时前是否加零
 18              Min_zero: true, // 分钟前是否加零
 19              Second_zero: true // 秒钟前加零
 20          };
 21          var data = $.extend(defaults,options);
 22          var now = new Date(); 
 23          var weekday = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
 24          var time = {
 25              year: now.getFullYear(),
 26              month: now.getMonth()+1,
 27              day: now.getDate(),
 28              week: weekday[now.getDay()],
 29              hours: now.getHours(),
 30              minutes: now.getMinutes(),
 31              seconds: now.getSeconds(),
 32          };
 33          if(data.zero) {
 34              if(data.Month_zero) {
 35                  if(time.month < 10) {
 36                      time.month = "0" + time.month;
 37                  }
 38              }
 39              if(data.Day_zero) {
 40                  if(time.day < 10) {
 41                      time.day = "0" + time.day;
 42                  }
 43              }
 44              if(data.Hours_zero) {
 45                  if(time.hours < 10) {
 46                      time.hours = "0" + time.hours;
 47                  }
 48              }
 49              if(data.Min_zero) {
 50                  if(time.minutes < 10) {
 51                      time.minutes = "0" + time.minutes;
 52                  }
 53              }
 54              if(data.Second_zero) {
 55                  if(time.seconds < 10) {
 56                      time.seconds = "0" + time.seconds;
 57                  }
 58              }
 59          }
 60          switch(data.show) {
 61              case("Y"):
 62                  Html(time.year);
 63                  break;
 64              case("M"):
 65                  Html(time.month);
 66                  break;
 67              case("D"):
 68                  Html(time.day);
 69                  break;
 70              case("H"):
 71                  Html(time.hours);
 72                  break;
 73              case("m"):
 74                  Html(time.minutes);
 75                  break;
 76              case("S"):
 77                  Html(time.seconds);
 78                  break;
 79              case("W"):
 80                  Html(time.week);
 81                  break;
 82              case("Y-M"):
 83                  Html(time.year+"年"+time.month+"月");
 84                  break;
 85              case("Y/M"):
 86                  Html(time.year+"/"+time.month);
 87                  break;
 88              case("M-D"):
 89                  Html(time.month+"月"+time.day+"日");
 90                  break;
 91              case("M/D"):
 92                  Html(time.month+"/"+time.day);
 93                  break;
 94              case("M-D-W"):
 95                  Html(time.month+"月"+time.day+"日 "+time.week);
 96                  break;
 97              case("M/D/W"):
 98                  Html(time.month+"/"+time.day+" "+time.week);
 99                  break;
100              case("Y-M-D"):
101                  Html(time.year+"年"+time.month+"月"+time.day+"日");
102                  break;
103              case("Y-M-D-W"):
104                  Html(time.year+"年"+time.month+"月"+time.day+"日 "+time.week);
105                  break;
106              case("Y/M/D/W"):
107                  Html(time.year+"/"+time.month+"/"+time.day+" "+time.week);
108                  break;
109              case("Y/M/D"):
110                  Html(time.year+"/"+time.month+"/"+time.day);
111                  break;
112              case("H-m"):
113                  Html(time.hours+":"+time.minutes);
114                  break;
115              case("H-m-S"):
116                  Html(time.hours+":"+time.minutes+":"+time.seconds);
117                  break;
118              default:
119                  throw new Error("Check if your format is correct");
120          }
121          function Html(a) {
122              that.html(a);
123          }
124     }
125 })(jQuery);

最后使用说明如下：

例：

$(".class").timeDate({
    show: "Y/M/D/W", //显示形式 Y、M、W、Y-M、M-D-W、Y/M/D/W、H-m、H-m-S 等等
    zero: true, // 是否开启零,也是总开关，当它值为false时，下面的值无效
    Month_zero: true, // 月份是否加零
    Day_zero: true, // 日期上是否加零
    Hours_zero: true, // 小时前是否加零
    Min_zero: true, // 分钟前是否加零
    Second_zero: true // 秒钟前加零    
});

嗯，就是这么容易，大家应该会用了吧，妈妈再也不用担心我写时间麻烦了。