Vue编写炫酷的时钟插件

本文实例为大家分享了Vue编写时钟插件的具体代码,供大家参考,具体内容如下

效果图

代码奉上:

<template>
    <div class="clock">
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[0]"></div>
            <div class="digital back" :data-number="nowTimes[0]"></div>
        </div>
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[1]"></div>
            <div class="digital back" :data-number="nowTimes[1]"></div>
        </div>
        <em class="divider">:</em>
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[2]"></div>
            <div class="digital back" :data-number="nowTimes[2]"></div>
        </div>
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[3]"></div>
            <div class="digital back" :data-number="nowTimes[3]"></div>
        </div>
        <em class="divider">:</em>
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[4]"></div>
            <div class="digital back" :data-number="nowTimes[4]"></div>
        </div>
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[5]"></div>
            <div class="digital back" :data-number="nowTimes[5]"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ClockData",
        data () {
            return {
                duration: 650,
                nowTimes: [],
                nextTimes: [],
                timer: {},
            }
        },
        mounted() {
            this.initDate();
            this.timer = setInterval(() => {
                this.updateTime();
            }, 1000)
        },
        methods: {
            initDate() {
                let now = new Date();
                this.nowTimes = this.getTimeFromDate(new Date(now.getTime() - 1000));
                this.nextTimes = this.getTimeFromDate(now);
            },
            updateTime() {
                let now = new Date();
                let nowTimes = this.getTimeFromDate(new Date(now.getTime() - 1000));
                let nextTimes = this.getTimeFromDate(now);;
                for (let i = 0; i < 6; i++) {
                    if (nowTimes[i] !== nextTimes[i]) {
                        this.setSpin(i, nowTimes[i], nextTimes[i]);
                    }
                }
            },
            setSpin(index, nowTime, nextTime) {
                let nodes = document.querySelectorAll(".flip");
                nodes[index].classList.add('running');
                this.nowTimes.splice(index, 1, nowTime);
                this.nextTimes.splice(index, 1, nextTime);
                setTimeout(() => {
                    nodes[index].classList.remove('running');
                    this.nowTimes.splice(index, 1, nextTime);
                }, this.duration)
            },
            getTimeFromDate(date) {
                let numTime = [];
                let timeStr = date
                    .toTimeString()
                    .slice(0, 8)
                    .split(":")
                    .join("");
                for (let i = 0; i < timeStr.length; i++) {
                    numTime.push(parseInt(timeStr[i]));
                }
                return numTime;
            }
        },
        destroyed() {
            // 销毁定时器
            clearInterval(this.timer);
        }
    }
</script>

<style scoped>
    .clock {
        display: flex;
    }
    .clock .divider {
        font-size: 66px;
        line-height: 102px;
        font-style: normal;
    }
    .clock .flip {
        position: relative;
        width: 60px;
        height: 100px;
        margin: 2px;
        font-size: 66px;
        line-height: 100px;
        text-align: center;
        background: white;
        border: 1px solid black;
        border-radius: 12px;
    }
    .clock .flip .digital::before, .clock .flip .digital::after {
        position: absolute;
        content: attr(data-number);
        left: 0;
        right: 0;
        color: white;
        background: black;
        overflow: hidden;
        -webkit-perspective: 160px;
        perspective: 160px;
    }
    .clock .flip .digital::before {
        top: 0;
        bottom: 50%;
        border-bottom: 1px solid #666;
        border-radius: 10px 10px 0 0;
    }
    .clock .flip .digital::after {
        top: 50%;
        bottom: 0;
        line-height: 0;
        border-radius: 0 0 10px 10px;
    }
    .clock .flip .back::before,
    .clock .flip .front::after {
        z-index: 1;
    }
    .clock .flip .back::after {
        z-index: 2;
    }
    .clock .flip .front::before {
        z-index: 3;
    }
    .clock .flip .back::after {
        -webkit-transform-origin: center top;
        transform-origin: center top;
        -webkit-transform: rotateX(0.5turn);
        transform: rotateX(0.5turn);
    }
    .clock .flip.running .front::before {
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation: frontFlipDown 0.6s ease-in-out;
        animation: frontFlipDown 0.6s ease-in-out;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .clock .flip.running .back::after {
        -webkit-animation: backFlipDown 0.6s ease-in-out;
        animation: backFlipDown 0.6s ease-in-out;
    }
    @-webkit-keyframes frontFlipDown {
        to {
            -webkit-transform: rotateX(0.5turn);
            transform: rotateX(0.5turn);
        }
    }
    @keyframes frontFlipDown {
        to {
            -webkit-transform: rotateX(0.5turn);
            transform: rotateX(0.5turn);
        }
    }
    @-webkit-keyframes backFlipDown {
        to {
            -webkit-transform: rotateX(0);
            transform: rotateX(0);
        }
    }
    @keyframes backFlipDown {
        to {
            -webkit-transform: rotateX(0);
            transform: rotateX(0);
        }
    }
</style>

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

(0)

相关推荐

  • vue 实现LED数字时钟效果(开箱即用)

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

  • vue2实现简易时钟效果

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

  • 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简单练习 桌面时钟的实现代码实例

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

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

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

  • vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

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

  • vue实现电子时钟效果

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

  • 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编写时钟插件的具体代码,供大家参考,具体内容如下 效果图 代码奉上: <template>     <div class="clock">         <div class="flip">             <div class="digital front" :data-number="nextTimes[0]"></div>  

  • JS实现页面炫酷的时钟特效示例

    目录 一.前言 二.想法设计/实现过程 三.基本样式 四.时间函数控制器 五,时,分,秒占位 六.时间动态填充 一.前言 今天看到某网站的时间特别的丑陋,所以就诞生了写一个看时间的炫酷的时钟前端页面. 特点就是炫酷,特效好,个人以心情愉快的感觉. 对于时间的变化,我打算使用翻页的特效来完成,色系的话采用黑色以主题,给人一种神秘的感觉. 而且要获取到本地的时间的数据来实时更新它的变化. 二.想法设计/实现过程 秉持着尽可能的美观炫酷,与用户的交互性好的原则,我初步的想法是,采用黑色系来增加可观性,

  • Vue实现炫酷的代码瀑布流背景

    本文实例为大家分享了Vue实现代码瀑布流背景的具体代码,供大家参考,具体内容如下 先看一下效果: 代码奉上: <template>     <canvas id="canvas" /> </template> <script>     export default {         name: "BackCanvas",         props: {             height: {          

  • JavaScript Canvas编写炫彩的网页时钟

    本文实例为大家分享了JavaScript Canvas编写炫彩网页时钟的具体代码,供大家参考,具体内容如下 只是利用了Canvas制作的. 示意图如下: <!DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" content = "text/html"; charsert = "utf-8" /> <title> 网

  • 基于 Vue 实现一个酷炫的 menu插件

    写在前面 最近看到一个非常酷炫的menu插件,一直想把它鼓捣成vue形式,谁让我是vue的死灰粉呢,如果这都不算爱:pensive:.:laughing:开个小玩耍,我们一起来探索黑魔法吧.观看本教程的读者需要具备一定的vue和css3的知识. 本文结构 1.效果演示 2.使用方法介绍 3.关键步骤讲解 正文 1.效果演示 pic_1 pic2 pic_3 在线演示 live demo 2.使用介绍 项目地址:github.com/MingSeng-W/vue-bloom-menu ,clone

  • vue实现一个炫酷的日历组件

    公司业务新开了一个商家管理微信H5移动端项目,日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据. 如图: 假设今天为2018-09-02 90天前: 90天后; 产品需求: 展示当前日期(服务器时间)前后90天,一共181天的日期. 日历可以左右滑动切换月份. 当月份的如果不在181天区间的,需要置灰并且不可点击. 点击日历绑定的节点的外部,关闭弹窗. 涉及内容: 获取服务器时间,渲染日历数据 vue-touch监听手势滑动事件 ios日期兼容处理 clickOutSide自定义指

  • js+css3实现炫酷时钟

    本文实例为大家分享了js+css3实现炫酷时钟的具体代码,供大家参考,具体内容如下 html <body> <ul id='box'></ul> </body> css <style> *{ margin: 0; padding: 0; } body{ background-color: #aaa; } ul{ width: 400px; height: 400px; border: 5px solid skyblue; margin: 100p

  • vue中使用animate.css实现炫酷动画效果

    目录 1.安装(在vscode终端中,使用npm安装) 2.引入 3.代码实现 animate.css 是一个来自国外的 CSS3 动画库,它提供了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果.这些效果在大多数支持CSS3的浏览器上都能保持一致.简单来说,我们使用它,只需要写很少的代码,就可以实现非常炫酷的动画效果. 官

  • vue+three.js实现炫酷的3D登陆页面示例详解

    目录 前言: Three.js的基础知识 关于场景 关于光源 关于相机(重要) 关于渲染器 完善效果 创建一个左上角的地球 使地球自转 创建星星 使星星运动 创建云以及运动轨迹 使云运动 完成three.js有关效果 结语 前言: 大家好,我是xx传媒严导(xx这两个字请自行脑补) . 该篇文章用到的主要技术:vue3.three.js 我们先看看成品效果: 高清大图预览(会有些慢): 座机小图预览: 废话不多说,直接进入正题 Three.js的基础知识 想象一下,在一个虚拟的3D世界中都需要什

随机推荐