|
& U8 t# J( H' ~4 X7 P2 ?
1 说明：1.1 了解vue的基本知识：网页显示方法和js结构。1.2 如何获取动态时间。  6 {! T$ e6 ~* o5 E+ e
2 效果图  ) R4 z- T1 A% @# N( `! `( J
3 完整代码：vue.js数字时钟本地时间代码 & j, p% [0 q0 p$ A
html, body {
6 C, v3 P: x$ T, l/ \( L height: 100%;; g% F! `+ x9 }3 N% F
}3 Y' d7 D4 I; ?* R# U! J2 ~, T
body {& x w' @# K/ ]4 E
/*整体背景颜色渐变效果设置*/background: radial-gradient(ellipse at center, pink
0 x) [# p5 A( l! a7 g' w0 M 0%, blue 70%);% J* T3 F2 m& x
background-size: 100%;% F& \7 `5 J: n, [* |+ [9 B4 }
}) g/ | B3 N8 F) N! h
p {
/ D* E( Y: |, N/ G5 A margin: 0;2 D2 ` I; c. o0 S5 `1 p
padding: 0;" A0 }8 q7 F/ G$ z
}
0 I1 i( y9 w! n6 W5 Y #clock {
. M9 ?3 B; |9 | j8 e' v) J1 j! L font-family: Share Tech Mono 1 w3 ^( C1 X( A7 t* ^1 J; p
, monospace;
' e5 }- V. o5 e; H7 M- } text-align: center;/ `! S: d" z6 Y( z
position: absolute;
2 |0 _ [ u& n, z, k left: 50%;1 J/ q" A" A9 W3 ]
top: 50%;( Q; W- m }7 r6 l; n
-webkit-transform * d( r4 j2 }. G. Z; `$ S+ s; w
: translate(-50%, -50%);, C- `, W$ ^6 i, V
transform: translate(-50%, -50%);7 b$ u1 C; [, ]$ k/ ^
/*显示文字颜色*/color: lightgreen;; t6 F4 K; A' D' e; L- X+ Q
. p, u0 K1 u: s7 y9 r+ P- x
# _5 e9 z- y# ^, m text-shadow: 0020px#0aafe6, 0020pxrgba(10, 175, 230, 0);
Z; o. A2 O: q }
" @! d2 d! p1 d/ ]; Q #clock.time {# { n7 N/ |. }4 H; R: E+ [! C
letter-spacing: 0.05em; Y! K% i! I, A1 Z9 {9 a* s! S
1 m, w" m5 `! S, L7 s/ f' ^" O
font-size: 80px;
8 N) b P, |% D0 ~/ e0 s- Y- A: A' n padding: 5px0;
" S$ H% _5 _& o" U' L7 M- j# p2 K }+ g) P" |7 x# s8 I
#clock.date {; T" w6 i0 t4 P4 }
letter-spacing: 0.1em;
' Z3 p/ U% [! ^6 s font-size: 24px;
9 h9 B3 ~1 D6 l+ [ }* B2 [; y+ D% ^9 h
#clock $ P3 y! h0 Y" }( t. g& D! a8 @
.text {
# Y( s* a: p, p6 w2 F( l }# g8 q letter-spacing: 0.1em;+ f; v ]; g0 a+ \8 v! X! ?2 m' A
font-size: 12px;) j8 u" m, g5 d" t6 H1 l% M4 D1 N' N
font-style: italic;+ l* {0 e' W# {/ A
padding: 20px00;7 M0 z, N" Z( J
}. m D/ W- E. z7 }: a0 k
% W+ B9 J5 `; o- b* \
>
. s4 z# a' C3 ~, W 数字时钟 1 r8 K( u; v( T; y7 P3 t6 z
>{{ date }}{{ time }}// vue格式的js文件和js文件格式差不多，采用倒装法，与python不同--> var clock = new Vue({
0 X; L# Z/ t i' W2 h" B) u // el就是对象：上面div里的id内容，注意#符号el: #clock, J$ ~0 a h& r6 p
data: {
- a# A2 |5 e" p, |. U6 h // data里面的内容就是class的内容，但是因为可变所以先是空的 ; E) L* S& }; Y5 E8 ^
// 先各自定义一个空的，后面利用函数获得值time: ,* S6 l r" }$ C. H" P7 ]* a
date:
, t8 _1 a2 P2 N5 r! W5 j O }
* y3 m7 h* U8 D6 z& u });
& ]) |) `0 a/ a: P4 {% o /* Model层 */var week = [星期日, 星期一, 星期二, 星期三, 星期四 , T$ u8 C! a" N ^. T; g
, 星期五, 星期六];1 D0 E4 c0 l9 N
var timerID = setInterval(updateTime, 1000); k% F% E; t+ l6 E2 T& l7 U
// 先定义一个空的时间更新函数& k) ]# C7 e% q0 G6 E
updateTime();2 O5 P6 R( E6 w$ k
// 再定义时间更新函数，获取动态时间值
G7 Y4 c7 R+ K1 v# i# P2 E functionupdateTime() {. [* n, B1 m9 ^; v r, r3 b) o. u5 K. _
// 定义一个cd变量获取动态时间var cd = newDate();
& V# j6 U" k0 H/ o // 注意这里的time和date的获得值，就会赋值给上面的data里面去；2是显示2位；4是显示4位 % B) Z7 ?3 N2 A9 p) Q
9 ~1 Z% d. W0 E* s/ V3 T! h clock.time = zeroPadding(cd.getHours(), 2) + : + zeroPadding(cd.getMinutes(), 2) + : + zeroPadding(cd.getSeconds(), 7 g( S7 O5 X/ o( T% x# S3 d" M/ w
2);" { R% m! Y6 ?" `- t% n; K* Y
clock.date = zeroPadding(cd.getFullYear(), 4) + - + zeroPadding(cd.getMonth()+1, 2) + - + zeroPadding(cd.getDate(), 9 Q& \- Z" a2 y$ E/ Z
2) + + week[cd.getDay()];
* Q2 ^6 Z V6 a* p8 F+ m };- S4 H8 }& j3 W- @3 ~
// 定义零填充函数：就是没有数值就是0来填充functionzeroPadding(num, digit) {9 S& E6 q- S4 x8 v( |
var zero = ;9 x5 ~$ {/ f1 c3 Z3 B
3 ]8 j1 v w }3 N for(var i = 0; i < digit; i++) {1 n5 r8 `8 H/ I5 ^. \
zero += 0;! O: j! w) ]5 k8 I. v, K' m
}
8 k c9 f7 [% {9 i return (zero + num).slice(-digit);8 \% t e+ f4 l
}9 e* J, r" m2 C! b
4 q/ C% z: N* M- ^% x
. x: F/ J- L& R9 G9 j: \
9 S8 E- d) S& S: B `+ H; S( S6 f7 X2 l+ \5 ?" L1 A6 d
+ b# v) p0 l7 ] s, q
| 
