基于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 相关文章推荐
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
javascript cookie的简单应用
Feb 24 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
Vue.js对象转换实例
Jun 07 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
JavaScript 截取字符串代码实例
Sep 05 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
德劲1107的电路分析与打磨
2021/03/02 无线电
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
Js nodeType 属性全面解析
2013/11/14 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
python去掉字符串中重复字符的方法
2014/02/27 Python
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
Python读取键盘输入的2种方法
2015/06/16 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Django 用户认证组件使用详解
2019/07/23 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
网络维护管理员的自我评价分享
2013/11/11 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
高二数学教学反思
2016/02/18 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
如何用JavaScipt测网速
2021/05/09 Javascript
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
golang语言指针操作
2022/04/14 Golang
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android