溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“怎么用Vue.js開(kāi)發(fā)網(wǎng)頁(yè)時(shí)鐘”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么用Vue.js開(kāi)發(fā)網(wǎng)頁(yè)時(shí)鐘”吧!
父子通信的重點(diǎn)知識(shí)
1、子組件通過(guò)props屬性監(jiān)聽(tīng)從父組件中傳過(guò)來(lái)的值（值）
2、子組件通過(guò)$emit('方法名‘)來(lái)向父組件發(fā)出請(qǐng)求（方法）
3、學(xué)習(xí)vue必須要知道屬性只要綁定好后就是動(dòng)態(tài)的模式（我個(gè)人理解），就只需要接收和請(qǐng)求就行了，不需要做其他的監(jiān)聽(tīng)操作
話不多說(shuō)，上代碼
1、 創(chuàng)建模板
2、通過(guò)父子通信來(lái)對(duì)子組件的部分屬性進(jìn)行監(jiān)聽(tīng)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Time</title>
<link href="../css/index_css.css" rel="stylesheet">//采用外部連接的格式
</head>
<body>
<div id="content" class="content">
<div id="over" @click="show()" :>{{o_style.value}}</div>
<clock :cur_time="current_time" @get_hour="getHours()" @get_minute="getMinutes()" @get_second="getSeconds()"
:hour_s="hour_style" :minute_s="minute_style" :second_s="second_style" :com_s="o_style">
</clock>
</div>
//模板部分
<template id="time_template">
<div class="root">
<span :>12</span>
<span :>3</span>
<span :>6</span>
<span :>9</span>
<span class="over-point"></span>
<div id="hour" :></div>
<div id="minute" :></div>
<div id="second" :></div>
<div id="show_time">{{cur_time.hour}}:{{cur_time.minute}}:{{cur_time.second}}</div>
</div>
</template>
<script src="../external_lib/vue.js"></script>//這里是vue.js包的導(dǎo)入
<script src="../js/index_js.js"></script>//采用外部連接的格式
<script src="../js/pageControl.js"></script>//采用外部連接的格式
</body>
</html>*{
margin:0px;
padding:0px;
}
body{
display: flex;
justify-content: center;
align-items: center;
align-content: center;
background:skyblue;
overflow: hidden;
}
#content{
position:relative;
width:100%;
height:100vh;
display:flex ;
justify-content: center;
align-content: center;
align-items: center;
}
.root{
width:500px;
height:500px;
border-radius: 50%;
border:2px solid grey;
position:relative;
top:50px;
background: url("../img/day.jpg") -170px;
background-size:cover;
overflow: hidden;
box-shadow: 0px 0px 15px gray;
}
.root>span,.root>div{
position:absolute;
font-size:20px;/*內(nèi)部的每一個(gè)文字的大小*/
}
span:first-child{
left:240px;/*十二這個(gè)數(shù)字的x偏移量=（500/2）-（20/2)*/
top:10px;
z-index:10;
}
span:nth-child(2){
left:480px;/*3的x偏移量=（500-10)*/
top:240px;/*(500/2)-(20/2)*/
z-index:10;
}
span:nth-child(3){
left:250px;/*6*/
top:470px;
z-index:10;
}
span:nth-child(4){
left:10px;/*9*/
top:240px;
z-index:10;
}
span:nth-child(5){/*時(shí)鐘中間的骨架*/
left:225px;/*(500/2)-(50/2)*/
top:225px;/*(500/2)-(50/2)*/
display: inline-block;
width:50px;
height:50px;
line-height:50px;
text-align: center;
font-weight:bolder;
border-radius: 50%;
background:cadetblue;
box-shadow: 0px 0px 18px #5f9ea0,inset 0px 0px 10px #4faee0;
z-index:12;
}
#hour{
width:20px;
height:120px;
border-radius:12px;
background:white;
top:136px;
left:242px;
opacity:88%;
box-shadow: 0 0 18px whitesmoke;
z-index:11;
}
#minute{
width:15px;
height:160px;
border-radius:12px;
background:dodgerblue;
top:90px;
left:243px;
opacity: 0.85;
box-shadow: 0 0 18px deepskyblue;
z-index:11;
}
#second{
width:10px;
height:200px;
border-radius:12px;
background:gray;
top:50px;
left:250px;
opacity:0.8;
box-shadow: 0 0 18px snow;
z-index:11;
}
#show_time{
width:100px;
height:50px;
background:black;
opacity:0.6;
left:200px;
top:300px;
color:white;
text-align: center;
line-height:50px;
z-index:10;
}
#over{
position:absolute;
width:100%;
height:100vh;
color:white;
background:black;
opacity: 0.8;
transition:1s;
z-index:10;
}父子通信
/**子組件
* 子組件的時(shí)針、分針、秒針都是通過(guò)父組件傳過(guò)來(lái)的值來(lái)設(shè)置它的偏移量
*/
let clock={
template:'#time_template',
data(){
return{
interval:'',//定時(shí)器對(duì)象
}
},
props:{//監(jiān)聽(tīng)從父組件中傳過(guò)來(lái)的對(duì)象
cur_time: '',
com_s:{},
hour_s:{},
minute_s:{},
second_s:{},
},
methods:{
display(){
this.interval=setInterval((e)=>{
this.setHours();
this.setMinutes();
this.setSeconds();
},1000);
},
setHours(){
this.$emit('get_hour');
},
setMinutes(){
this.$emit('get_minute');
},
setSeconds(){
this.$emit('get_second');
},
},
created(){//讓方法在一開(kāi)始就自動(dòng)調(diào)用，一般適用于有定時(shí)器的方法
this.display();
}
};
/**
* 父組件
*/
let fatherComponent=new Vue({
el:'#content',
data:{
date:new Date(),
current_time:{//表示當(dāng)前時(shí)間的對(duì)象
hour:'',
minute:'',
second:'',
},
//需要傳給子組件的對(duì)象
hour_style: {},
minute_style:{},
second_style:{},
//頁(yè)面樣式的初始化屬性
o_style:{
left:'97%',
isNight:false,//監(jiān)聽(tīng)是白天還是黑夜，默認(rèn)是白天
value:'N-M',
},
},
//通過(guò)子組件向父組件發(fā)起請(qǐng)求的方法
methods:{
getHours(){
this.date=new Date();
this.current_time.hour=this.date.getHours()>=10?this.date.getHours():'0'+this.date.getHours();
let hour=this.date.getHours()%12+(this.date.getMinutes()+(this.date.getSeconds()/60)/60);
this.hour_style={
transformOrigin:'bottom center',
transform:'rotate('+this.date.getHours()*30+'deg)',
}
},
getMinutes(){
this.date=new Date();
this.current_time.minute=this.date.getMinutes()>=10?this.date.getMinutes():'0'+this.date.getMinutes();
let m=this.date.getMinutes();
this.minute_style={
transformOrigin:'bottom center',
transform:'rotate('+(m*6)+'deg)',//分為六十等分，每份為一分鐘
}
},
getSeconds(){
this.date=new Date();
this.current_time.second=this.date.getSeconds()>=10?this.date.getSeconds():'0'+this.date.getSeconds();
this.second_style={
transformOrigin:'bottom center',
transform:'rotate('+this.date.getSeconds()*6+'deg)',//將圓分為六十份，每份為一秒鐘。
}
},
//對(duì)頁(yè)面對(duì)象的屬性進(jìn)行修改
show(){
if(this.o_style.isNight){
this.o_style.left='97%';
this.o_style.isNight=false;
this.o_style.value='N-M'
}else{
this.o_style.left='0%';
this.o_style.isNight=true;
this.o_style.value='D-M'
}
}
},
//在父組件內(nèi)聲明子組件，這是必須的
components:{
clock
}
});白天模式：
在白天模式中，單擊N-M層就能變成夜間模式
夜晚模式：
在夜晚模式中單擊任何地方都可以變回白天模式
夜晚模式中每個(gè)指針都是發(fā)光的
到此，相信大家對(duì)“怎么用Vue.js開(kāi)發(fā)網(wǎng)頁(yè)時(shí)鐘”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼