首页 > 其他分享 >element-plus 倒计时el-countdown添加背景色

element-plus 倒计时el-countdown添加背景色

时间:2024-09-06 16:02:36浏览次数:10  
标签:el const String padStart 60 element countdown time Math

效果图:

 实现方法:

<el-countdown
      :time="countdownTime"
      :formatter="formatter"
    />
    <div v-html="formattedTime"></div>
formatter(time) {
      const days = Math.floor(time / 1000 / 60 / 60 / 24); // 计算天数
      const hours = Math.floor((time / 1000 / 60 / 60) % 24); // 计算小时
      const minutes = Math.floor((time / 1000 / 60) % 60); // 计算分钟
      const seconds = Math.floor((time / 1000) % 60); // 计算秒

      // 更新 formattedTime 以便在 v-html 中使用
      this.formattedTime = `
        <span class="countdown-item days">${days}天</span>
        <span class="countdown-item hours">${String(hours).padStart(2, '0')}</span>:
        <span class="countdown-item minutes">${String(minutes).padStart(2, '0')}</span>:
        <span class="countdown-item seconds">${String(seconds).padStart(2, '0')}</span>
      `;
      
      return `${days}天 ${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`; // 返回字符串以满足 formatter 的要求
    },

 

标签:el,const,String,padStart,60,element,countdown,time,Math
From: https://www.cnblogs.com/gteman/p/18400438

相关文章

  • ELK在Linux上部署教程
    DockerCompose搭建ELKElasticsearch默认使用mmapfs目录来存储索引。操作系统默认的mmap计数太低可能导致内存不足,我们可以使用下面这条命令来增加内存sysctl-wvm.max_map_count=262144创建Elasticsearch数据挂载路径mkdir-p/echola/elasticsearch/data对该路径......
  • SpringCloud集成ELK
    1、添加依赖<dependency><groupId>net.logstash.logback</groupId><artifactId>logstash-logback-encoder</artifactId><version>6.1</version></dependency>2、在logback-spring.xml中添加配置信息(logback-spring.xml......
  • jekins--- 通过jekins执行远程机器的shell脚本
    jekins和脚本部署的不是在同一个机器,简单的来说说如何用jekins通过SSH连接执行远程机器的shell脚本1:简单的看一下脚本的内容,自己写的一个简单的测试脚本,执行了就会打印一个脚本已执行成功在日志中#!/bin/bash#日志文件路径LOG_FILE="/dongguangshu/logfile.log"#要打印......
  • 基于Hutool技术Excel表格导出
    今天分享一下基于Hutool技术Excel表格导出,我们先看看导出Excel表格的样子第1步:引入maven依赖<dependencies><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.3.3</version>&l......
  • Angular 导出Excel
    在Angular中导出Excel文件,可以使用第三方库如xlsx来处理Excel的生成和导出操作。以下是一个简单的步骤来实现从Angular项目中导出Excel文件。1.安装xlsx和file-saver在项目根目录下运行以下命令来安装所需的库:npminstallxlsxfile-saver--save2.在组件中......
  • ElasticSearch系列---【批量删除(或修改)索引别名】
    1.问题背景es集群突然查询很慢,定位到是查询近360天指标索引时,查询量太大导致的,每天三四百万流水,频繁查询把数据变成了热点数据,加载到内存中,导致内存不断增大,最终被撑爆,报datatoolarge的错误。2.临时解决方案因为是指标,所以允许为空,后续再重新计算,补上,所以,在生产环境,我们选择......
  • 基于JavaWeb开发的Java+SpringBoot+vue+element实现前后端分离玩具商城系统
    基于JavaWeb开发的Java+SpringBoot+vue+element实现前后端分离玩具商城系统......
  • 使用python读取excel数据(详解教程)
    使用Python读取Excel数据通常可以通过pandas库来实现。pandas提供了强大的数据处理功能,并且支持多种数据格式,包括Excel。下面是详细的代码讲解:目录1.安装必要的库2.读取Excel文件3.代码讲解1.导入库:2.指定文件路径和工作表名称:3.读取Excel文件:4.打印数据:......
  • IntelliJ IDEA 2024.1.6 (Ultimate Edition)中配置Java Web应用程序
    1. 前期准备工作已经下载安装了JDK(https://www.oracle.com/cn/java/technologies/javase/javase8u211-later-archive-downloads.html)和Tomcat(https://tomcat.apache.org/),并配置了环境变量(安装版的JDK和Tomcat不需要配置环境变量),注意JDK和Tomcat的版本号要相互适应。去官网下......
  • 使用 Android Lua Helper 在VSCODE中调试安卓Lua应用
    一、VSCODE与AndroidLuaHelper的功能特点VisualStudioCode(VSCODE)是一款功能强大的代码编辑器,它以其高度可定制的界面、强大的扩展生态系统、流畅的性能表现以及对众多编程语言的天然支持而备受开发者青睐。在众多的开发场景中,VSCODE都展现出了卓越的性能和灵活性。Lua......