基于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插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 Javascript
关于Vue Router的10条高级技巧总结
May 06 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
php格式化日期实例分析
2014/11/12 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
Python中字典的基础知识归纳小结
2015/08/19 Python
python使用Matplotlib画条形图
2020/03/25 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
高三自我鉴定怎么写
2013/10/19 职场文书
外贸学院会计专业应届生求职信
2013/11/14 职场文书
餐饮管理自我介绍信
2014/01/15 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python