当前位置: 首页 > news >正文

前端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倒计时组件

随着技术的不断发展&#xff0c;传统的开发方式使得系统的复杂度越来越高。在传统开发过程中&#xff0c;一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改&#xff0c;造成牵一发而动全身的情况。为了解决这个问题&#xff0c;我们采用了组件化的开发模式。通过组…...

fifo读写的数据个数

fifo IP核设置读写个数 如果不勾选精确值&#xff0c;则统计的当前写入和待读出的数据为估计值&#xff0c;可能会相差2个左右。且fifo设计的wr_data_count. wr_data_count&#xff1a;当前的fifo中剩余已经写入的数据。 rd_data_count&#xff1a;当前的fifo中剩余可以读出…...

Java之Map接口

文章目录 简述Map中key-value特点 Map接口的常用方法Map的主要实现类&#xff1a;HashMapHashMap概述 Map实现类之二&#xff1a;LinkedHashMapMap实现类之三&#xff1a;TreeMapMap实现类之四&#xff1a;Hashtable&#xff08;古老实现类&#xff09;Map实现类之五&#xff1…...

windows系统中的命令行可以用python,pip等命令(已在系统中添加过python环境变量),但是pycharm的terminal中无法使用。

如果你已经在Windows系统中添加了Python环境变量&#xff0c;那么在命令行中使用python和pip命令应该是没有问题的。但是在PyCharm的Terminal中无法使用这些命令&#xff0c;可能是因为PyCharm的Terminal使用的是自己的虚拟环境&#xff0c;而不是系统环境。 你可以尝试在PyCh…...

编译 OneFlow 模型

本篇文章译自英文文档 Compile OneFlow Models tvm 0.14.dev0 documentation 作者是 BBuf (Xiaoyu Zhang) GitHub 更多 TVM 中文文档可访问 →Apache TVM 是一个端到端的深度学习编译框架&#xff0c;适用于 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版本 前置环境准备 一主两从&#xff0c;三台虚拟机 CPU内存硬盘角色主机名IPhostname操作系统4C16G50Gmasterk8s-mast…...

0802|IO进程线程 day5 进程概念

一、进程的基础 1.1 什么是进程 1&#xff09;进程是程序的一次执行过程 程序&#xff1a;是静态的&#xff0c;它是存储在外存上的可执行二进制文件&#xff1b;进程&#xff1a;动态的概念&#xff0c;它是程序的一次执行过程&#xff0c;包括了进程的创建&#xff0c;调度、…...

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关联怎么处理

对于亚马逊买家账号&#xff0c;同样需要注意IP关联问题。在亚马逊的眼中&#xff0c;如果多个买家账号共享相同的IP地址&#xff0c;可能会被视为潜在的操纵、违规或滥用行为。这种情况可能导致账号受到限制或处罚。 处理亚马逊买家账号IP关联问题&#xff0c;建议采取以下步骤…...

NO4 实验四:生成Web工程

1、说明 使用 mvn archetype&#xff1a;generate 命令生成 Web 工程时&#xff0c;需要使用一个专门的 archetype。这个专门生成 Web 工程骨架的 archetype 可以参照官网看到它的用法&#xff1a; 2、操作 注意&#xff1a;如果在上一个工程的目录下执行 mvn archetype&…...

【linux】进程

文章目录 前言一、概念基本概念进程-PCBtask_structtask_struct内容分类 二、查看和创建进程查看进程PID创建进程 三、进程状态五、僵尸进程和孤儿进程僵尸进程孤儿进程获取进程退出码 四、进程优先级基本概念查看系统进程PRI and NI用top命令更改已存在进程的nice 前言 我们常…...

电商高并发设计之SpringBoot整合Redis实现布隆过滤器

文章目录 问题背景前言布隆过滤器原理使用场景基础中间件搭建如何实现布隆过滤器引入依赖注入RedisTemplate布隆过滤器核心代码Redis操作布隆过滤器验证 总结 问题背景 研究布隆过滤器的实现方式以及使用场景 前言 本篇的代码都是参考SpringBootRedis布隆过滤器防恶意流量击穿缓…...

SpringBoot第25讲:SpringBoot集成MySQL - MyBatis 注解方式

SpringBoot第25讲&#xff1a;SpringBoot集成MySQL - MyBatis 注解方式 本文是SpringBoot第25讲&#xff0c;上文主要介绍了Spring集成MyBatis访问MySQL&#xff0c;采用的是XML配置方式&#xff1b;我们知道除了XML配置方式&#xff0c;MyBatis还支持注解方式。本文主要介绍Sp…...

服务器返回 413 Request Entity Too Large

问题 上传一个大于1.5M的文件时&#xff0c;报错&#xff1a;413 Request Entity Too Large 使用的配置 1、用的是docker环境&#xff0c;还有一层代理&#xff0c;代理用的镜像是&#xff1a;jwilder/nginx-proxy 2、docker里是有php和nginx 确认配置 docker里的php和ngi…...

如何一目了然地监控远程 Linux 系统

动动发财的小手&#xff0c;点个赞吧&#xff01; Glances 是一款免费的开源、现代、跨平台、实时 top 和类似 htop 的系统监控工具&#xff0c;与同类工具相比&#xff0c;它提供了先进的功能&#xff0c;并且可以在不同的模式下运行&#xff1a;作为独立模式、客户端/服务器模…...

9.环境对象和回调函数

9.1环境对象 指的是函数内部特殊的变量this&#xff0c;它代表着当前函数运行时所处的环境 作用&#xff1a; 弄清楚this的指向&#xff0c;可以让我们代码更简洁 ➢函数的调用方式不同&#xff0c;this指代的对象也不同 ➢[谁调用&#xff0c;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 定时任务不按照规定时间执行

这里写目录标题 使用异步启动可能出现的问题排查代码中添加的定时任务步骤是否正确排查是否任务阻塞&#xff0c;如果定时任务出现异常阻塞后&#xff0c;将不会在次执行java中多个Scheduled定时器不执行为了让Scheduled效率更高&#xff0c;我们可以通过两种方法将定时任务变成…...

Android复习(Android基础-四大组件)—— Activity

Activity作为四大组件之首&#xff0c;是使用最为频繁的一种组件&#xff0c;中文直接翻译为"活动"&#xff0c;不过如果被翻译为"界面"会更好理解。正常情况&#xff0c;除了Window&#xff0c;Dialog和Toast &#xff0c; 我们能见到的界面只有Activity。…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...