基于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 强制设为首页的代码
Jan 31 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 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读取javascript设置的cookies的代码
2010/04/12 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
linux下安装easy_install的方法
2013/02/10 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
python3的输入方式及多组输入方法
2018/10/17 Python
Python中的引用知识点总结
2019/05/20 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
药学专业毕业生求职信
2013/10/20 职场文书
美容师的职业规划书
2013/12/27 职场文书
《中华少年》教学反思
2014/02/15 职场文书
运动会通讯稿200字
2014/02/16 职场文书
保证书格式范文
2014/04/28 职场文书
学雷锋倡议书
2015/01/19 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
员工离职通知函
2015/04/25 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书