時間格式化輸出方法封裝(緩存時間格式,減少代碼量)

採用閉包不回收變量的特點,將時間格式緩存,避免全局污染以及重複定義時間格式

JavaScript代碼:

/**
 * @format 時間格式
 * @date 時間對象
 */
class TimeFormat {
    constructor(format) {
        //實例化默認格式YYYY-MM-DD HH-mm-SS或自定義格式
        this.format = format || 'YYYY-MM-DD HH:mm:SS';
    }

    setFormat(format) {
        //修改格式
        format ? this.format = format : null;
    }
    getDate(date,format) {
        this.setFormat(format);
        let _date = {
            "M+": date.getMonth() + 1, //月份   
            "D+": date.getDate(), //日   
            "H+": date.getHours(), //小時   
            "m+": date.getMinutes(), //分   
            "S+": date.getSeconds(), //秒   
            "Q+": Math.floor((date.getMonth() + 3) / 3), //季度   
            "s": date.getMilliseconds() //毫秒   
        };
        let _fmt = this.format;
        if (/(Y+)/.test(_fmt)) {
            _fmt = _fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (let item in _date) {
            //判斷是否存在關鍵字
            if (new RegExp("(" + item + ")").test(_fmt)) {
                //將對應的關鍵字換成對應的時間
                _fmt = _fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (_date[item]) : (("00" + _date[item]).substr(("" + _date[item]).length)));
            }
        }
        //返回將格式替換成時間的字符串
        return _fmt;
    }
}

html實例:

<html>
    <head>
        <title>時間格式化</title>
    </head>
    <body>
        <h2>選擇格式</h2>
        <div>
            <label><input type="radio" class="check" name="check" value="YYYY-MM-DD HH:mm:SS" id="">YYYY-MM-DD HH:mm:SS</label>
            <label><input type="radio" class="check" name="check" value="YYYY/MM/DD HH:mm:SS" id="">YYYY/MM/DD HH:mm:SS</label>
            <label><input type="radio" class="check" name="check" value="YYYY年MM月DD HH時mm分SS秒" id="">YYYY年MM月DD HH時mm分SS秒</label>
        </div>
        <br>
        <button id="submit" >打印當前時間</button><br><br>
        <div>輸出:<input type="text" class="get-date" id=""></div>
        <hr>
        <script src="./TimeFormat.js"></script>
        <script>
            let timeFormat = new TimeFormat();
            let checkChange = (e)=>{
                timeFormat.setFormat(e.currentTarget.value);
            }
            let check = document.querySelectorAll('input[name="check"]');
            check.forEach(value=>{
                value.addEventListener("change",checkChange);
            })
            document.getElementById('submit').onclick = ()=>{
                document.getElementsByClassName('get-date')[0].value = timeFormat.getDate(new Date());
            };
        </script>
    </body>
</html>

 

也可以在設置格式之後立即輸出:

timeFormat.getDate(new Date(),'YYYY年MM月DD HH時mm分SS秒')

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章