基于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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
Prototype使用指南之ajax
Jan 10 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
小程序实现多选框功能
Oct 30 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 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中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
详解php中 === 的使用
2016/10/24 PHP
PHP实现微信对账单处理
2018/10/01 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
详解python进行mp3格式判断
2016/12/23 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
高考考python编程是真的吗
2020/07/20 Python
python3访问字典里的值实例方法
2020/11/18 Python
建筑人员岗位职责
2013/12/25 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
家长评语和期望
2014/02/10 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
golang判断key是否在map中的代码
2021/04/24 Golang