基于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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
jQuery实现日历效果
Sep 11 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
php数组去重实例及分析
2013/11/26 PHP
8个PHP数组面试题
2015/06/23 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
对python的文件内注释 help注释方法
2018/05/23 Python
python中字符串内置函数的用法总结
2018/09/13 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
python import 上级目录的导入
2020/11/03 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
可贵的沉默教学反思
2014/02/06 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
个人年终总结范文
2015/03/09 职场文书
筑梦中国心得体会
2016/01/18 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技