基于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 相关文章推荐
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
基于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
一个好用的分页函数
2006/11/16 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
python简单贪吃蛇开发
2019/01/28 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
python config文件的读写操作示例
2019/09/27 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
机电职业生涯规划书范文
2014/03/08 职场文书
营销团队口号
2014/06/06 职场文书
学用政策心得体会
2014/09/10 职场文书
十月围城观后感
2015/06/08 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL