zoukankan      html  css  js  c++  java
  • 前端js、jQuery实现日期格式化、字符串格式化

    1. js仿后台的字符串的StringFormat方法

      在做前端页面时候,经常会对字符串进行拼接处理,但是直接使用字符串拼接,不但影响阅读,而且影响执行效率,且jQuery有没有定义字符串的StringFormat方法,只好自己写一个。

    function StringFormat() {
             if (arguments.length == 0)
                 return null;
             var str = arguments[0];
             for (var i = 1; i < arguments.length; i++) {
                 var re = new RegExp('\{' + (i - 1) + '\}', 'gm');
                 str = str.replace(re, arguments[i]);
             }
             return str;
    } 

      使用方法与后台的StringFormat方法一样,StringFormat("abc{0}def","123");输出结果为"abc123def"。

    2. js实现日期格式化

      前端页面会经常将日期按照不同的格式输出显示,但是jQuery自身也没有对日期进行格式化的方法,以下代码可以简单实现该功能。

        function Format(now,mask)
        {
            var d = now;
            var zeroize = function (value, length)
            {
                if (!length) length = 2;
                value = String(value);
                for (var i = 0, zeros = ''; i < (length - value.length); i++)
                {
                    zeros += '0';
                }
                return zeros + value;
            };
         
            return mask.replace(/"[^"]*"|'[^']*'|(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])1?|[lLZ])/g, function ($0)
            {
                switch ($0)
                {
                    case 'd': return d.getDate();
                    case 'dd': return zeroize(d.getDate());
                    case 'ddd': return ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'][d.getDay()];
                    case 'dddd': return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][d.getDay()];
                    case 'M': return d.getMonth() + 1;
                    case 'MM': return zeroize(d.getMonth() + 1);
                    case 'MMM': return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][d.getMonth()];
                    case 'MMMM': return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][d.getMonth()];
                    case 'yy': return String(d.getFullYear()).substr(2);
                    case 'yyyy': return d.getFullYear();
                    case 'h': return d.getHours() % 12 || 12;
                    case 'hh': return zeroize(d.getHours() % 12 || 12);
                    case 'H': return d.getHours();
                    case 'HH': return zeroize(d.getHours());
                    case 'm': return d.getMinutes();
                    case 'mm': return zeroize(d.getMinutes());
                    case 's': return d.getSeconds();
                    case 'ss': return zeroize(d.getSeconds());
                    case 'l': return zeroize(d.getMilliseconds(), 3);
                    case 'L': var m = d.getMilliseconds();
                        if (m > 99) m = Math.round(m / 10);
                        return zeroize(m);
                    case 'tt': return d.getHours() < 12 ? 'am' : 'pm';
                    case 'TT': return d.getHours() < 12 ? 'AM' : 'PM';
                    case 'Z': return d.toUTCString().match(/[A-Z]+$/);
                    // Return quoted strings with the surrounding quotes removed
                    default: return $0.substr(1, $0.length - 2);
                }
            });
        };

      使用时候直接调用方法 Format(date,"yyyy-MM-dd HH:mm");输出格式为 "2015-10-14 16:50";第一个参数为时间,第二个参数为输出格式。

      格式中代表的意义:

        d:日期天数;dd:日期天数(2位,不够补0);ddd:星期(英文简写);dddd:星期(英文全拼);

        M:数字月份;MM:数字月份(2位,不够补0);MMM:月份(英文简写);MMMM:月份(英文全拼);

        yy:年份(2位);yyyy:年份;

        h:小时(12时计时法);hh:小时(2位,不足补0;12时计时法);

        H:小时(24时计时法);HH:小时(2位,不足补0;24时计时法);

        m:分钟;mm:分钟(2位,不足补0);

        s:秒;ss:秒(2位,不足补0);

        l:毫秒数(保留3位);

        tt: 小时(12时计时法,保留am、pm);TT: 小时(12时计时法,保留AM、PM);

      很古老的东西了,今天偶尔整理一下,希望能够帮到大家,谢谢。

  • 相关阅读:
    winston写日志(译)
    H5打字机特效
    Flutter 手指放大 平移 旋转 Widget
    51nod1432【贪心】
    死锁的例子
    C# SpinLock用法。
    鼓音效
    rm-rf
    cdoj 1334 郭大侠与Rabi-Ribi Label:贪心+数据结构
    1092 回文字符串(51nod)
  • 原文地址:https://www.cnblogs.com/xuyangblog/p/4878043.html
Copyright © 2011-2022 走看看