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


Posted in Javascript onNovember 05, 2018

今天给大家介绍一款基于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都得设置)

总结

以上所述是小编给大家介绍的基于vue2的canvas时钟倒计时组件步骤解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery对dom的操作常用方法整理
Jun 25 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 #Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 #Javascript
vue router的基本使用和配置教程
Nov 05 #Javascript
微信小程序tabbar底部导航
Nov 05 #Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 #Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 #Javascript
小程序实现选择题选择效果
Nov 04 #Javascript
You might like
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
python实现dict版图遍历示例
2014/02/19 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
自荐书范文范例
2014/02/13 职场文书
感谢信模板大全
2015/01/23 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书