-
Notifications
You must be signed in to change notification settings - Fork 31
/
example.html
173 lines (155 loc) · 6.85 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example</title>
<style>
body {
padding: 0;
margin: 0;
font-size: 16px;
background: #fff;
}
a{color:#070}
a:visited{color:#070}
.wrap {
margin: 0 auto;
width: 1200px;
}
.title {
padding: 20px;
border-bottom: 1px solid #fff;
color: #070;
box-sizing: border-box;
font-weight: bold;
background: #f5f5f5;
}
.code {
padding: 20px;
color: #666;
box-sizing: border-box;
display: block;
border-bottom: 1px solid #fff;
background: #f5f5f5;
}
.out {
padding: 20px;
color: #999;
box-sizing: border-box;
border-bottom: 1px solid #fff;
background: #f5f5f5;
}
.mb {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="title">format 格式化时间</div>
<div class="code">使用： miment().format('MM月DD日 hh:mm:ss')</div>
<div class="out mb" id="foramt"></div>
<div class="title">json 转换成JSON格式</div>
<div class="code">使用： miment().json()</div>
<div class="out mb" id="json"></div>
<div class="title">转换为时间戳</div>
<div class="code">使用： miment().stamp()</div>
<div class="out mb" id="stamp"></div>
<div class="title">获取一个月有几天</div>
<div class="code">使用： miment().daysInMonth()</div>
<div class="out mb" id="daysInMonth"></div>
<div class="title">add 增加(或减少)时间</div>
<div class="code">使用： miment().add(1,'DD')</div>
<div class="out" id="add"></div>
<div class="code">加完后再格式化： miment().add(1,'DD').format()</div>
<div class="out mb" id="add_foramt"></div>
<div class="title">firstDayOfWeek 获取 本周的第一天（周日）</div>
<div class="code">使用： miment().firstDayOfWeek()</div>
<div class="out" id="firstDayOfWeek"></div>
<div class="code">获取并格式化： miment().firstDayOfWeek().format()</div>
<div class="out mb" id="firstDayOfWeek_format"></div>
<div class="title">distance 计算2个时间的差距</div>
<div class="code">使用： miment().distance('2018-01-01')</div>
<div class="out" id="distance"></div>
<div class="code">获取并格式化： miment().distance('2018-01-01').format('距离高考还有MM月DD天',true)</div>
<div class="out mb" id="distance_format"></div>
<div class="title">firstDay 获取每个月的第一天</div>
<div class="code">使用： miment().firstDay()</div>
<div class="out" id="firstDay"></div>
<div class="code">获取并格式化： miment().firstDay().format()</div>
<div class="out mb" id="firstDay_format"></div>
<div class="title">lastDay 获取每个月的最后一天</div>
<div class="code">使用： miment().lastDay()</div>
<div class="out" id="lastDay"></div>
<div class="code">获取并格式化： miment().lastDay().format()</div>
<div class="out mb" id="lastDay_format"></div>
<div class="title">Date 原生方法</div>
<div class="code">使用： miment().getFullYear()</div>
<div class="out" id="nativeFunction"></div>
<div class="code">
原生方法还有getDate()，getDay()，getFullYear()，getHours()，getMilliseconds()，getMinutes()，
getMonth()，getSeconds()，getTime()，getTimezoneOffset()，getUTCDate()，getUTCDay()，
getUTCFullYear()，getUTCHours()，getUTCMilliseconds()，getUTCMinutes()，getUTCMonth()，
getUTCSeconds()，getYear()，setDate()，setFullYear()，setHours()，setMilliseconds()，
setMinutes()，setMonth()，setSeconds()，setTime()，setUTCDate()，setUTCFullYear()，
setUTCHours()，setUTCMilliseconds()，setUTCMinutes()，setUTCMonth()，setUTCSeconds()，
setYear()，toDateString()，toUTCString()，toISOString()，toJSON()，toLocaleDateString()，
toLocaleString()，toLocaleTimeString()，toString()，toTimeString()，toUTCString()，valueOf()，
具体请参 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date">考官方文档</a>
</div>
</div>
</body>
<!--<script src="./dist/miment.min.js"></script>-->
<script src="./src/miment.js"></script>
<script>
var miment = Miment
window.onload = function () {
// 格式化时间
var foramt = document.getElementById('foramt')
foramt.innerHTML = '输出： ' + miment().format('MM月DD日 hh:mm:ss')
// 转换成JSON格式
var json = document.getElementById('json')
json.innerHTML = '输出： <pre>' + JSON.stringify(miment().json(), null, 4) + '</pre>'
// 转换为时间戳
var stamp = document.getElementById('stamp')
stamp.innerHTML = '输出： ' + miment().stamp()
// 获取一个月有几天
var daysInMonth = document.getElementById('daysInMonth')
daysInMonth.innerHTML = '输出： ' + miment().daysInMonth()
// 增加(或减少)时间
var add = document.getElementById('add')
add.innerHTML = '输出： ' + miment().add(1, 'DD')
// 增加(或减少)时间 后再格式化
var add_foramt = document.getElementById('add_foramt')
add_foramt.innerHTML = '输出： ' + miment().add(1, 'DD').format()
// 获取 本周的第一天（周日）
var firstDayOfWeek = document.getElementById('firstDayOfWeek')
firstDayOfWeek.innerHTML = '输出： ' + miment().firstDayOfWeek()
// 获取 本周的第一天（周日）并格式化
var firstDayOfWeek_format = document.getElementById('firstDayOfWeek_format')
firstDayOfWeek_format.innerHTML = '输出： ' + miment().firstDayOfWeek().format()
// 计算2个时间的差距
var distance = document.getElementById('distance')
// distance.innerHTML = '输出： ' + miment().distance('2018-01-01')
distance.innerHTML = '输出： ' + miment().distance(1523408529932).format(null,1)
// 计算2个时间的差距 并格式化
var distance_format = document.getElementById('distance_format')
distance_format.innerHTML = '输出： ' + miment().distance('2018-01-01').format('距离高考还有MM月DD天', true)
// 获取每个月的第一天
var firstDay = document.getElementById('firstDay')
firstDay.innerHTML = '输出： ' + miment().firstDay()
// 获取每个月的第一天 并格式化
var firstDay_format = document.getElementById('firstDay_format')
firstDay_format.innerHTML = '输出： ' + miment().firstDay().format()
// 获取每个月的最后一天
var lastDay = document.getElementById('lastDay')
lastDay.innerHTML = '输出： ' + miment().lastDay()
// 获取每个月的最后一天 并格式化
var lastDay_format = document.getElementById('lastDay_format')
lastDay_format.innerHTML = '输出： ' + miment().lastDay().format()
// Date构造函数的原生方法
var nativeFunction = document.getElementById('nativeFunction')
nativeFunction.innerHTML = '输出： ' + miment().getFullYear()
}
</script>
</html>