|
; k1 O- c" l# K+ J 1 说明：1.1 了解vue的基本知识：网页显示方法和js结构。1.2 如何获取动态时间。  + B, _8 }9 Q, D3 c( O2 E
2 效果图  " o& ?' y4 f, g& S |8 f
3 完整代码：vue.js数字时钟本地时间代码 7 } N0 @" ]' r3 l( b# V& f/ n
html, body {7 m' t7 n1 ?, r F% _* b
height: 100%;; Y# k# I4 O9 `8 ~ F6 d
}
# |5 G1 E1 |3 A9 p9 ?2 W/ g body {7 L, x# [. l# E1 H5 q
/*整体背景颜色渐变效果设置*/background: radial-gradient(ellipse at center, pink
. R1 F9 z$ X# U% }6 t8 Z4 U 0%, blue 70%);
7 a% K; A& x; \& ` background-size: 100%;8 `6 G* D' f; ]) j# y5 i
}
$ z# x/ D0 q9 a" `$ y p {
7 a+ B- ]- }6 j5 {4 {" s margin: 0;. w) B( i; w1 r9 T) P& J$ @% r
padding: 0;
- X# }- S- U8 k! f }
" ^% J9 [/ `+ H6 Z, X0 J9 b #clock {
2 L% q6 m8 |& |3 E; i! q1 K D# O font-family: Share Tech Mono
3 Y2 N* g" C+ x! k0 b& u) |. C , monospace;
: [* V3 K- i& D! n; f O+ n1 V3 N' H text-align: center;4 s3 M& Q; T% M. C& Z3 A
position: absolute;
8 h8 T; J% E: y! u left: 50%;7 Q' s+ ?* r7 A, [& C, N
top: 50%;
# U! c/ E( e7 A8 C. U+ t -webkit-transform
$ V% @9 R6 }0 Q1 S# W( n/ b : translate(-50%, -50%);9 v+ O8 Z( A1 F n/ y
transform: translate(-50%, -50%);
' j! ^8 v0 c+ y0 q' n /*显示文字颜色*/color: lightgreen;; { Z! T% h# ^$ L' n
4 n9 h7 W+ A1 p. @0 A$ Z
2 W: G2 i- i0 X2 O text-shadow: 0020px#0aafe6, 0020pxrgba(10, 175, 230, 0);
8 l5 K( {4 W& v: u9 N6 I: {0 Y3 `- A }
1 P% f. W- ~# n x; S #clock.time {
( ]/ ?; h9 i4 f! \3 X/ k letter-spacing: 0.05em;& e& d; k9 W, Z# V G
8 |" g1 K/ y9 S& N# h font-size: 80px;
; Y" P" w6 S$ W# f0 L padding: 5px0;
1 {3 y0 z7 q3 M }
# ?) C0 g, c+ M #clock.date {$ m X( h( U9 \7 e6 Z" J
letter-spacing: 0.1em;
$ ?0 u9 Z& D0 ^1 r- l- p font-size: 24px; m4 g* }. w2 n- L+ D
}
; f& {6 `" r1 C6 \5 }# b& P #clock
/ g3 W# ]0 [: l) j. R7 O" } .text {! X3 X2 g" | J" L
letter-spacing: 0.1em;
# W8 b0 d$ g( \/ ^7 w/ G font-size: 12px;* I, n& _! Y% w3 X' U9 m
font-style: italic;( ^1 k5 H: c1 E% }: A3 t+ {- q
padding: 20px00;2 j9 n5 ? D6 B* f
}
8 a( y: u+ w6 T$ f6 T% R( |
& e( P/ h9 W3 H4 J4 _# d) Y > , X& C6 Y6 T9 n/ S
数字时钟
% r) }: d' R' K# S" ^6 v >{{ date }}{{ time }}// vue格式的js文件和js文件格式差不多，采用倒装法，与python不同--> var clock = new Vue({5 F q; ^; f+ V# o/ y" S
// el就是对象：上面div里的id内容，注意#符号el: #clock,/ t* P/ X1 x7 l6 u
data: {
+ w" ~" b! P3 \; T0 S ^5 p/ b. { // data里面的内容就是class的内容，但是因为可变所以先是空的
: K4 j" |8 g0 a7 |( U h& [ // 先各自定义一个空的，后面利用函数获得值time: ,0 b& }. V% A7 M) c% X
date:
1 s8 L9 r) i1 z+ g; F2 s3 x }
9 @+ M" S( \* t3 h0 s });
/ ?& ^2 c' p! ?1 u) K9 }# v' h /* Model层 */var week = [星期日, 星期一, 星期二, 星期三, 星期四 ; v& w1 y+ T- Q+ y9 t
, 星期五, 星期六];" i$ V8 z# w9 \& J, I7 ~
var timerID = setInterval(updateTime, 1000);
/ h' e& Z/ W. r! O- j // 先定义一个空的时间更新函数$ L# v' z6 Z; l4 p" @! |3 d
updateTime();
; [: G$ ]% q/ U7 R // 再定义时间更新函数，获取动态时间值
) [9 T) h8 ^' |7 T functionupdateTime() {3 Z' N: F& F! x: E
// 定义一个cd变量获取动态时间var cd = newDate();% I J4 C- ^ d7 A6 \5 [: D$ V5 W
// 注意这里的time和date的获得值，就会赋值给上面的data里面去；2是显示2位；4是显示4位 8 X2 W; b0 T6 \- [( S4 r8 b0 x j
6 d& |0 H' A6 A$ ? clock.time = zeroPadding(cd.getHours(), 2) + : + zeroPadding(cd.getMinutes(), 2) + : + zeroPadding(cd.getSeconds(), & M! e, G5 y+ J& ~6 x
2);1 _+ X! q2 @- `7 W
clock.date = zeroPadding(cd.getFullYear(), 4) + - + zeroPadding(cd.getMonth()+1, 2) + - + zeroPadding(cd.getDate(),
, f1 q+ Z# b; ~5 T 2) + + week[cd.getDay()];
: `3 Z0 t/ g' W };! X2 G9 E/ H- `
// 定义零填充函数：就是没有数值就是0来填充functionzeroPadding(num, digit) {: W* ]2 I+ X9 q* o$ p' {
var zero = ;+ o! A! Q3 y! r( V5 V+ T' A
2 G, Q' [) Q0 A6 L for(var i = 0; i < digit; i++) {
& F, F% \0 I. E3 h0 }, a% y! S; L zero += 0;
8 U& |2 W J1 @9 V; X9 U }) g, X( W- C1 Z, \ o
return (zero + num).slice(-digit);
7 |. v: ?4 U% q3 W, { }# x* x5 Q1 L/ w& R( a2 }. B% a
$ n' ^/ v* z3 m2 b# @ \. X: K- @( Y
: W" T" q' y J1 }/ k$ C2 e
+ {+ S8 F1 X2 R& _
1 f, Z" J( s/ l! d$ f% ?
/ y! b$ S# Y: D6 M8 J# u( u | 
