基于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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
初探jquery——表单应用范例
Feb 20 Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
基于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
对盗链说再见...
2006/10/09 PHP
Apache2 httpd.conf 中文版
2006/12/06 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
自定义vue组件发布到npm的方法
2018/05/09 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
npm的lock机制解析
2019/06/20 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
Python import用法以及与from...import的区别
2015/05/28 Python
python实现小世界网络生成
2019/11/21 Python
Python读取表格类型文件代码实例
2020/02/17 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
python关于倒排列的知识点总结
2020/10/13 Python
韩国现代百货官网:Hmall
2018/03/21 全球购物
星空联盟C# .net笔试题
2014/12/05 面试题
会计电算化专业应届大学生求职信
2013/10/22 职场文书
网络教育自我鉴定
2014/02/04 职场文书
办公设备采购方案
2014/03/16 职场文书
销售岗位职责范本
2014/06/12 职场文书
诚信承诺书
2015/01/19 职场文书
婚前保证书范文
2015/02/28 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
花田少年史观后感
2015/06/16 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python