|
/ b1 |; O/ A; e$ e! d 1 说明：1.1 了解vue的基本知识：网页显示方法和js结构。1.2 如何获取动态时间。  " V& K+ i) M! [0 L: G
2 效果图 
- k8 k, C& p. I% S3 S2 g' a+ @; m 3 完整代码：vue.js数字时钟本地时间代码
% b- H. O/ y: \; r2 U0 G% @ html, body {
: m( z: i" u5 t+ j# g( t- q' x height: 100%;
: v$ h( J; `4 ~9 f A }! ? J, S. _; }; o5 q
body {
6 b8 H8 n* @2 I! ~ /*整体背景颜色渐变效果设置*/background: radial-gradient(ellipse at center, pink
! J1 k3 k2 A$ e0 x `1 O: ?3 j 0%, blue 70%);
" b- `# e% `9 r; X& I background-size: 100%;5 F, Y8 J. v p/ o2 Y9 ]3 z
}
0 O% L' a; Y" R p {
) S( f; K) @2 i0 m8 I- M3 X margin: 0;5 |5 ^/ C6 q! v7 X* h1 j
padding: 0;% O1 ~3 u$ N5 F5 W, G3 k
}+ t( A$ T; l0 X
#clock {" K9 f- \/ ~9 C; |) W9 C
font-family: Share Tech Mono
. V& m9 S1 T7 ~$ ~( E9 Q! o8 t , monospace;
9 d2 G+ X2 M, N4 ` text-align: center;( q( v/ d: g5 b5 l/ T
position: absolute;
% P- Y; v: j8 |! Y! {5 `1 G2 d left: 50%;; j1 K) }6 a' e$ \- n
top: 50%;
$ e" r) {& h# r- _. f -webkit-transform $ m1 f: U: X. i7 s1 {7 ]5 M$ K
: translate(-50%, -50%);
' `9 g$ r7 l* p* z- u transform: translate(-50%, -50%);
; k h( V, ?' d( s: e$ ~) I9 G /*显示文字颜色*/color: lightgreen;8 V% Z# r8 ]0 N: s$ Z5 c
% A$ M' d1 Y E5 o u
& e% ]& h: y9 |5 a text-shadow: 0020px#0aafe6, 0020pxrgba(10, 175, 230, 0);
% r- _+ s$ v# _3 ]0 u1 ~- ]! d }: V- @* H- h9 e! z7 W
#clock.time {
4 z2 k( w5 ]1 @2 ? letter-spacing: 0.05em;
8 p" j5 s2 ? w
/ `" U- K: G, H; [% e# F- I font-size: 80px;8 I; M( j3 T, m, y) C$ K
padding: 5px0;
/ j$ l9 a/ A; Y; T1 M0 s }, B+ b3 F2 E4 p% ~
#clock.date {9 i* Y/ n- u0 n* C: W
letter-spacing: 0.1em;/ a" F% A3 ^% \! ~7 {/ @
font-size: 24px;
) s, } }: n0 g1 k( ^ }5 _1 t0 o* _5 h
#clock - c* a! ?% [0 s6 I: l. @
.text {
/ e ?. D8 ~4 a6 p7 Y! h letter-spacing: 0.1em;
# z( J: v. }# i( G+ \" r font-size: 12px;9 @9 Q. `& x& d& o7 T: ^
font-style: italic;8 S; u- Z$ l) c6 t5 l
padding: 20px00;- A5 m9 J9 A+ F3 |. h0 E* }
}
( k, F/ _% ~ t8 E6 f3 Z% r ) I& x. m% |: |) \9 T& u
> 5 w8 M$ s# t8 s: c
数字时钟 , B6 {# L9 [6 c' ?* ?
>{{ date }}{{ time }}// vue格式的js文件和js文件格式差不多，采用倒装法，与python不同--> var clock = new Vue({, S* p+ s$ n- q# E- \1 g
// el就是对象：上面div里的id内容，注意#符号el: #clock,; W% z0 s. `0 l& l
data: {
1 e9 h5 D" ?6 ~ // data里面的内容就是class的内容，但是因为可变所以先是空的
& X) P8 d% R! P( c" H6 l# d // 先各自定义一个空的，后面利用函数获得值time: ,) z% P9 C4 R/ S! d
date:
: v) T+ H3 |, ?5 Y T5 u }
! p4 Z2 [' l. q& `& ^! Y5 n# K+ @ });8 Q2 F( J1 r8 m# `$ b# [6 _
/* Model层 */var week = [星期日, 星期一, 星期二, 星期三, 星期四
5 T" {2 L# L# W( q , 星期五, 星期六];
# ^6 P$ C. z1 Q" K, _ K" Y( g: K var timerID = setInterval(updateTime, 1000);: K. j6 Q* h* G1 j2 `5 C- f2 {
// 先定义一个空的时间更新函数/ k! \1 V4 `5 L
updateTime();- m& p) I! [6 n- N$ Q9 s% Z
// 再定义时间更新函数，获取动态时间值
8 T2 Q# p1 ]! E: A: \& d$ Q I9 q functionupdateTime() {
7 o/ E+ h T) n) K! p# Q // 定义一个cd变量获取动态时间var cd = newDate();
! @! G; O8 }* Y // 注意这里的time和date的获得值，就会赋值给上面的data里面去；2是显示2位；4是显示4位 ! }1 P# z, a- t9 V$ G4 J
9 q: a \2 p, X: H& q clock.time = zeroPadding(cd.getHours(), 2) + : + zeroPadding(cd.getMinutes(), 2) + : + zeroPadding(cd.getSeconds(),
& c3 x/ I& O) i 2);& p/ ~7 z. z# f& p3 ^! l8 I
clock.date = zeroPadding(cd.getFullYear(), 4) + - + zeroPadding(cd.getMonth()+1, 2) + - + zeroPadding(cd.getDate(),
4 u: h6 v! C" K; |# w4 p 2) + + week[cd.getDay()];( ?+ b3 V ^& j0 |) w
};, N/ _, L7 Y! s& S: G
// 定义零填充函数：就是没有数值就是0来填充functionzeroPadding(num, digit) {8 h* p9 Y% ~( W& o R* X2 E' D
var zero = ;
+ }8 j# c2 F5 r9 M) b2 C
4 P- Q; k; ~4 e8 E- [ for(var i = 0; i < digit; i++) {) k9 G; j7 Y) l! a0 |+ T
zero += 0;
( x0 \7 Q1 ^4 N; A' s- m/ O5 | }- O# A5 \- n, R, s" t
return (zero + num).slice(-digit);
+ t0 \+ ]* q& N! K }
- L2 J$ t; H# ^3 _5 w2 Q ) z! n7 u5 |: {$ B0 `
4 ?$ ~ l& z' r7 q
4 k) N* g* t1 i; k- j4 c4 s; t0 S" Q1 m r& U n
$ O; Z8 I( j; P' C% c
| 
