用Vue.js开发一个网页时钟

本次实例的重点是父子通信，这也是学习Vue.js的重点部分和难点部分，能掌握好父子通信是对后期的Vue学习是一个很大的帮助，而且如果不跨过这个难点部分，是无法进行后期的学习的。
父子通信很好用，但是很难理解而且写着写着还很容易出现错误

父子通信的重点知识
1、子组件通过props属性监听从父组件中传过来的值（值）
2、子组件通过$emit('方法名‘)来向父组件发出请求（方法）
3、学习vue必须要知道属性只要绑定好后就是动态的模式（我个人理解），就只需要接收和请求就行了，不需要做其他的监听操作

话不多说，上代码

一、页面部分

1、创建模板
2、通过父子通信来对子组件的部分属性进行监听

<!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()" :style="o_style">{{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 :style="{color:com_s.isNight==true?'white':'black'}">12</span><span :style="{color:com_s.isNight==true?'white':'black'}">3</span><span :style="{color:com_s.isNight==true?'white':'black'}">6</span><span :style="{color:com_s.isNight==true?'white':'black'}">9</span><span class="over-point"></span><div id="hour" :style="hour_s"></div><div id="minute" :style="minute_s"></div><div id="second" :style="second_s"></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包的导入
<script src="../js/index_js.js"></script>//采用外部连接的格式
<script src="../js/pageControl.js"></script>//采用外部连接的格式
</body>
</html>

二、CSS部分

*{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;/*内部的每一个文字的大小*/
}
span:first-child{left:240px;/*十二这个数字的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){/*时钟中间的骨架*/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;
}

三、JS部分（重点部分）

父子通信


/**子组件* 子组件的时针、分针、秒针都是通过父组件传过来的值来设置它的偏移量*/
let clock={template:'#time_template',data(){return{interval:'',//定时器对象}},props:{//监听从父组件中传过来的对象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(){//让方法在一开始就自动调用，一般适用于有定时器的方法this.display();}
};/*** 父组件*/
let fatherComponent=new Vue({el:'#content',data:{date:new Date(),current_time:{//表示当前时间的对象hour:'',minute:'',second:'',},//需要传给子组件的对象hour_style: {},minute_style:{},second_style:{},//页面样式的初始化属性o_style:{left:'97%',isNight:false,//监听是白天还是黑夜，默认是白天value:'N-M',},},//通过子组件向父组件发起请求的方法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)',//将圆分为六十份，每份为一秒钟。}},//对页面对象的属性进行修改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'}}},//在父组件内声明子组件，这是必须的components:{clock}
});

四、效果图

白天模式：

在白天模式中，单击N-M层就能变成夜间模式

夜晚模式：

在夜晚模式中单击任何地方都可以变回白天模式
夜晚模式中每个指针都是发光的

用Vue.js开发一个网页时钟相关推荐

用Vue.js开发一个电影App的前端界面
我们要构建一个什么样的App? 我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目.这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WEB交互界 ...
基于 SpringBoot + Vue 框架开发的网页版聊天室项目
‍ ‍简介微言聊天室是基于前后端分离,采用SpringBoot+Vue框架开发的网页版聊天室.使用了Spring Security安全框架进行密码的加密存储和登录登出等逻辑的处理,以WebSocke ...
Vue.js开发实战从入门到精通
Vue.js教程 01. Vue.js基础入门 01. 初识前端技术的发展 HTML:HTML主要用来编写网页的结构,例如表示超链接. CSS:CSS样式包括颜色.大小.字体等,布局合理的页面效果. ...
【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题
[vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
Vue CLI 3.0 正式发布，Vue.js 开发标准化工具
Vue CLI 3.0 已发布,该版本经历了重构,旨在: 减少现代前端工具的配置烦扰,尤其是在将多个工具混合在一起使用时: 尽可能在工具链中加入最佳实践,让它成为任意 Vue 应用程序的默认实践. V ...
h5+js调取相机做取景框_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
使用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发 ...

用Vue.js开发一个网页时钟

一、页面部分

二、CSS部分

三、JS部分（重点部分）

四、效果图

用Vue.js开发一个网页时钟相关推荐

最新文章

热门文章