|
' i# ?) P! u0 ?6 c; b 1 说明：1.1 了解vue的基本知识：网页显示方法和js结构。1.2 如何获取动态时间。  6 R/ |5 P( c) I6 j5 w# N* r7 s5 F0 A" J
2 效果图  * {9 s3 [5 Q" V# `% T
3 完整代码：vue.js数字时钟本地时间代码
) @: U! _, x6 J) q- b html, body {
( N) m: {) r: j7 n) s4 s height: 100%;
7 Q, l. o: U3 I- k. T/ o$ ?: Q# F }
5 S: Y* T1 c2 U2 N/ u body {* a3 V9 a6 d6 @6 H" Z/ W
/*整体背景颜色渐变效果设置*/background: radial-gradient(ellipse at center, pink % C& y& R% C- M5 q& B9 x) F
0%, blue 70%);
% @/ f1 Z# j; d. E9 {0 Z background-size: 100%;2 A, f$ F5 h; M# m. G3 t7 \
}
# J3 V8 T8 @# c8 ~" a p {! S4 m V( d) l" }2 S) u/ Q* ]! t
margin: 0;
: b, U5 {$ G' p% ^ padding: 0;
& Z; |7 G [5 Y% ^6 U; x7 W8 S% t }
% H( T) A+ ~6 ]4 h7 j #clock {$ {2 j. J* f% H0 r
font-family: Share Tech Mono
. v: f" O( u" E. Q4 c( I" X) ? , monospace;# E' Y0 p A/ B2 L- u- W4 J
text-align: center;
' o, y9 T" x1 ~# T position: absolute;
2 H N- H* e R) a left: 50%;
/ ~/ X+ o$ _- c0 @0 @: C# h6 j) \' p. l top: 50%;' l- w' }3 ~+ D
-webkit-transform 6 k8 n% a1 d7 J0 \/ K/ }
: translate(-50%, -50%);
1 A3 o' a9 F# S/ L" i transform: translate(-50%, -50%);5 D4 `1 Z0 c+ Z4 ]7 f
/*显示文字颜色*/color: lightgreen;
; }% G3 R" H, ^+ J$ H
! M7 Z7 y6 P# S j" F1 A- B* e% r
1 `! T7 U! V; E1 f5 l text-shadow: 0020px#0aafe6, 0020pxrgba(10, 175, 230, 0);6 r1 `9 V7 i0 z; h6 L! S
}4 a. l/ \7 z. [4 O# R
#clock.time {- } m) }( I( ?: g0 H2 v5 z
letter-spacing: 0.05em;
. \* p3 S7 T& y; a$ A3 X9 M( | 7 f- }; S1 l+ }* U2 r6 O+ X
font-size: 80px;4 F0 |/ |" |7 `0 H4 h6 m
padding: 5px0;! K" G6 m% o* W3 i* T' G1 P
}- n$ W* P2 W+ u
#clock.date {& ^- K m% j; t4 G+ d/ B
letter-spacing: 0.1em;
" [0 @" e9 T4 R C4 X5 B1 R font-size: 24px;
' L/ O# ?+ C* X, z) D9 j }
8 m1 _: M X4 P( @0 f' n #clock
7 W$ {4 G, D2 |0 g .text {" i! z( K4 X9 `. o6 w
letter-spacing: 0.1em;! d1 E/ j4 \! D
font-size: 12px;
* X7 ]/ \* i9 f: h9 }: _ I font-style: italic;
6 J9 w! M; S0 d" f M7 ~ padding: 20px00; t1 F2 { V/ [) B( E
}/ e- O" O; W) Q( C" H4 ]
2 R5 X1 l- c7 z8 i, |
>
0 ~* V; E4 C! ~, H) n) N 数字时钟
8 X" n4 c* M$ {7 d >{{ date }}{{ time }}// vue格式的js文件和js文件格式差不多，采用倒装法，与python不同--> var clock = new Vue({- Q; S6 q* \$ m8 y* E6 i& S' e0 f
// el就是对象：上面div里的id内容，注意#符号el: #clock,+ p' d2 Y* a/ o0 Q K4 C
data: {! m+ L" q/ {2 w3 l% F
// data里面的内容就是class的内容，但是因为可变所以先是空的 # h0 j; }+ g# e4 E. a( O& y- M
// 先各自定义一个空的，后面利用函数获得值time: ,
% A$ D7 ~0 I* G7 P, O date:
6 H. D/ U5 n6 V }, _2 b: q7 @2 g/ j+ }; n
});; A/ l) A ]4 Q7 G2 | E9 z: c
/* Model层 */var week = [星期日, 星期一, 星期二, 星期三, 星期四
1 J9 L* Z9 T: F# @: V1 s , 星期五, 星期六];
$ P+ _7 W$ y; B2 R5 E& t# z var timerID = setInterval(updateTime, 1000);
- F b: e2 t. Y3 }. n // 先定义一个空的时间更新函数
$ V0 O ^1 }" Q, E updateTime();
# {+ _4 {, `7 V! v // 再定义时间更新函数，获取动态时间值
( W0 S! g/ b1 D& f6 x functionupdateTime() {0 p. F" Y9 t3 k9 F# q0 A
// 定义一个cd变量获取动态时间var cd = newDate();
# {7 S# N1 q, [6 ^- o0 Z // 注意这里的time和date的获得值，就会赋值给上面的data里面去；2是显示2位；4是显示4位 0 E8 k9 p% Z. L" f+ @% c
5 ~# J R8 f# Q6 @ clock.time = zeroPadding(cd.getHours(), 2) + : + zeroPadding(cd.getMinutes(), 2) + : + zeroPadding(cd.getSeconds(),
t4 b( C7 J! r6 j: O/ p 2);' F2 `- @ b9 \1 |6 _/ z! i
clock.date = zeroPadding(cd.getFullYear(), 4) + - + zeroPadding(cd.getMonth()+1, 2) + - + zeroPadding(cd.getDate(), # @; r; T1 u) `1 F$ F% g( B! I
2) + + week[cd.getDay()];. a, R! N2 m) |
};1 O7 i9 j! I3 |; k9 n% s0 ?& [! L
// 定义零填充函数：就是没有数值就是0来填充functionzeroPadding(num, digit) {7 G6 v! E$ \5 T
var zero = ;1 I& y9 z" U6 Y2 D7 @$ ]
5 e3 n- }/ I( b5 G; l/ X2 } for(var i = 0; i < digit; i++) {
' ]% j8 P" h8 U% X, ] zero += 0;
/ w' N( `, V3 `+ u" E( K; l }
) ~# w3 K) }% X return (zero + num).slice(-digit);
; T$ @3 l3 w3 C3 g2 d }, }$ i& f. w, c/ r- X1 t) {4 t
! ^2 j+ V1 C, i K
5 x0 Q p+ s Q ' {7 ~; L6 P+ M' I4 x
) H" F6 ]# G0 {0 I, M$ e4 A- ~5 p% i& p! \# E
| 
