• 向页面中插入不同格式的时间(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 // 秒钟前加零    
    });        

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

  • 相关阅读:
    移动端解决fixed和input弹出虚拟键盘时样式错位
    JS的面向对象
    js计算两个时间范围间的间隔秒数
    使用js过滤字符串前后的空格
    C#时间格式-摘自http://www.cnblogs.com/xiaogongzhu/p/3825600.html
    [dp/贪心]435. 无重叠区间-----经典问题
    【dp】Leetcode面试题 17.16. 按摩师
    [dp]Leetcode.376.摆动序列
    Leetcode 945 使数组唯一的最小增量
    LeetCode 365.水壶问题
  • 原文地址:https://www.cnblogs.com/lafitewu/p/8194460.html
Copyright © 2020-2023  润新知