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

插件地址:http://momentjs.cn/

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 pmnowTimeStr1 : moment().format('M月 D号 YYYY年, h:mm:ss a'),//获取星期day : convertDayToCH(moment().format('dddd')),//获取当前的时间格式:9月 16日 18nowTimeStr2 :  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插件学习:制作一个时间显示小案例相关推荐

微信小程序｜使用小程序制作一个时间管理小工具
适时而学,适时而息,张弛有度的生活态度才能让我们走得更远.此文使用小程序制作一个日程管理小工具,将时间进行分解以实现有效管理. 开发步骤一.创建小程序二.功能实现 2.1.首页 2.2.记录页 3 ...
java聊天室小程序论文_在Java项目中利用continue与break制作一个聊天室小程序
在Java项目中利用continue与break制作一个聊天室小程序发布时间:2020-12-08 16:03:27 来源:亿速云阅读:98 作者:Leah 在Java项目中利用continue与 ...
python打字_使用Python制作一个打字训练小工具
一.写在前面说道程序员,你会想到什么呢?有人认为程序员象征着高薪,有人认为程序员都是死肥宅,还有人想到的则是996和 ICU. 别人眼中的程序员:飞快的敲击键盘.酷炫的切换屏幕.各种看不懂的字符代码 ...
使用小程序制作一个飞机大战小游戏
此文主要基于微信小程序制作一个飞机大战小游戏,上手即用,操作简单. 一.创建小程序二.页面实现三.代码块一.创建小程序访问微信公众平台,点击账号注册. 选择小程序,并在表单填写所需的各项信息进 ...
艺术签名python_用 Python 制作一个艺术签名小工具，给自己设计一个优雅的签名...
生活中有很多场景都需要我们签字(签名),如果是一些不重要的场景,我们的签名好坏基本无所谓了,但如果是一些比较重要的场景,如果我们的签名比较差的话,就有可能给别人留下不太好的印象了,俗话说字如其人嘛,本 ...
python 编写实用小工具-使用Python制作一个打字训练小工具
一.写在前面说道程序员,你会想到什么呢?有人认为程序员象征着高薪,有人认为程序员都是死肥宅,还有人想到的则是996和 ICU. 别人眼中的程序员:飞快的敲击键盘.酷炫的切换屏幕.各种看不懂的字符代码 ...
PS制作一个百度的小熊掌LOGO
这篇教程是向脚本之家的朋友分享PS制作一个百度的小熊掌LOGO方法,教程比较基础,很简单,适合新手来学习,推荐到脚本之家,喜欢的朋友可以参考本文,来看看吧大家每天都用会百度,有没有想过自己制作一个百 ...
用 Python 制作一个艺术签名小工具，给自己设计一个优雅的签名
生活中有很多场景都需要我们签字(签名),如果是一些不重要的场景,我们的签名好坏基本无所谓了,但如果是一些比较重要的场景,如果我们的签名比较差的话,就有可能给别人留下不太好的印象了,俗话说字如其人嘛,本 ...
python绘制自己的名字_用 Python 制作一个艺术签名小工具，给自己设计一个优雅的签名...
生活中有很多场景都需要我们签字(签名),如果是一些不重要的场景,我们的签名好坏基本无所谓了,但如果是一些比较重要的场景,如果我们的签名比较差的话,就有可能给别人留下不太好的印象了,俗话说字如其人嘛,本 ...

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

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

最新文章

热门文章