未加星标

基于vue2的canvas时钟倒计时组件

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

今天给大家介绍一款基于vue2的canvas时钟倒计时组件,这个时钟倒计时组件采用canvas动画的炫酷动画效果形式,根据剩余时间的多少变换颜色和旋转扇形的速度,适合抢购、拍卖、下注等业务场景,且对移动端友好。

查看演示

具体步骤分析:

假如设定倒计时总时间为15s, 变黄色时机为10s,变红色时机为5s。

1、开始倒计时后颜色为绿色。绿色含义是:倒计时的时间离结束时间还很长。

2、10s后变黄色。黄色的含义是:倒计时的时间离结束时间挺近了,起警告作用。动画中,出现快速旋转的扇形。

3、5s后变红色。红色的含义是:倒计时的时间马上就要结束了,起强烈警告作用。动画中,快速旋转的扇形速度加快。

4、0s倒计时结束。动画消失。静态圆形框中显示提示文字。

安装

我们使用npm安装。

npm install vue-canvas-countdown --save-dev 使用

首先在模板文件中加入组件信息。

<template> <div id="app" @click="fireCD"> <div class="demo"> <countDown :fire="fire" time="15" :tiping="tiping" :tipend="tipend" @onEnd="onEnd"/> </div> </div> </template>

然后加入js部分代码:

<script> import countDown from 'vue-canvas-countdown' export default { name: 'App', components: { countDown }, data () { return { fire: 0, tiping: { text: '倒计时进行中', color: '#fff' }, tipend: { text: '倒计时结束', color: '#fff' } } }, methods: { fireCD () { // 配置参数(更多配置如下表) this.tiping = { text: '请下注', color: '#fff' } this.tipend = { text: '停止下注', color: '#fff' } // 启动倒计时(效果如上图所示) this.fire++ }, onEnd () { console.log('倒计时结束的回调函数') } } } </script> 属性选项 属性 类型 单位 默认值 备注 fire: [Number] - 200 必选,在父组件this.fire++ 即可启动倒计时 width,height: [Number] px 200 200 设置宽高 bgCir: [String] - rgba(0, 0, 0, .6) 倒计时圆盘背景颜色 time: [Number] 秒/s 15 倒计时所用 statusChange: [Array] 毫秒/ms [10000, 500] 倒计时状态改变的时机/时间点(绿=>黄=>红) tiping: [Object] - {text: '倒计时', color: '#fff'} 倒计时进行时的静态文本内容和颜色(注意:color和text都得设置) tipend: [Object] - {text: 'END', color: '#fff'} 倒计时结束时的静态文本内容和颜色(注意:color和text都得设置)

项目地址: https://github.com/Damon0820/vue-countdown

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: 倒计时,gt,lt,text,color,#fff,tiping,tipend,canvas,fire,div,动画,组件,countdown
分页:12
转载请注明
本文标题:基于vue2的canvas时钟倒计时组件
本站链接:https://www.codesec.net/view/604884.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(8)