当前位置: 首页 > 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。…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...