基于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 相关文章推荐
JSON JQUERY模板实现说明
Jul 03 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
layui分页效果实现代码
May 19 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 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中的串行化变量和序列化对象
2006/09/05 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
Vue中computed及watch区别实例解析
2020/08/01 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
JS实现简易日历效果
2021/01/25 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
python和shell变量互相传递的几种方法
2013/11/20 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
STP的判定过程
2012/10/01 面试题
写求职信有什么意义
2014/02/17 职场文书
药品业务员岗位职责
2014/04/17 职场文书
新书发布会策划方案
2014/06/09 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
八年级数学教学反思
2016/02/17 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python
Django drf请求模块源码解析
2021/06/08 Python
Python+tkinter实现高清图片保存
2022/03/13 Python
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android