基于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 相关文章推荐
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
Js apply方法详解
Feb 16 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 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 程序员也要学会使用“异常”
2009/06/16 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
Python设计模式之观察者模式实例
2014/04/26 Python
Python的面向对象思想分析
2015/01/14 Python
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
python实现内存监控系统
2021/03/07 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
python gdal安装与简单使用
2019/08/01 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
摄影实习自我鉴定
2013/09/20 职场文书
经典商业广告词
2014/03/13 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
springboot实现string转json json里面带数组
2022/06/16 Java/Android
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技