|
2 |* B8 _" }, ~$ w
1 说明：1.1 了解vue的基本知识：网页显示方法和js结构。1.2 如何获取动态时间。 
( h ?- i7 d0 \! f$ x" }3 ^ 2 效果图 
5 |. |$ e0 k# O 3 完整代码：vue.js数字时钟本地时间代码 2 Y8 h4 a* _: k5 B
html, body {) {! U x* `: S. ?5 q
height: 100%;) b( b# q9 Q8 N+ H# Z; M
}% v' @6 P3 `$ Z( f5 x5 l
body {! v7 u: o X+ i# D1 _
/*整体背景颜色渐变效果设置*/background: radial-gradient(ellipse at center, pink 6 E* R1 N' O0 {
0%, blue 70%);3 a8 S2 O; u1 q" o7 }7 P
background-size: 100%;5 [% f8 J+ h" n: ^ Z! e- o& e
}
; J% ?+ O/ A* K/ Y/ Q+ ] p {; T) F+ f+ G5 e: D3 s
margin: 0;) K3 {/ @2 c Q4 n$ l4 L+ L
padding: 0;! T* a' ^5 M* v% {5 S' o
}7 R& ~4 p5 ?* U; e' j2 }* f
#clock {
% [' a* K* [& e) X; x5 n% v font-family: Share Tech Mono
2 v$ X+ I8 F7 M' A7 r , monospace;
5 u" b* v: r: K/ i6 s( ]5 e1 c text-align: center;
% k8 U' T2 o" S8 f" B position: absolute;9 x1 ?! n' w: q1 e1 K
left: 50%;
$ g& m$ W; [) B! o& K6 f* v top: 50%;
7 F7 H V2 ^* | w) @$ {3 X0 v -webkit-transform
4 t" P( ^9 U4 [ : translate(-50%, -50%);
0 \$ M, `) f) ?- J4 K8 q ~2 |$ E transform: translate(-50%, -50%);
$ h; _ K( T) H0 N /*显示文字颜色*/color: lightgreen;
8 w- M, y1 c# f I2 N7 e7 O6 n9 X
R4 d- ^+ M' H/ { o1 l4 ^
`& ^' R1 B* _- i: q) W9 E text-shadow: 0020px#0aafe6, 0020pxrgba(10, 175, 230, 0);0 H; ~! k$ t+ X4 N) d! Q. g* s' X
}
2 p/ z A3 @9 l1 b5 n2 }$ d3 w #clock.time {3 a' u- _4 ^, |7 b. U
letter-spacing: 0.05em;7 @. H: z' ?/ ^
7 g+ I4 Y- b/ s font-size: 80px;! K! V# J* N- z2 Q
padding: 5px0;; f) S) n9 _0 N6 {2 Q/ D
}
% S0 `: N3 j8 j4 S. F# Z9 m #clock.date {
' R5 \3 H" |* F& d letter-spacing: 0.1em;3 M. {3 g3 x0 ?. Q2 d; v1 N9 V
font-size: 24px;
& X7 u1 t5 z1 V$ h8 G6 H0 g }
* k1 O9 V" S5 r3 x0 C& M* n #clock 8 i! L5 e7 _. p; \* v3 _; G
.text {
; O- i q7 @1 s7 v! x: ~7 P) z7 V" K. s- [ letter-spacing: 0.1em;2 d# A- U1 A- G. v) E4 v
font-size: 12px;' J( O0 w; K0 Y
font-style: italic;+ J5 _7 x. V6 U7 H ]/ Z3 s
padding: 20px00;- ^9 \' ^+ d, a2 p& ?
}0 L8 @" x" P4 r9 l# q7 X- y' i, I
' y$ s3 f% Q" G9 ~: U5 b
> 2 K: H* I8 L) w7 N6 r2 m
数字时钟
. z% m; o( m1 d1 N9 P >{{ date }}{{ time }}// vue格式的js文件和js文件格式差不多，采用倒装法，与python不同--> var clock = new Vue({
% B A% ?$ }1 i" a4 Y9 o // el就是对象：上面div里的id内容，注意#符号el: #clock,7 K {8 ^) j6 r
data: {
$ R5 j6 E! s+ T M- P // data里面的内容就是class的内容，但是因为可变所以先是空的 ) e. b& Q0 o) A- H; T. G
// 先各自定义一个空的，后面利用函数获得值time: ,6 q$ k2 y' n- _, s# n
date: w+ |5 g0 ?2 _' a! e
}
) L/ d" G6 x) g: d });- m, X+ F' y! K: C
/* Model层 */var week = [星期日, 星期一, 星期二, 星期三, 星期四 7 Q3 I N/ J" i/ i1 R& ~% a$ h
, 星期五, 星期六];1 |: e4 i# Z: H z) ]3 c
var timerID = setInterval(updateTime, 1000);2 g) C `4 h6 ^# w* [7 s$ m
// 先定义一个空的时间更新函数1 \- r, J1 z; y9 R* E8 V1 q4 A) z
updateTime();
/ r/ [8 ]/ t' Q8 F* B // 再定义时间更新函数，获取动态时间值
" h# R; b9 d/ r/ ~/ t functionupdateTime() {4 F9 f ^; }& s) t5 E
// 定义一个cd变量获取动态时间var cd = newDate();7 i0 j( h2 |" \( S- F
// 注意这里的time和date的获得值，就会赋值给上面的data里面去；2是显示2位；4是显示4位
" k& ]1 u1 O. l: A; Q; c
; e1 R4 m6 W0 y1 W( J( m8 J clock.time = zeroPadding(cd.getHours(), 2) + : + zeroPadding(cd.getMinutes(), 2) + : + zeroPadding(cd.getSeconds(), 5 Q) ~9 H+ b- n H! ?) Z* x6 o
2);
( x7 O3 R1 D; ?0 t: N clock.date = zeroPadding(cd.getFullYear(), 4) + - + zeroPadding(cd.getMonth()+1, 2) + - + zeroPadding(cd.getDate(),
/ z8 M- D! m5 F& I" ^1 a. L& q4 a 2) + + week[cd.getDay()];
9 ~0 J/ _* |8 _- @9 X/ E };7 ]8 n, P; d# C( O
// 定义零填充函数：就是没有数值就是0来填充functionzeroPadding(num, digit) {3 T9 R: Y# N' I
var zero = ;+ \3 U, U4 E6 k% A3 n' i" J. }
- x8 m \/ q% ^- N$ m# z1 n for(var i = 0; i < digit; i++) {
$ }! e; m$ Y; L, W7 m1 M" u; _ zero += 0;$ R# k/ D: ^, b3 y+ }, G
}
A3 { D0 b* P" w return (zero + num).slice(-digit);
/ [4 ?7 }+ \. x, R2 z# s }, s U1 ~( i7 H: ~9 V* [+ L4 n
% K! l1 Q% c4 K$ W
& A6 {8 j& _2 }9 ]4 @5 }5 G' h 1 E/ N* I' x3 L
) G; w- R) i3 H3 w
`8 S9 t& }7 ?2 x. Z
| 
