|
# M. O$ ^# ^0 C/ x& d3 X7 d 1 说明：1.1 了解vue的基本知识：网页显示方法和js结构。1.2 如何获取动态时间。  W8 [9 g( G5 s
2 效果图 
. { q9 k9 ]& Z% ]5 o 3 完整代码：vue.js数字时钟本地时间代码 7 p3 U5 w2 ~" H' h6 v, T
html, body {
: N W' S. O2 h# t J7 m. } L height: 100%;
0 B5 ~% V9 Y7 E; g! s# z }
/ l& j( p$ o: G0 }( o6 [ body {8 ^* c o7 B6 {- A% o* {5 j
/*整体背景颜色渐变效果设置*/background: radial-gradient(ellipse at center, pink
# G: r& O3 s$ Z; `6 ^ 0%, blue 70%);) e5 E/ c9 P6 b% h: y1 d3 u+ f
background-size: 100%;. u: A, R* U& z& R: ~0 P
}1 `; f' X7 d: W" w! l$ [1 |( A
p {
; t3 v4 j% G3 f$ N8 T& h! L margin: 0;9 Y/ B j) {/ D n
padding: 0;
' ?' ^. ` \7 D; l }: C: m; ]- v: B3 j8 x, w
#clock {% v% f' R, e! q5 N3 _7 u
font-family: Share Tech Mono 2 Q1 J. E3 v* p4 `! y! R) \; d
, monospace;
% q; u& q# w1 l( E. s7 ?$ x3 H! L2 K text-align: center;# |$ T2 p( J# A& m) C: a1 i
position: absolute;- M0 j5 L6 x- D4 S8 R3 I
left: 50%;
M6 W' e8 }5 r5 ^, V- E" ]' y top: 50%;
3 E! p$ M2 |, i" b -webkit-transform
2 F" J+ [, _4 K. K9 u0 w2 @ : translate(-50%, -50%);
o' D* l8 ]! ? transform: translate(-50%, -50%);
v4 ^5 i) @, y/ r9 m( ~, G. ~ /*显示文字颜色*/color: lightgreen;3 |7 g2 v! d( U5 p# ^
) D4 A% N5 E* o; T2 S5 {" R4 k ' t, g8 U) @$ `0 i( g
text-shadow: 0020px#0aafe6, 0020pxrgba(10, 175, 230, 0);
/ l) ^% d! \2 o. Z/ m' q& B, k& _ }
3 h S+ S) j4 T. M! Q0 O #clock.time {0 ~# \7 e6 t( X. l2 W ?& T: N( c
letter-spacing: 0.05em;
( n# _) B5 B: X% Z6 L/ N
0 T. I g3 \ _ ~2 F$ l font-size: 80px;
1 W+ ~% x: a7 L+ S( ^ padding: 5px0;
7 q* i/ x! p6 M) f; Q }
. P& `9 m" h4 P6 I3 m( a2 u0 x: e #clock.date { B% y. E. D' |7 Q) ]% D8 O
letter-spacing: 0.1em;
" H2 C# F# ?& V+ {2 D x7 s font-size: 24px;- `+ @; I( o* l" A. h6 I
}5 ]1 _" A/ E) ~( ^$ Z. X- P- ~
#clock % G/ x' o! C4 B
.text {: t3 f T! n: R, d5 g" q
letter-spacing: 0.1em;' e' C {7 e0 Z! i) B& f- W
font-size: 12px;( Y. }6 E+ T" \% N. [
font-style: italic;. k* \, M8 \" u7 t
padding: 20px00;
6 a4 c+ P A4 x4 y8 ?4 V" @ }
( B( f/ X8 b& q+ ^2 y; s5 B1 C
; `4 Z0 T0 z# e1 N > B7 W" J/ ?7 U, w$ j
数字时钟 ( @* p4 R3 l, @+ q
>{{ date }}{{ time }}// vue格式的js文件和js文件格式差不多，采用倒装法，与python不同--> var clock = new Vue({' f/ R1 Q7 |; Y( T: A4 g
// el就是对象：上面div里的id内容，注意#符号el: #clock,5 R; @7 y- @& z/ T" {
data: {& B( q6 M* \9 c2 U5 o) q
// data里面的内容就是class的内容，但是因为可变所以先是空的
* P8 F/ L$ N6 [# a // 先各自定义一个空的，后面利用函数获得值time: ,, ^/ ]& g y8 x1 ^2 t
date:/ c( L- N" M2 W2 R
}$ o( b4 O+ y2 _/ I) C; B
});3 ~/ V- X6 I% o4 R7 W
/* Model层 */var week = [星期日, 星期一, 星期二, 星期三, 星期四 # P% ?( a$ r# r1 P
, 星期五, 星期六];( A& m# K' ~! Y6 o* r
var timerID = setInterval(updateTime, 1000);
7 Y5 N1 p3 _) q8 l // 先定义一个空的时间更新函数 A. |( z/ X' G N' f" J, D
updateTime();
" H" w/ Z9 Q, M# h# f1 p# U // 再定义时间更新函数，获取动态时间值 ; {# D( j s9 I8 ^: ]$ a
functionupdateTime() {; ]9 I p8 ^5 v4 a: J0 @, r
// 定义一个cd变量获取动态时间var cd = newDate();
8 K9 }, r( [5 b // 注意这里的time和date的获得值，就会赋值给上面的data里面去；2是显示2位；4是显示4位 ! |3 P& w9 A# y; X5 u' u3 j
F" u6 B. J+ I2 U
clock.time = zeroPadding(cd.getHours(), 2) + : + zeroPadding(cd.getMinutes(), 2) + : + zeroPadding(cd.getSeconds(), " f7 H* E( V$ ~2 n9 O% g% b8 {" f. h4 X
2);1 W3 G+ O9 J; S
clock.date = zeroPadding(cd.getFullYear(), 4) + - + zeroPadding(cd.getMonth()+1, 2) + - + zeroPadding(cd.getDate(),
& K( r) D! c4 S- M3 B1 ]- A 2) + + week[cd.getDay()];; w8 ~7 W; b2 j5 Q
};) e* y. {5 X2 S; c- a
// 定义零填充函数：就是没有数值就是0来填充functionzeroPadding(num, digit) {
) _9 `' L5 `& ~2 j2 r var zero = ;
8 n' k8 p8 ]: G- Q) ?% } . b" |% s$ w S+ e1 t
for(var i = 0; i < digit; i++) {
2 g% x( h$ Z4 G$ h: ]9 h zero += 0;7 y, K- _) g$ T9 X8 o
}4 X8 U# j8 }9 F& A
return (zero + num).slice(-digit);
2 |0 o( p3 @# [4 J S/ _ }& }+ Q( Y- ] F6 g
* _0 P A! [4 s+ j$ n1 Z% l
: k* ~8 ]# x: E7 E
. ^; i F, c8 L j8 ? ~
* w% r7 F* z6 A* @7 ~8 t* J. U& C( ^2 @- @* M+ Y
| 
