前端vue uni-app cc-countdown倒计时组件
随着技术的不断发展,传统的开发方式使得系统的复杂度越来越高。在传统开发过程中,一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组件化开发,可以有效地实现单独开发,单独维护,而且它们之间可以随意的进行组合。大大提升了开发的效率,降低了维护的成本。
在本文中,我们将介绍如何在uni-app中使用cc-countdown组件。cc-countdown是一个倒计时组件,它可以显示剩余时间、天数、小时数、分钟数和秒数。用户可以通过设置不同的属性来定制倒计时的外观和行为。 附源码下载地址:https://ext.dcloud.net.cn/plugin?id=13819
效果图如下:
使用方法
首先,我们需要在uni-app项目文件中引入cc-countdown组件,并通过属性对其进行配置。下面是一个示例:
<cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="true" :showDay="false" :day="0" :hour="0" :minute="0" :second="12" @timeup="timeup"></cc-countdown>
在上述代码中,我们可以看到cc-countdown组件有以下属性:
-
color:文字颜色,默认为白色。 -
background-color:背景颜色,默认为红色。 -
splitorColor:分割符颜色,默认为红色。 -
showColon:是否显示冒号,默认为true(显示)。 -
showDay:是否显示天数,默认为false(不显示)。 -
day:要显示的天数,默认为0。 -
hour:要显示的小时数,默认为0。 -
minute:要显示的分钟数,默认为0。 -
second:要显示的秒数,默认为12。 -
@timeup:倒计时结束事件,用于处理倒计时结束后的操作。
除了上述属性外,我们还可以通过事件监听来实现自定义功能。例如,当倒计时结束时,我们可以触发一个自定义事件。下面是一个示例:
<cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="true" :showDay="false" :day="0" :hour="0" :minute="0" :second="12" @timeup="timeup"></cc-countdown>
在上述代码中,我们通过@timeup属性监听了倒计时结束事件,并定义了一个名为timeup的方法来处理该事件。具体的处理逻辑将在后续章节中介绍。
HTML代码实现部分
接下来,我们将展示完整的HTML代码实现部分。首先是页面的布局结构,然后是样式定义和组件的实现。
HTML代码实现部分
<template><view class="page"><view style="height: 60px;"></view><!-- color 文字颜色 background-color:背景颜色 splitorColor:分割符:颜色 showColon:是否显示冒号 false显示时分秒 showDay:是否显示天 day:天 hour:时 minute:分 second:秒 @timeup:倒计时结束事件--><cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="true" :showDay="false" :day="0":hour="0" :minute="0" :second="12" @timeup="timeup"></cc-countdown><view style="height: 30px;"></view><!-- color 文字颜色 background-color:背景颜色 splitorColor:分割符:颜色 showColon:是否显示冒号 false显示时分秒 showDay:是否显示天 day:天 hour:时 minute:分 second:秒 @timeup:倒计时结束事件--><cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="false" :showDay="false":day="0" :hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown><view style="height: 30px;"></view><!-- color 文字颜色 background-color:背景颜色 splitorColor:分割符:颜色 showColon:是否显示冒号 false显示时分秒 showDay:是否显示天 day:天 hour:时 minute:分 second:秒 @timeup:倒计时结束事件--><cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="true" :showDay="true" :day="1":hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown><view style="height: 30px;"></view><!-- color 文字颜色 background-color:背景颜色 splitorColor:分割符:颜色 showColon:是否显示冒号 false显示时分秒 showDay:是否显示天 day:天 hour:时 minute:分 second:秒 @timeup:倒计时结束事件--><cc-countdown color="#FFF" background-color="red" splitorColor="red" :showColon="false" :showDay="true" :day="1":hour="1" :minute="12" :second="32"></cc-countdown><view style="height: 60px;"></view><!-- color 文字颜色 background-color:背景颜色 splitorColor:分割符:颜色 showColon:是否显示冒号 false显示时分秒 showDay:是否显示天 day:天 hour:时 minute:分 second:秒 @timeup:倒计时结束事件--><cc-countdown color="#FFF" background-color="orange" splitorColor="red" :showColon="true" :showDay="false":day="0" :hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown><view style="height: 30px;"></view><!-- color 文字颜色 background-color:背景颜色 splitorColor:分割符:颜色 showColon:是否显示冒号 false显示时分秒 showDay:是否显示天 day:天 hour:时 minute:分 second:秒 @timeup:倒计时结束事件--><cc-countdown color="#FFF" background-color="orange" splitorColor="red" :showColon="false" :showDay="false":day="0" :hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown><view style="height: 30px;"></view><!-- color 文字颜色 background-color:背景颜色 splitorColor:分割符:颜色 showColon:是否显示冒号 false显示时分秒 showDay:是否显示天 day:天 hour:时 minute:分 second:秒 @timeup:倒计时结束事件--><cc-countdown color="#FFF" background-color="orange" splitorColor="red" :showColon="true" :showDay="true":day="1" :hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown><view style="height: 30px;"></view><!-- color 文字颜色 background-color:背景颜色 splitorColor:分割符:颜色 showColon:是否显示冒号 false显示时分秒 showDay:是否显示天 day:天 hour:时 minute:分 second:秒 @timeup:倒计时结束事件--><cc-countdown color="#FFF" background-color="orange" splitorColor="red" :showColon="false" :showDay="true":day="1" :hour="1" :minute="12" :second="32" @timeup="timeup"></cc-countdown></view></template><script>export default {components: {},data() {return {}},methods: {// 倒计时结束timeup() {uni.showModal({title: '温馨提示',content: '倒计时结束'})}},}</script><style lang="scss" scoped>page {background-color: white;}</style>相关文章:
前端vue uni-app cc-countdown倒计时组件
随着技术的不断发展,传统的开发方式使得系统的复杂度越来越高。在传统开发过程中,一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组…...
fifo读写的数据个数
fifo IP核设置读写个数 如果不勾选精确值,则统计的当前写入和待读出的数据为估计值,可能会相差2个左右。且fifo设计的wr_data_count. wr_data_count:当前的fifo中剩余已经写入的数据。 rd_data_count:当前的fifo中剩余可以读出…...
Java之Map接口
文章目录 简述Map中key-value特点 Map接口的常用方法Map的主要实现类:HashMapHashMap概述 Map实现类之二:LinkedHashMapMap实现类之三:TreeMapMap实现类之四:Hashtable(古老实现类)Map实现类之五࿱…...
windows系统中的命令行可以用python,pip等命令(已在系统中添加过python环境变量),但是pycharm的terminal中无法使用。
如果你已经在Windows系统中添加了Python环境变量,那么在命令行中使用python和pip命令应该是没有问题的。但是在PyCharm的Terminal中无法使用这些命令,可能是因为PyCharm的Terminal使用的是自己的虚拟环境,而不是系统环境。 你可以尝试在PyCh…...
编译 OneFlow 模型
本篇文章译自英文文档 Compile OneFlow Models tvm 0.14.dev0 documentation 作者是 BBuf (Xiaoyu Zhang) GitHub 更多 TVM 中文文档可访问 →Apache TVM 是一个端到端的深度学习编译框架,适用于 CPU、GPU 和各种机器学习加速芯片。 | Apache TVM 中文站 本文介…...
【kubernetes】k8s单master集群环境搭建及kuboard部署
k8s入门学习环境搭建 学习于许大仙: https://www.yuque.com/fairy-era k8s官网 https://kubernetes.io/ kuboard官网 https://kuboard.cn/ 基于k8s 1.21.10版本 前置环境准备 一主两从,三台虚拟机 CPU内存硬盘角色主机名IPhostname操作系统4C16G50Gmasterk8s-mast…...
0802|IO进程线程 day5 进程概念
一、进程的基础 1.1 什么是进程 1)进程是程序的一次执行过程 程序:是静态的,它是存储在外存上的可执行二进制文件;进程:动态的概念,它是程序的一次执行过程,包括了进程的创建,调度、…...
4 Promethues监控主机和容器
目录 目录 1. 监控节点 1.1 安装Node exporter 解压包 拷贝至目标目录 查看版本 1.2 配置Node exporter 1.3 配置textfile收集器 1.4 启动systemd收集器 1.5 基于Docker节点启动node_exporter 1.6 抓取Node Exporter 1.7 过滤收集器 2. 监控Docker容器 2.1 运行cAdviso…...
亚马逊买家账号ip关联怎么处理
对于亚马逊买家账号,同样需要注意IP关联问题。在亚马逊的眼中,如果多个买家账号共享相同的IP地址,可能会被视为潜在的操纵、违规或滥用行为。这种情况可能导致账号受到限制或处罚。 处理亚马逊买家账号IP关联问题,建议采取以下步骤…...
NO4 实验四:生成Web工程
1、说明 使用 mvn archetype:generate 命令生成 Web 工程时,需要使用一个专门的 archetype。这个专门生成 Web 工程骨架的 archetype 可以参照官网看到它的用法: 2、操作 注意:如果在上一个工程的目录下执行 mvn archetype&…...
【linux】进程
文章目录 前言一、概念基本概念进程-PCBtask_structtask_struct内容分类 二、查看和创建进程查看进程PID创建进程 三、进程状态五、僵尸进程和孤儿进程僵尸进程孤儿进程获取进程退出码 四、进程优先级基本概念查看系统进程PRI and NI用top命令更改已存在进程的nice 前言 我们常…...
电商高并发设计之SpringBoot整合Redis实现布隆过滤器
文章目录 问题背景前言布隆过滤器原理使用场景基础中间件搭建如何实现布隆过滤器引入依赖注入RedisTemplate布隆过滤器核心代码Redis操作布隆过滤器验证 总结 问题背景 研究布隆过滤器的实现方式以及使用场景 前言 本篇的代码都是参考SpringBootRedis布隆过滤器防恶意流量击穿缓…...
SpringBoot第25讲:SpringBoot集成MySQL - MyBatis 注解方式
SpringBoot第25讲:SpringBoot集成MySQL - MyBatis 注解方式 本文是SpringBoot第25讲,上文主要介绍了Spring集成MyBatis访问MySQL,采用的是XML配置方式;我们知道除了XML配置方式,MyBatis还支持注解方式。本文主要介绍Sp…...
服务器返回 413 Request Entity Too Large
问题 上传一个大于1.5M的文件时,报错:413 Request Entity Too Large 使用的配置 1、用的是docker环境,还有一层代理,代理用的镜像是:jwilder/nginx-proxy 2、docker里是有php和nginx 确认配置 docker里的php和ngi…...
如何一目了然地监控远程 Linux 系统
动动发财的小手,点个赞吧! Glances 是一款免费的开源、现代、跨平台、实时 top 和类似 htop 的系统监控工具,与同类工具相比,它提供了先进的功能,并且可以在不同的模式下运行:作为独立模式、客户端/服务器模…...
9.环境对象和回调函数
9.1环境对象 指的是函数内部特殊的变量this,它代表着当前函数运行时所处的环境 作用: 弄清楚this的指向,可以让我们代码更简洁 ➢函数的调用方式不同,this指代的对象也不同 ➢[谁调用,this 就指代谁] 是判断this指向的…...
51单片机(普中HC6800-EM3 V3.0)实验例程软件分析概览
本专栏将分析普中HC6800-EM3 V3.0 (9.22)\5--实验程序\基础实验例程中的各个例程的代码。 引言:本专栏将对历程中的关键代码进行分析与拓展,再学习一遍51,记录与各位一起进步。 下面是文件列表: E:\USER\000study\000_51单片机\000普中HC6800-EM3 V3.0 (9.22)\5--实…...
ubuntu18.04 安装php7.4-xdebug
文章目录 场景解决 场景 apt install php7.4-xdebug 下载失败, 只好通过编译解决了 解决 https://xdebug.org/wizard 输入php -i的执行结果...
java 定时任务不按照规定时间执行
这里写目录标题 使用异步启动可能出现的问题排查代码中添加的定时任务步骤是否正确排查是否任务阻塞,如果定时任务出现异常阻塞后,将不会在次执行java中多个Scheduled定时器不执行为了让Scheduled效率更高,我们可以通过两种方法将定时任务变成…...
Android复习(Android基础-四大组件)—— Activity
Activity作为四大组件之首,是使用最为频繁的一种组件,中文直接翻译为"活动",不过如果被翻译为"界面"会更好理解。正常情况,除了Window,Dialog和Toast , 我们能见到的界面只有Activity。…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
基础测试工具使用经验
背景 vtune,perf, nsight system等基础测试工具,都是用过的,但是没有记录,都逐渐忘了。所以写这篇博客总结记录一下,只要以后发现新的用法,就记得来编辑补充一下 perf 比较基础的用法: 先改这…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
【论文阅读28】-CNN-BiLSTM-Attention-(2024)
本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...
学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕,#AI 监考一度冲上热搜。当AI深度融入高考,#时间同步 不再是辅助功能,而是决定AI监考系统成败的“生命线”。 AI亮相2025高考,40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕,江西、…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时,显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
关于easyexcel动态下拉选问题处理
前些日子突然碰到一个问题,说是客户的导入文件模版想支持部分导入内容的下拉选,于是我就找了easyexcel官网寻找解决方案,并没有找到合适的方案,没办法只能自己动手并分享出来,针对Java生成Excel下拉菜单时因选项过多导…...
掌握 HTTP 请求:理解 cURL GET 语法
cURL 是一个强大的命令行工具,用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中,cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...
Elastic 获得 AWS 教育 ISV 合作伙伴资质,进一步增强教育解决方案产品组合
作者:来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布,Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明,Elastic 作为 …...
