好资源导航 » 文章资讯 » 基于vue2的canvas时钟倒计时组件步骤解析

基于vue2的canvas时钟倒计时组件步骤解析

2023-09-06 06:02:05 59

今天给大家介绍一款基于vue2的canvas时钟倒计时组件，这个时钟倒计时组件采用canvas动画的炫酷动画效果形式，根据剩余时间的多少变换颜色和旋转扇形的速度，适合抢购、拍卖、下注等业务场景，且对移动端友好。

具体步骤分析：

假如设定倒计时总时间为15s，变黄色时机为10s，变红色时机为5s。

1、开始倒计时后颜色为绿色。绿色含义是：倒计时的时间离结束时间还很长。

2、10s后变黄色。黄色的含义是：倒计时的时间离结束时间挺近了，起警告作用。动画中，出现快速旋转的扇形。

3、5s后变红色。红色的含义是：倒计时的时间马上就要结束了，起强烈警告作用。动画中，快速旋转的扇形速度加快。

4、0s倒计时结束。动画消失。静态圆形框中显示提示文字。

安装

我们使用npm安装。

npminstallvue-canvas-countdown--save-dev

使用

首先在模板文件中加入组件信息。

然后加入js部分代码：

属性选项

属性类型单位默认值备注 fire: [Number] - 200 必选,在父组件this.fire++即可启动倒计时 width,height: [Number] px 200200 设置宽高 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时钟倒计时组件步骤解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

基于vue2的canvas时钟倒计时组件步骤解析

热门推荐

随机推荐