倒计时列表实现(小程序端Vue)

news2024/11/24 17:31:01

//rich-text主要用来将展示html格式的,可以直接使用这个标签
<view class="ptBox" v-for="(item,index) in orderList" :key="index">   
    <rich-text :nodes="item.limit_time|limitTimeFilter"></rich-text>  
</view>

引入工具方法

import {formateTimeStamp} from '@/utils/index.js'
filters: {
    // 拼团有效期的filter
    limitTimeFilter (val){
        if (val > 0) {
            let formateLimitTimes = formateTimeStamp(val);
            let txt = `<div style="display:inline-block;padding:0 2px; color:#ffffff; height:43rpx; line-height: 43rpx; background-color: #F32B2B;border-radius: 4rpx ;">
                            ${formateLimitTimes.hour}
                        </div>
                        <div style="display:inline-block;color:#F32B2B; margin:0 5rpx;">:</div>
                        <div style="display:inline-block;padding:0 2px; color:#ffffff; height:43rpx; line-height: 43rpx; background-color: #F32B2B;border-radius: 4rpx ;">${formateLimitTimes.min}</div>
                        <div style="display:inline-block;color:#F32B2B; margin:0 5rpx;">:</div>
                        <div style="display:inline-block;padding:0 2px; color:#ffffff; height:43rpx; line-height: 43rpx; background-color: #F32B2B;border-radius: 4rpx ;">${formateLimitTimes.seconds}</div>`;
            return txt;
            } else {
            const twtxt = `0 时 0 分 0 秒`
            return twtxt;
            }
    } 
}, 
async findPinTuanOrderVos(){
    try{ 
        let res=await findPinTuanOrderVos(); 
        //数组返回的restHour:剩余小时
        //restMinute :剩余分钟
        //restSecond :剩余秒
        this.orderList=res.map((vs)=>{ //更新数组
            return { 
            //将返回的时分秒,计算成时间戳
...vs,limit_time:Number(vs.restHour*3600)+Number(vs.restMinute*60)+Number(vs.restSecond) }
        })
        this.ticker = setInterval(() => { //执行循环
            for(let i=0;i<res.length;i++){  
                    //每循环一次将时间戳减一
                this.orderList[i].limit_time=this.orderList[i].limit_time - 1
               
            } 
        },1000)
    }catch(v){
        
    } 
},

工具类封装

//utils/index.js

// 计算出时间戳的具体数据:比如将85400转化为 n时n分n秒
export function formateTimeStamp (timeStamp) {
  var hour;
  var min;
  var seconds;

  hour = parseInt(timeStamp / (60 * 60)) // 计算整数小时数
  var afterHour = timeStamp - hour * 60 * 60 // 取得算出小时数后剩余的秒数
  min = parseInt(afterHour / 60) // 计算整数分
  seconds = parseInt(timeStamp - hour * 60 * 60 - min * 60) // 取得算出分后剩余的秒数

  if (hour < 10) {
    hour = '0' + hour
  }

  if (min < 10) {
    min = '0' + min;
  }

  if (seconds < 10) {
    seconds = '0' + seconds;
  }

  const restTime = {
    hour: hour,
    min: min,
    seconds: seconds
  }
  return restTime
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1034605.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue+three.js中使用Ammo.js

直接通过npm i ammo.js安装进webpack的项目里调用时&#xff0c;会出现如下报错&#xff1a; ERROR in ./node_modules/ammo.js/ammo.js 1:1683-1696 Mo…

VMware中安装Ubuntu(2023年)

Ubuntu安装 前言 安装过程中电脑发热时正常的&#xff0c;这个还是稍微有点点大&#xff1b;下载的版本根据自己的喜好来&#xff0c;新版本肯定要比旧版本占用的空间更大&#xff0c;大家自行选择&#xff1b;仅供学习使用的话可以下载成熟稳定的版本&#xff0c;例如16、18…

【新版】系统架构设计师 - 案例分析 - 架构设计<SOA与微服务>

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 文章目录 架构 - 案例分析 - 架构设计&#xff1c;SOA与微服务&#xff1e;例题1例题2例题3例题4 架构 - 案例分析 - 架构设计&#xff1c;SOA与微服务&#xff1e; 这里SOA与微服务的例题只对应找寻了几个&#x…

servlet开发-通过Tomcat部署一个简单的webapp

首先我们得下载安装Tomcat&#xff0c;推荐看Tomcat&#xff08;HTTP服务器&#xff09;下载以及认识&#xff0c; 我们将通过打印一个hello word的方式来熟悉servlet开发,通过Tomcat部署一个webapp的流程 servlet的含义 Tomcat提供了一系列的api接口&#xff0c;这些api背后…

dfs力扣1993树上的操作

文章目录 dfs力扣1993树上的操作题目示例提示做题历程做题思路数组定义编写代码 完整代码 dfs力扣1993树上的操作 题目 题目链接 给你一棵 n 个节点的树&#xff0c;编号从 0 到 n - 1 &#xff0c;以父节点数组 parent 的形式给出&#xff0c;其中 parent[i] 是第 i 个节点…

Java多线程篇(5)——cas和atomic原子类

文章目录 CASAtomic 原子类一般原子类针对aba问题 —— AtomicStampedReference针对大量自旋问题 —— LongAdder CAS 原理大致如下&#xff1a; 在java的 Unsafe 类里封装了一些 cas 的api。以 compareAndSetInt 为例&#xff0c;来看看其底层实现。 可以发现&#xff0c;最…

基于abaqus的非等速生长Voronoi晶体模型生成插件

1. 非等速生长晶体模型简介 对于标准Voronoi而言&#xff0c;每个晶粒的生长速率是相同的&#xff0c;任意两个晶粒的交界线为其形核点连线的垂直平分线&#xff0c;交界线为一条直线&#xff0c;如图1.1所示。 图1.1 标准Voronoi晶粒交界线 而对于非等速生长Voronoi晶体而言…

项目篇——java文档搜索引擎

Java 文档搜索引擎 文章目录 Java 文档搜索引擎一、分词二、完成parser 类2.1、排除非html文件2.2、解析html以下是解析 HTML 标题的方法以下是解析 对应的 URL以下是解析 HTML的正文&#xff1a; 补充&#xff1a;倒序索引 三、实现 index 类3.1、实现索引结构3.2、索引中新增…

学会使用Git 和 GitHub

Git 和 GitHub 都是程序员每天都要用到的东西 —— 前者是目前最先进的 版本控制工具&#xff0c;拥有最多的用户&#xff0c;且管理着地球上最庞大的代码仓库&#xff1b;而后者是全球最大 同性交友 代码托管平台、开源社区。 在没有这两个工具时&#xff0c;编程可能是这样的…

Go环境搭建

下载 官网地址 选择Download 根据自己的请选择对应的版本进行下载(我这里使用windos go.1.21.1版本) 我这里选择zip类型进行下载免安装版(你也可以选择mis类型进行下载,安装版一步一步next就行)。 安装 解压安装包 目录说明 配置环境变量 验证是否安装成功 完成上述配置…

通过插件去除Kotlin混淆去除 @Metadata标记

在Kotlin中&#xff0c;Metadata是指描述Kotlin类的元数据。它包含了关于类的属性、函数、注解和其他信息的描述。Metadata的作用主要有以下几个方面&#xff1a; 反射&#xff1a;Metadata可以用于在运行时获取类的信息&#xff0c;包括类的名称、属性、函数等。通过反射&…

【功能设计】数据分发功能设计

文章目录 设计脑图功能性非功能性 功能设计文档1. 需求分析1.1、功能性需求1.2、非功能性需求 2. 功能设计2.1 业务流程图2.2 数据流图2.3 表结构设计2.4 接口设计2.5 功能点 3.非功能性设计3.1 性能3.2 可用性3.3 并发性3.4 安全性 设计脑图 功能性 非功能性 功能设计文档 1…

国庆中秋特辑(三)使用生成对抗网络(GAN)生成具有节日氛围的画作,深度学习框架 TensorFlow 和 Keras 来实现

要用人工智能技术来庆祝国庆中秋&#xff0c;我们可以使用生成对抗网络&#xff08;GAN&#xff09;生成具有节日氛围的画作。这里将使用深度学习框架 TensorFlow 和 Keras 来实现。 一、生成对抗网络&#xff08;GAN&#xff09; 生成对抗网络&#xff08;GANs&#xff0c;…

FFMpeg zoompan 镜头聚焦和移动走位

案例 原始图片 # 输出帧数&#xff0c;默认25帧/秒&#xff0c;25*4 代表4秒 # s1280x80 # 输出视频比例&#xff0c;可以设置和输入图片大小一致 # zoom0.002 表示每帧放大的倍数&#xff0c;下面代码是25帧/每秒 * 4秒&#xff0c;共1000帧 # 最终是 0.002*25*4 0.2&…

什么是深度学习?最易懂的机器学习入门文章

1. 什么是深度学习? 深度学习是机器学习领域中一个新的研究方向&#xff0c;它被引入机器学习使其更接近于人工智能。 原文&#xff1a;【科普&实践】超详细&#xff01;一文带你玩转深度学习 - 飞桨AI Studio星河社区 深度学习是机器学习领域中一个新的研究方向&#xff…

折腾LINUX复古终端

这个复古终端是cool-retro-term&#xff0c;先来图 点击GITHUB地址 开始用docker运行&#xff0c;报错。后来用x11docker&#xff0c;因为我要远程通过SSH的x11转发&#xff0c;但实际x11docker的默认backbone就说docker&#xff0c;也就说要先用docker下载镜像&#xff0c…

[maven] 实现使用 plugin 及 properties 简述

[maven] 实现&使用 plugin 及 properties 简述 这章内容&#xff0c;我个人感觉可看可不看……&#xff1f; 不过课都上了&#xff0c;笔记 &#x1f4d2; 补完才对得起自己嘛 plugins 主要讲一下 maven 的 plugin 时怎么实现的&#xff0c;以及项目中怎么调用自己实现…

成集云 | 用友T+集成聚水潭ERP(用友T+主管供应链)| 解决方案

源系统成集云目标系统 方案介绍 用友T是一款由用友畅捷通推出的新型互联网企业管理系统&#xff0c;它主要满足成长型小微企业对其灵活业务流程的管控需求&#xff0c;并重点解决往来业务管理、订单跟踪、资金、库存等管理难题。 聚水潭是一款以SaaS ERP为核心&#xff0c;集…

mysql事务测试

mysql的事务处理主要有两种方法1、用begin,rollback,commit来实现 begin; -- 开始一个事务 rollback; -- 事务回滚 commit; -- 事务提交 2、直接用set来改变mysql的自动提交模式 mysql默认是自动提交的&#xff0c;也就是你提交一个sql&#xff0c;它就直接执行&#xff01;我…

微信管理系统可以解决什么问题?

微信作为一款社交通讯软件&#xff0c;已经成为人们日常生活中不可缺少的工具。不仅个人&#xff0c;很多企业都用微信来联系客户、维护客户和营销&#xff0c;这自然而然就会有很多微信账号、手机也多&#xff0c;那管理起来就会带来很多的不便&#xff0c;而微信管理系统正好…