Update public/index.html
Browse files- public/index.html +252 -78
public/index.html
CHANGED
@@ -1,89 +1,263 @@
|
|
1 |
-
<!
|
2 |
-
<html
|
3 |
-
<head>
|
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 |
-
var SLIDE_IN_LEFT = { left: 0 };
|
39 |
-
var SLIDE_IN_RIGHT = { right: 0 };
|
40 |
|
41 |
-
|
42 |
-
|
|
|
43 |
|
44 |
-
|
45 |
-
|
46 |
-
|
47 |
-
|
48 |
-
|
49 |
-
|
50 |
-
|
|
|
|
|
|
|
|
|
|
|
51 |
|
52 |
-
|
53 |
-
return animate('h1', SLIDE_IN_DOWN);
|
54 |
}
|
55 |
|
56 |
-
function
|
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 |
</html>
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html>
|
3 |
+
<head>
|
4 |
+
<title></title>
|
5 |
+
<style>
|
6 |
+
* {
|
7 |
+
margin: 0;
|
8 |
+
padding: 0;
|
9 |
+
font-family: '微软雅黑';
|
10 |
+
}
|
11 |
+
body {
|
12 |
+
background-color: #000;
|
13 |
+
}
|
14 |
+
ul,
|
15 |
+
li {
|
16 |
+
list-style: none;
|
17 |
+
}
|
18 |
+
ul {
|
19 |
+
position: fixed;
|
20 |
+
left: 0;
|
21 |
+
right: 0;
|
22 |
+
top: 0;
|
23 |
+
bottom: 0;
|
24 |
+
margin: auto;
|
25 |
+
background-color: #f40;
|
26 |
+
width: 0px;
|
27 |
+
height: 0px;
|
28 |
+
}
|
29 |
+
li {
|
30 |
+
text-align: right; /*background-color: #f30;*/
|
31 |
+
transform-origin: left 50%;
|
32 |
+
position: absolute;
|
33 |
+
left: 0;
|
34 |
+
top: 50%;
|
35 |
+
margin-top: -50%;
|
36 |
+
transition: all ease 0.5s;
|
37 |
+
color: #666;
|
38 |
+
user-select: none;
|
39 |
+
}
|
40 |
+
.s li {
|
41 |
+
width: 420px;
|
42 |
+
}
|
43 |
+
.m li {
|
44 |
+
width: 350px;
|
45 |
+
}
|
46 |
+
.h li {
|
47 |
+
width: 280px;
|
48 |
+
}
|
49 |
+
.sx li {
|
50 |
+
width: 210px;
|
51 |
+
}
|
52 |
+
.d li {
|
53 |
+
width: 170px;
|
54 |
+
}
|
55 |
+
.M li {
|
56 |
+
width: 100px;
|
57 |
+
}
|
58 |
+
.Y li {
|
59 |
+
left: 0%;
|
60 |
+
transform: translate(-50%);
|
61 |
+
word-break: keep-all;
|
62 |
+
color: #fff;
|
63 |
+
}
|
64 |
+
</style>
|
65 |
+
<script
|
66 |
+
type="text/javascript"
|
67 |
+
src="https://unpkg.com/jquery.min.js"
|
68 |
+
></script>
|
69 |
+
</head>
|
70 |
+
<body>
|
71 |
+
<ul class="Y">
|
72 |
+
<li>2019年</li>
|
73 |
+
</ul>
|
74 |
+
<ul class="s"></ul>
|
75 |
+
<ul class="m"></ul>
|
76 |
+
<ul class="h"></ul>
|
77 |
+
<ul class="sx"></ul>
|
78 |
+
<ul class="d"></ul>
|
79 |
+
<ul class="M"></ul>
|
80 |
+
<script type="text/javascript">
|
81 |
+
var chnNumChar = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
|
82 |
+
var chnUnitSection = ['', '万', '亿', '万亿', '亿亿'];
|
83 |
+
var chnUnitChar = ['', '十', '百', '千'];
|
84 |
|
85 |
+
function SectionToChinese(section) {
|
86 |
+
var strIns = '',
|
87 |
+
chnStr = '';
|
88 |
+
var unitPos = 0;
|
89 |
+
var zero = true;
|
90 |
+
while (section > 0) {
|
91 |
+
var v = section % 10;
|
92 |
+
if (v === 0) {
|
93 |
+
if (!zero) {
|
94 |
+
zero = true;
|
95 |
+
chnStr = chnNumChar[v] + chnStr;
|
96 |
+
}
|
97 |
+
} else {
|
98 |
+
zero = false;
|
99 |
+
strIns = chnNumChar[v];
|
100 |
+
strIns += chnUnitChar[unitPos];
|
101 |
+
chnStr = strIns + chnStr;
|
102 |
+
}
|
103 |
+
unitPos++;
|
104 |
+
section = Math.floor(section / 10);
|
105 |
+
}
|
106 |
+
return chnStr;
|
107 |
+
}
|
108 |
|
109 |
+
function NumberToChinese(num) {
|
110 |
+
var unitPos = 0;
|
111 |
+
var strIns = '',
|
112 |
+
chnStr = '';
|
113 |
+
var needZero = false;
|
|
|
|
|
114 |
|
115 |
+
if (num === 0) {
|
116 |
+
return chnNumChar[0];
|
117 |
+
}
|
118 |
|
119 |
+
while (num > 0) {
|
120 |
+
var section = num % 10000;
|
121 |
+
if (needZero) {
|
122 |
+
chnStr = chnNumChar[0] + chnStr;
|
123 |
+
}
|
124 |
+
strIns = SectionToChinese(section);
|
125 |
+
strIns += section !== 0 ? chnUnitSection[unitPos] : chnUnitSection[0];
|
126 |
+
chnStr = strIns + chnStr;
|
127 |
+
needZero = section < 1000 && section > 0;
|
128 |
+
num = Math.floor(num / 10000);
|
129 |
+
unitPos++;
|
130 |
+
}
|
131 |
|
132 |
+
return chnStr;
|
|
|
133 |
}
|
134 |
|
135 |
+
function mGetDate(year, month) {
|
136 |
+
var d = new Date(year, month, 0);
|
137 |
+
return d.getDate();
|
138 |
+
}
|
139 |
+
</script>
|
140 |
+
<script type="text/javascript">
|
141 |
+
function rotate(selector, t) {
|
142 |
+
t = +t;
|
143 |
+
var lis = $(selector);
|
144 |
+
for (var i = 0; i < lis.length; i++) {
|
145 |
+
var rotate = lis.length - i + t;
|
146 |
+
lis.eq(i).css('transform', 'rotate(' + (rotate * 360) / lis.length + 'deg)');
|
147 |
+
rotate % lis.length == 0 &&
|
148 |
+
lis.eq(i).css('color', '#fff').siblings().css('color', '#666');
|
149 |
+
}
|
150 |
+
// 归零
|
151 |
+
if (t == lis.length - 1) {
|
152 |
+
setTimeout(function () {
|
153 |
+
lis.css('transition', 'unset');
|
154 |
+
for (var i = 0; i < lis.length; i++) {
|
155 |
+
var rotate = lis.length - i - 1;
|
156 |
+
lis.eq(i).css('transform', 'rotate(' + (rotate * 360) / lis.length + 'deg)');
|
157 |
+
rotate % lis.length == 0 &&
|
158 |
+
lis.eq(i).css('color', '#fff').siblings().css('color', '#666');
|
159 |
+
}
|
160 |
+
setTimeout(function () {
|
161 |
+
lis.css('transition', 'all ease .5s');
|
162 |
+
}, 200);
|
163 |
+
}, 500);
|
164 |
+
}
|
165 |
+
}
|
166 |
|
167 |
+
function init(selector, num, label, len) {
|
168 |
+
num = +num;
|
169 |
+
for (var i = 0; i < len; i++) {
|
170 |
+
showNum = label === '午' ? (i == 1 ? '上' : '下') : NumberToChinese(i);
|
171 |
+
showNum = label == '月' && i == 0 ? NumberToChinese(len) : showNum;
|
172 |
+
showNum = label == '号' && i == 0 ? NumberToChinese(len) : showNum;
|
173 |
+
showNum = label == '点' && i == 0 ? NumberToChinese(len) : showNum;
|
174 |
+
var rotate = num == len - 1 ? len - i - 1 : len - i + num;
|
175 |
+
if (rotate % len == 0) {
|
176 |
+
$(selector).append(
|
177 |
+
'<li style="color:#fff;transform: rotate(' +
|
178 |
+
(rotate * 360) / len +
|
179 |
+
'deg);">' +
|
180 |
+
showNum +
|
181 |
+
label +
|
182 |
+
'</li>'
|
183 |
+
);
|
184 |
+
} else {
|
185 |
+
$(selector).append(
|
186 |
+
'<li style="transform: rotate(' +
|
187 |
+
(rotate * 360) / len +
|
188 |
+
'deg);">' +
|
189 |
+
showNum +
|
190 |
+
label +
|
191 |
+
'</li>'
|
192 |
+
);
|
193 |
}
|
194 |
+
}
|
195 |
}
|
196 |
+
|
197 |
+
function getNow() {
|
198 |
+
var date = new Date();
|
199 |
+
var str = date.toLocaleString();
|
200 |
+
var s = date.getSeconds();
|
201 |
+
var m = date.getMinutes();
|
202 |
+
var h = date.getHours();
|
203 |
+
var sx = h < 12 ? 1 : 0;
|
204 |
+
h = h > 12 ? h - 12 : h;
|
205 |
+
var d = date.getDate();
|
206 |
+
var M = date.getMonth() + 1;
|
207 |
+
var y = date.getFullYear();
|
208 |
+
// 归零
|
209 |
+
d = d == mGetDate(y, M) ? 0 : d;
|
210 |
+
M = M == '12' ? 0 : M;
|
211 |
+
h = h == '12' ? 0 : h;
|
212 |
+
return { s: s, m: m, h: h, d: d, M: M, sx: sx, y: y };
|
213 |
+
}
|
214 |
+
|
215 |
+
var start = getNow();
|
216 |
+
$('.Y li').text(start.y + '年');
|
217 |
+
init('.s', start.s, '秒', 60);
|
218 |
+
init('.m', start.m, '分', 60);
|
219 |
+
init('.h', start.h, '点', 12);
|
220 |
+
init('.sx', start.sx, '午', 2);
|
221 |
+
init('.d', start.d, '号', mGetDate(start.y, start.M));
|
222 |
+
init('.M', start.M, '月', 12);
|
223 |
+
|
224 |
+
setInterval(function () {
|
225 |
+
var now = getNow();
|
226 |
+
if (start.s != now.s) {
|
227 |
+
rotate('.s li', now.s);
|
228 |
+
start.s = now.s;
|
229 |
+
}
|
230 |
+
if (start.m != now.m) {
|
231 |
+
rotate('.m li', now.m);
|
232 |
+
start.m = now.m;
|
233 |
+
}
|
234 |
+
if (start.h != now.h) {
|
235 |
+
rotate('.h li', now.h);
|
236 |
+
start.h = now.h;
|
237 |
+
}
|
238 |
+
if (start.sx != now.sx) {
|
239 |
+
rotate('.sx li', now.sx);
|
240 |
+
start.sx = now.sx;
|
241 |
+
}
|
242 |
+
if (start.d != now.d) {
|
243 |
+
rotate('.d li', now.d);
|
244 |
+
start.d = now.d;
|
245 |
+
}
|
246 |
+
if (start.M != now.M) {
|
247 |
+
// 月份变更时更新日期
|
248 |
+
setTimeout(function () {
|
249 |
+
$('.d li').remove();
|
250 |
+
init('.d', now.d, '号', mGetDate(now.y, now.M));
|
251 |
+
}, 500);
|
252 |
+
rotate('.M li', now.M);
|
253 |
+
start.M = now.M;
|
254 |
+
}
|
255 |
+
if (start.y != now.y) {
|
256 |
+
$('.Y li').text(now.y + '年');
|
257 |
+
start.y = now.y;
|
258 |
+
}
|
259 |
+
}, 1000);
|
260 |
+
</script>
|
261 |
+
</body>
|
262 |
</html>
|
263 |
+
|