用Vue.js开发网页时钟

2024-12-08 04:55:27

本文实例为大家分享了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层就能变成夜间模式

夜晚模式：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于vue2的canvas时钟倒计时组件步骤解析

今天给大家介绍一款基于vue2的canvas时钟倒计时组件,这个时钟倒计时组件采用canvas动画的炫酷动画效果形式,根据剩余时间的多少变换颜色和旋转扇形的速度,适合抢购.拍卖.下注等业务场景,且对移动端友好. 具体步骤分析: 假如设定倒计时总时间为15s, 变黄色时机为10s,变红色时机为5s. 1.开始倒计时后颜色为绿色.绿色含义是:倒计时的时间离结束时间还很长. 2.10s后变黄色.黄色的含义是:倒计时的时间离结束时间挺近了,起警告作用.动画中,出现快速旋转的扇形. 3.5s后变红色.红色
vue.js实现带日期星期的数字时钟功能示例

本文实例讲述了vue.js实现带日期星期的数字时钟功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net vue.js带日期星期数字时钟</title> <style type="text/css"> html, body { height: 100%;
vue实现电子时钟效果

本文实例为大家分享了vue实现电子时钟的具体代码,供大家参考,具体内容如下 html <div class="dateBox"> <div class="time">{{ time }}</div> <div class="date">{{ date }}</div> </div> css .dateBox { background: #12174
vue2实现简易时钟效果

本文实例为大家分享了vue2实现简易时钟效果的具体代码,供大家参考,具体内容如下 1.vue2+纯css实现预览效果: 2.代码如下: <template> <div class="main"> <div class="time"> <div class="hour_wrap"> <div class="
vue 实现LED数字时钟效果（开箱即用）

实现思路每一个数字由七个元素构成,即每一个segment元素.0~9 的数字都有自己的构成方式,用数组表示,即digitSegments数组.例如: 数字0用数组表示就是[1,2,3,4,5,6],定时器每隔一秒获取最新时间,然后通过改变透明度将之前的数字消失,显示最新的数字.通过transition展示动态效果. 代码细节 setNumber 方法用来设置数字 ,方法中第一个判断用于清除之前显示的数字,第二个判断用于显示最新的数字,当初始化时间时,会进第二个判断.样式有些丑,可以自己修改,年
Vue编写炫酷的时钟插件

本文实例为大家分享了Vue编写时钟插件的具体代码,供大家参考,具体内容如下效果图代码奉上: <template> <div class="clock"> <div class="flip"> <div class="digital front" :data-number="nextTimes[0]"></div>
vue简单练习桌面时钟的实现代码实例

用vue实现一个简单的网页桌面时钟,主要包括时钟显示.计时.暂停.重置等几个功能. 效果图如下,页面刚进来的时候是一个时钟,时钟上显示的时.分.秒为当前实际时间,点击计时器按钮后,页面变成一个计时器,并且计时器按钮被暂停与重置两个按钮替代,分别对计时器进行暂停和重置,若点击时钟按钮会切换回时钟界面. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&g
vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）

前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给定合理的帧数,不断的清除画布,再重绘图形,即呈现出动画效果. 让我们先看下效果说明:此gif清晰度很低,因为转成gif图的时候,质量受损,帧数减少,所以倒计时转到红色时候看起来变的很模糊.但是实际在浏览器上效果全程都是很清晰和连贯的使用 npm npm install vue-canvas-co
Vue实现数字时钟效果

用Vue写了一个简单的时间钟,供大家参考,具体内容如下此时钟内容包括年月日及星期和时分秒. 功能分析: 1.年份,日期,时间的显示2.动态的变化3.获取本地时间方法效果图演示代码演示注意:引入vue.min.js架包 <script src="js/vue.min.js"></script> CSS样式 <script src="js/vue.min.js"></script> <style> ht
用Vue.js开发网页时钟

本文实例为大家分享了Vue.js开发网页时钟的具体代码,供大家参考,具体内容如下本次实例的重点是父子通信,这也是学习Vue.js的重点部分和难点部分,能掌握好父子通信是对后期的Vue学习是一个很大的帮助,而且如果不跨过这个难点部分,是无法进行后期的学习的.父子通信很好用,但是很难理解而且写着写着还很容易出现错误父子通信的重点知识 1.子组件通过props属性监听从父组件中传过来的值(值)2.子组件通过$emit('方法名‘)来向父组件发出请求(方法)3.学习vue必须要知道属性只要绑定好后就
vue.js开发环境搭建教程

vue.js开发环境搭建教程分享,具体内容如下 1.安装node.js,忽略 2.基于node.js,利用淘宝npm镜像安装相关依赖在cmd里直接输入:npm install -g cnpm –-registry=https://registry.npm.taobao.org,回车,等待安装... 3.安装全局vue,用于帮助搭建所需的模板框架在cmd里, 1).输入:cnpm install -g vue-cli,回车,等待安装... 2).输入:vue -V,回车,若出现vue信息说明表
使用Vue.js开发微信小程序开源框架mpvue解析

前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue将是十分契合的一种解决方案. 目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去.github项目地址请参见mpvue .使用文档请参见 http://mpvue.com/. 为了帮
JS实现网页时钟特效

本文实例为大家分享了JS实现网页时钟特效的具体代码,供大家参考,具体内容如下主要逻辑根据JS 的Date属性求得当前的时分秒之后,按照 360/(时|分|秒) 来对三个指针元素进行旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
vue.js前端网页弹框异步行为示例分析

目录 1. 序 2. 找两个弹框组件看看 3. 自己肝一个 3.1. 封装 Promise 3.2. 确定时允许异步等待 3.3. 细节完善 3.4. 改革 1. 序网页弹框是个很常见的功能,比如需要告知用户消息的时候 (Alert),需要用户进行确认的时候 (Confirm),需要用户补充一点信息的时候 (Prompt) -- 甚至可以弹框让用户填写表单 (Modal Dialog). 弹框之后,开发者需要知道这个弹框是什么时候关闭以便进行接下来的操作. 在比较古老的 UI 组件中,这个事情
详解vue.js 开发环境搭建最简单攻略

做为一名学习路上的小白,起初就对 vue.js 有着莫名的好感,知道 vue.js 也能实现 angular.js 的双向绑定等一些功能后,妥妥的先把 angular.js 和 node.js 丢到后面再去学, 看了看 vue 文档,首先要搭建一个开发环境,因为自己太小白,看了一些搭建开发环境的博客,表示专业术语太多依然还是一脸懵逼. 具体流程大概如下: 很难理解?没关系,我也没理解,跟着操作就行了,我是window系统. 1.安装node.js 起初是很不理解的,我学 vue.js 还要掌握
Vue.js开发环境搭建

一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angul
vue.js开发环境安装教程

一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angula
vue.js开发实现全局调用的MessageBox组件实例代码

前言一开始接触到vue中的组件的时候,对于组件的理解还是不够充分的,最近在开发个人博客项目中,一开始就没准备使用一些现在比较流行的UI库(毕竟是个人项目,多练练手还是好的),所以需要自己开发几个全局组件,这里以MessageBox为例记录下vue.js如何开发全局组件.所谓全局变量是针对vue实例下说的,即所有的vue实际都可以运用到这个组件,局部组件就是针对某个实例来说的,只有这个vue实例下才能发挥作用,下面话不多说了,来一看看详细的介绍吧. 源码 github地址:Talk is che
Vue.js开发环境快速搭建教程

Vue.js 现在在后端.前端.微信.移动端Web非常流行,今天简单模拟Vue.js快速安装: 1.安装npm npm 是node.js 的包管理工具, 安装流程地址:https://docs.npmjs.com/cli/install 估计会非常慢,我们可以使用淘宝NPM镜像下载安装:https://npm.taobao.org/ ##安装npm## sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装

用Vue.js开发网页时钟

一、页面部分

二、CSS部分

三、JS部分（重点部分）

四、效果图

相关推荐

随机推荐