基于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的动态创建表格的插件
Apr 05 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
Vue组件开发初探
Feb 14 Javascript
svg动画之动态描边效果
Feb 22 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
JavaScript实现网页动态生成表格
Nov 25 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来自动调用不同服务器上的flash
2006/10/09 PHP
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
pygame实现五子棋游戏
2019/10/29 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
小结Python的反射机制
2020/09/28 Python
web页面录屏实现
2019/02/12 HTML / CSS
技术总监岗位职责
2013/12/05 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
人代会标语
2014/06/30 职场文书
2014年预算员工作总结
2014/12/05 职场文书
道歉短信大全
2015/05/12 职场文书
撤诉申请怎么写
2015/05/19 职场文书
恰同学少年观后感
2015/06/08 职场文书
结婚典礼致辞
2015/07/28 职场文书
初中语文教师研修日志
2015/11/13 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
Python中常见的导入方式总结
2021/05/06 Python
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技