Implement a simple page with desktop clock vue, including clock display, timing, pause, reset, and several other functions.
FIG effect follows the page just came in time is one clock, the time displayed on the clock, minutes and seconds of the actual current time, timer button click, the page into a timer, and the timer reset button is suspended with two alternative buttons, respectively pause and reset the timer, if you click the button switches back to clock the clock interface.
code show as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时钟</title>
<style type="text/css">
.clock {
width: 400px;
height: 180px;
line-height: 180px;
border: 10px solid #aaa;
border-radius: 10px;
margin: 120px auto;
background: pink;
text-align: center;
position: relative;
box-shadow: 0px 5px 20px rgba(0,0,0,.6);
.clock .text {-
Are
}size: 70px;
font-weight: bold;
color: rgba(0,0,0,.7);
}
.clock .btn {
position: absolute;
/*top: -66px;*/
bottom: -66px;
border: none;
outline: none;
width: 80px;
height: 36px;
border-radius: 4px;
font-size: 16px;
background: #aaa;
cursor: pointer;
box-shadow: 0px 5px 20px rgba(0,0,0,.6);
}
.clock .btn:hover {
opacity: 0.8;
}
.clock .btn-clock {
left: 110px;
}
.clock .btn-clock.to-left {
left: 60px;
}
.clock .btn-timer {
right: 110px;
}
.clock .btn-suspend {
right: 160px;
}
.clock .btn-reset {
right: 60px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="clock">
<span class="text" v-if="index == 0">
{{ hour }}:{{ min }}:{{ sec }}
</span>
<span class="text" v-else>
{{ min }}:{{ sec }}:{{ msec }}
</span>
<button class="btn btn-clock" @click="selectClock" :class="{'to-left': index != 0}">时钟</button>
<button class="btn btn-timer" @click="selectTimer" v-if="index == 0">
<span>计时器</span>
</button>
<button class="btn btn-suspend" @click="suspendTimer" v-if="index > 0">
<span v-if="index == 1">暂停</span>
<span v-if="index == 2">开始</span>
</button>
<button class="btn btn-reset" @click="resetTimer" v-if="index == 1 || index == 2">
<span>重置</span>
</button>
</div>
</div>
<script type="text/javascript">
data {,'#app'
el:Vue ({newapp =was
//0,
index:Page 0 represents the clock, timer 1 indicates a state, suspend the state of the timer 2 represents
hour: '00', // the value displayed page
min: '00' ,
sec: '00' ,
msec: '00' ,
H: 0, // temporarily stored value of
m: 0 ,
S: 0 ,
MS: 0 ,
Timer: null ,
DATE: null
},
// monitor
watch: {
index (newValue, oldValue) {
the clearInterval ( the this .timer);
the this .timer = null ;
the this .date = null ;
// come from a clock timer up from the page, or the page click click
IF (oldValue = newValue == 0 || 0 =) { // index is equal to the second data retention
the this .hour = '00' ;
the this .min = '00' ;
the this .sec = '00' ;
the this · msec = '00' ;
the this .h = 0 ;
the this .m = 0;
this.s = 0;
this.ms = 0;
}
this.autoMove();
}
},
methods: {
// 自动计时
autoMove() {
if (this.index == 0) {
this.timer = setInterval(res => {
this.date = new Date();
this.h = this.date.getHours();
this.m = this.date.getMinutes();
this.s = this.date.getSeconds();
this.hour = this.h > 9 ? this.h : '0' + this.h;
this.min = this.m > 9 ? this.m : '0' + this.m;
this.sec = this.s > 9 ? this.s : '0' + this.s;
}, 1000);
} else if (this.index == 1){
this.timer = setInterval(res => {
this.ms ++;
if (this.ms == 100) {
this.s ++;
this.ms = 0;
}
if (this.s == 60) {
this.m ++;
this.s = 0;
}
this.msec = this.ms > 9 ? this.ms : '0' + this.ms;
this.min = this.m > 9 ? this.m : '0' + this.m;
this.sec = this.s > 9 ? this.s : '0' + this.s;
}, 10);
}
},
// 选择时钟
selectClock () {
the this .index = 0 ;
},
// select timer
selectTimer () {
the this .index =. 1 ;
},
// start, pause timer
suspendTimer () {
IF ( the this .index ==. 1 ) {
the this = 2 .index ;
} the else IF ( the this .index == 2 ) {
the this .index =. 1 ;
}
},
// reset the timer
ResetTimer to () {
the this.index = 0;
setTimeout(res => {
this.index = 1;
}, 1);
}
},
mounted() {
this.autoMove();
}
})
</script>
</body>
</html>