|
: _/ a+ a: G. ?! K
1 说明：1.1 了解vue的基本知识：网页显示方法和js结构。1.2 如何获取动态时间。  ( i5 X' r2 _ m: `
2 效果图  2 ^1 e0 L) E9 \. k) O( h0 _. M
3 完整代码：vue.js数字时钟本地时间代码
2 n! q1 R9 }" {2 p html, body {! e! S! _6 U; A; T I- c( T" I
height: 100%;
" m8 d! m& t$ L% X" z' I! v: i }
& c: ?0 W7 H$ [. H body {
$ a5 G/ m8 ~( L+ _: q+ p8 m /*整体背景颜色渐变效果设置*/background: radial-gradient(ellipse at center, pink
6 D: T& V. J" \- a% ?- G 0%, blue 70%);
# @/ @$ _) q" |' g( w( j background-size: 100%;
8 w! @4 j6 d$ t" O+ y1 u, A E }
+ C( v6 M+ l9 z( _: H, A. \ p {
1 ?3 j8 D: q, B6 ~ margin: 0;, \- S: ~& N, n' D2 I
padding: 0;
, a, T! c% {5 D2 R* \* E% ] }
, G+ T( C- Z" N% S X4 o- L #clock {
0 \ }! Q3 R1 z# \/ v* T% i) { font-family: Share Tech Mono
0 A0 S) ~6 z& ]; o5 n! g , monospace;
1 E2 Q2 v1 H; c8 h text-align: center;
+ |, D, }9 q. Z: t( K# w% s" U7 R position: absolute;0 Q2 f+ H/ a" e, \# }' T! m' b+ \ M
left: 50%;6 N! _2 h" X( r. D
top: 50%;! H/ h# n# G! L2 ]( P
-webkit-transform
. i; h8 {+ }% U, y5 A& J0 F : translate(-50%, -50%);
4 u0 z5 o E" q# y transform: translate(-50%, -50%);
& K$ X& o- E7 Y. Z) g /*显示文字颜色*/color: lightgreen;* p! @0 n. z& F0 d
) x+ z. O+ B3 A) c) o' w
- k8 D4 ~( G( F; J text-shadow: 0020px#0aafe6, 0020pxrgba(10, 175, 230, 0);
4 w& G- `% Q) V$ n/ ` }
5 q7 p m2 x9 p4 ^ #clock.time {0 }: E; t6 i( s7 ]/ `4 C
letter-spacing: 0.05em;! A7 I4 V. @& r. K) G
4 ?) x! O. U) Y* o2 E. B8 ]! \ font-size: 80px;+ ~; a9 x" T+ V: I9 G" X
padding: 5px0;+ }. D2 ]& s; S
}
9 V& C3 a/ e1 s$ U: N #clock.date {
" ? T% x5 L0 i& h/ f9 p3 H letter-spacing: 0.1em;7 ^% q5 c& W6 j
font-size: 24px;
5 X7 v& T0 ]2 ]1 n+ s: N* H2 m }6 F; l- }5 N6 E* c m
#clock
& J& a3 e4 i( ]# r .text {
w, c# |$ r: N1 h letter-spacing: 0.1em;
4 X5 @* L% b: S font-size: 12px;
M/ k$ s# v- @/ ^+ U$ K% b font-style: italic;
& y B! u1 J+ ?. K5 Q' T padding: 20px00;% x4 b9 D+ e, P/ @
}
7 |: \# G+ f6 e1 |8 Y, N 0 P8 F. p! j* [$ F9 D
>
- }. {1 n. L. g. N0 q% \ 数字时钟 * v3 |- Q9 ], i2 `0 c9 v1 }- a
>{{ date }}{{ time }}// vue格式的js文件和js文件格式差不多，采用倒装法，与python不同--> var clock = new Vue({
7 y% ^, `& Q: V/ Z // el就是对象：上面div里的id内容，注意#符号el: #clock,9 z' H! K5 Q; ` f* p: x
data: {
. y6 A" y! `6 o // data里面的内容就是class的内容，但是因为可变所以先是空的 ' K8 [6 N6 t% X7 a2 d
// 先各自定义一个空的，后面利用函数获得值time: ,; I4 Q* l$ H# z0 J6 }' Q* V; Z: I
date:
3 k8 q7 D" ~* B# P: L! h4 o }, L5 } d# ]& _( x1 O! O9 W
});) z4 X+ w0 k; v2 \6 U% {6 N1 J
/* Model层 */var week = [星期日, 星期一, 星期二, 星期三, 星期四
/ I$ u' r& q0 J9 I , 星期五, 星期六];6 W5 B& A9 v7 c. C" p
var timerID = setInterval(updateTime, 1000);) f5 f/ e$ S C3 m& p$ ?. y
// 先定义一个空的时间更新函数
, R/ L1 v+ g0 O7 S1 ~- j updateTime();& e R; @4 s& z) q
// 再定义时间更新函数，获取动态时间值
& [5 ~. ~- O0 \; F& l functionupdateTime() {
- K9 v6 o5 C6 |. t& k& S+ d // 定义一个cd变量获取动态时间var cd = newDate();
/ g4 l. ]6 h& r( F" W$ Q // 注意这里的time和date的获得值，就会赋值给上面的data里面去；2是显示2位；4是显示4位 5 o, u- G+ \8 J9 `" j$ ]
* m- R" a; j& \+ H, Y: N clock.time = zeroPadding(cd.getHours(), 2) + : + zeroPadding(cd.getMinutes(), 2) + : + zeroPadding(cd.getSeconds(), + Z: X* c) W) @% f* ^/ k
2);6 L& V0 D' T* c3 t( B
clock.date = zeroPadding(cd.getFullYear(), 4) + - + zeroPadding(cd.getMonth()+1, 2) + - + zeroPadding(cd.getDate(),
1 `/ u9 k9 [9 J7 ?1 O 2) + + week[cd.getDay()];; F0 n: G0 P i, C6 B2 Z
};
" w) r4 |1 e2 B" z, d // 定义零填充函数：就是没有数值就是0来填充functionzeroPadding(num, digit) {1 `7 T( p* j. K
var zero = ;9 u% v" _; D9 P [# S1 }! {2 J
; b& K) H) {, {% [3 W* Q3 t# k for(var i = 0; i < digit; i++) {0 Y: E$ q- Y$ d# h2 m$ L( t2 S% H. E
zero += 0;1 A% ^2 q$ M2 S# @. C! v
}
Z0 I- M: U h4 p$ V6 {) u return (zero + num).slice(-digit); ~, |; X' `; ~0 ]$ M( ^6 `
}. p6 w' W; h/ M4 J
7 m1 d3 W$ h8 p. X& z' E
) _2 j0 t4 Y' O
, V" Y0 T% W0 y( x, m' V+ T+ O( E, Z" F: u4 m# N; z
" i( z# k# }$ O) e/ y( N# b
| 
