基于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 相关文章推荐
js的[defer]和[async]属性
Nov 24 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
浅析JS异步加载进度条
May 05 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
vue界面发送表情的实现代码
Sep 11 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文件
2007/01/04 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
js中eval详解
2012/03/30 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
python处理csv中的空值方法
2018/06/22 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
Python timeit模块的使用实践
2020/01/13 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
后勤工作职责
2013/12/22 职场文书
简短大学毕业感言
2014/01/18 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
质量保证书范本
2014/04/29 职场文书
个人校本研修方案
2014/05/26 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
公司慰问信范文
2015/03/23 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
春节随笔
2015/08/15 职场文书