Moment.js插件学习:制作一个时间显示小案例

Moment.js是一个原生JavaScript 日期处理类库,使用起来也非常简单.但是注意它所得到的结果都是一个字符串,并且可以改变时间显示的格式.

使用方法:

//1.引入插件: 为了节约流量可以在最后引入插件
<script src="moment.js"></script>

//2.使用插件
<script>
    moment().format(); //可以获取当前时间的任意格式,通过设置format里面的参数.
</script>

关于其具体用法参考文档最好,给出一些参考:

关于年月日格式的设置
在这里插入图片描述

关于时分秒的设置:
在这里插入图片描述

**
这里要注意,这里前面的英文单词是作者给出的格式,不能随便改,
但是可以在后面加上汉字,这样是会被识别出来的.
**

DEMO案例:

页面上实时刷新时间,并显示出来.
在这里插入图片描述
上面的时间是不断变化的哦.

这里面用到了两个新标签:pre 和 code标签

/*
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格
和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。

*/

pre与code标签的连用,这样使得语义更加明确:

<pre>
	<code>
	  &lt;article&gt;
	    &lt;h1&gt;Article Heading&lt;/h1&gt;
	  &lt;/article&gt;
   </code>
</pre>

在页面的显示效果:

注意文字的字体效果以及文字与浏览器之间的间隔.

代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        pre {
                border: 1px solid rgba(34,34,34,0.2);
                border-radius: 4px;
                color: #222;
                font-size: 14px;
                padding: 5px 8px;
                margin: 0 0 20px;
                white-space: pre;
                word-wrap: normal;
                overflow-x: auto;
                line-height: 24px;
                background: rgba(34,34,34,0.03);
                font-weight: 100;
        }
    </style>
</head>
<body>
    <pre>
        <code class="language-js">
            moment().format(<span class="string">'M月 D号 YYYY年, h:mm:ss a'</span>);<span class="comment"> // 九月 16日 2018, 11:02:37 pm</span>
            moment().format(<span class="string">'dddd'</span>);<span class="comment"> // 星期日</span>
            moment().format(<span class="string">"MMM Do YY"</span>);<span class="comment"> // 9月 16日 18</span>
            moment().format(<span class="string">'YYYY [escaped] YYYY'</span>);<span class="comment"> // 2018 escaped 2018</span>
            moment().format();<span class="comment"> // 2018-09-16T23:02:37+08:00</span>
        </code>
    </pre> 
</body>
</html>
<script src="./moment/moment.js"></script>
<script>
    
    //获取需要显示时间的元素
    var comment = document.querySelectorAll('.comment');

    //页面一加载就显示的实时的
    showHTML();
    //每隔一秒刷新一次内容
    setInterval(showHTML,1000);

	/**
	 * [function_name showHTML 显示时间到页面上]
	 */
    function showHTML() {
        var time = gettime();
        // console.log(time);

        //将内容显示到页面上
        comment[0].innerHTML = time.nowTimeStr1;
        comment[1].innerHTML = time.day;
        comment[2].innerHTML = time.nowTimeStr2;
        comment[3].innerHTML = time.nowYear;
        comment[4].innerHTML = time.nowTime;
    }

	/**
	 * [function_name gettime 获取对应格式的时间]
	 */
    function gettime() {

        var time = {
            //获取当前的时间格式:九月 16日 2018, 11:02:37 pm
            nowTimeStr1 : moment().format('M月 D号 YYYY年, h:mm:ss a'),
            //获取星期
            day : convertDayToCH(moment().format('dddd')),
            //获取当前的时间格式:9月 16日 18
            nowTimeStr2 :  moment().format("M月 D号 YY"),
            //获取年
            nowYear : moment().format('YYYY [escaped] YYYY'),
            //获取没有设置样式的时间
            nowTime : moment().format(),
        };

        // 星期的一个转换英文转中文
        function convertDayToCH (day){
            // 将英文的星期准换成中文
            var day; //定义记录中文星期的变量
            switch(day) {
                case 'Sunday' : day = '星期天';
                break;
                case 'Monday' : day = "星期一";
                break;
                case 'Tuesday' : day = "星期二";
                break;
                case 'Wednesday' : day = "星期三";
                break;
                case 'Thursday' : day = "星期四";
                break;
                case 'Friday' : day = "星期五";
                break;
                case 'Saturday' : day = "星期六";
                break;
            }
            //返回对应的中文星期
            return day;
        }

        //返回获取到的时间对象
        return time;
    }
    
</script>

整体的实现还是比较简单,特别需要说明的是在很多的前端插件官网都有用到pre 和 code标签,因为这样让开发者直接复制到对应格式的代码.很便捷.

Moment.js插件学习:制作一个时间显示小案例

猜你喜欢