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

//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: {// 拼团有效期的filterlimitTimeFilter (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.mzph.cn/news/83649.shtml

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

相关文章

2023_Spark_实验十二:Spark高级算子使用

掌握Spark高级算子在代码中的使用 相同点分析 三个函数的共同点&#xff0c;都是Transformation算子。惰性的算子。 不同点分析 map函数是一条数据一条数据的处理&#xff0c;也就是&#xff0c;map的输入参数中要包含一条数据以及其他你需要传的参数。 mapPartitions函数是一个…

网络编程day03(UDP中的connect函数、tftp)

今日任务&#xff1a;tftp的文件上传下载&#xff08;服务端已经准备好&#xff09; 服务端&#xff08;已上传&#xff09; 客户端&#xff1a; 代码&#xff1a; #include <stdio.h> #include <string.h> #include <stdlib.h> #include <sys/types.h…

编译工具:CMake(八) | cmake 常用指令

编译工具&#xff1a;CMake&#xff08;八&#xff09; | cmake 常用指令 基本指令 基本指令 ADD_DEFINITIONS向 C/C编译器添加-D 定义&#xff0c;比如:ADD_DEFINITIONS(-DENABLE_DEBUG-DABC)&#xff0c;参数之间用空格分割。 如果你的代码中定义了#ifdef ENABLE_DEBUG #end…

Java 调用 GitLabAPI 获取仓库里的文件件 提交记录

1. 需求 项目组 需要做统计&#xff0c;获取每个开发人员的代码提交次数&#xff0c;提交时间&#xff0c;提交人等等&#xff0c;因代码在GitLab上管理&#xff0c;所以需要调用GitLabAPI来获取。 2. 开发 API官网&#xff1a;https://docs.gitlab.com/ee/api/ 2.1 创建自…

java Spring Boot验证码美化,白色背景 随机四个数 每个字随机颜色

我前文 Spring Boot2.7生成用于登录的图片验证码讲述了生成验证码的方法 但是这样生成验证码 非常难看 比较说 验证码是要展示到web程序中的 这样让用户看着 属实不太好 我们可以将接口改成 GetMapping(value "/captcha", produces MediaType.IMAGE_PNG_VALUE) …

RocketMQ 发送事务消息

文章目录 事务的相关理论事务ACID特性CAP 理论BASE 理论 事务消息应用场景MQ 事务消息处理处理逻辑 RocketMQ 事务消息处理流程官网事务消息流程图 rocketmq-client-java 示例&#xff08;gRPC 协议&#xff09;创建事务主题生产者消费者 rocketmq-client 示例&#xff08;Remo…

代码随想录Day1 数组基础

本文详细说明和思路来源于: 代码随想录 视频讲解: 手把手带你撕出正确的二分法 | 二分查找法 | 二分搜索法 | LeetCode&#xff1a;704. 二分查找_哔哩哔哩_bilibili Leetcode T 704 题目链接 704. 二分查找 - 力扣&#xff08;LeetCode&#xff09; 题目概述1: 思路: 1.因…

基于微信小程序的高校宿舍信息管理系统设计与实现(源码+lw+部署文档+讲解等)

前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb;…

局域网下共享文件夹全流程

请注意&#xff1a;配置共享文件夹以便他人无需输入账户和密码访问可能带来安全风险。请确保你明白这一点并在适当的网络环境中操作。 以下说明是基于 Windows 系统的&#xff1a; 步骤 1&#xff1a;共享文件夹 找到你想要共享的文件夹&#xff0c;右击选择“属性”。 转到…

Docker从认识到实践再到底层原理(六-1)|Docker容器基本介绍+命令详解

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…

RabbitMQ学习总结(11)—— RabbitMQ 核心概念与架构

MQ 技术概述 什么是 MQ MQ(message queue),从字面意思上看,本质是个队列,FIFO 先入先出,只不过队列中存放的内容是 message 而已,还是一种跨进程的通信机制,用于上下游传递消息。在互联网架构中,MQ 是一种非常常见的上下游 “逻辑解耦+物理解耦” 的消息通信服务。使用…

网页的快捷方式打开自动全屏--Chrome、Firefox 浏览器相关设置

Firefox 的全屏方式与 Chrome 不同&#xff0c;Chrome 自带全屏模式以及APP模式&#xff0c;通过简单的参数即可设置&#xff0c;而Firefox暂时么有这个功能&#xff0c;Firefox 的全屏功能可以通过全屏插件实现。 全屏模式下&#xff0c;按 F11 不会退出全屏&#xff0c;鼠标…

grafana对指标进行组合计算

在使用Grafana配置图表看板时&#xff0c;我们可能需要对多个查询条件筛选出来的结果进行计算&#xff0c;把计算结果生成最终的图表。此时需要用到transform功能【add field from calculation】&#xff1a;

flutter iOS 缺少通知权限,缺少位置权限

App Store Connect 亲爱的开发者, 我们发现了一个或多个问题与您的应用程序&#xff0c;“hayya附近的朋友Chat&Meet”1.0.3(1)最近的交付。您的交付是成功的&#xff0c;但您可能希望在您的下一次交付纠正以下问题: ITMS-90078:缺少推送通知授权-你的应用程序似乎注册了…

pytorch的卷积层池化层和非线性变化 和机器学习线性回归

卷积层&#xff1a; 两个输出的情况 就会有两个通道 可以改变通道数的 最简单的神经网络结构&#xff1a; nn.Mudule就是继承父类 super执行的是 先执行父类函数里面的 forward执行的就是前向网络&#xff0c;就是往前推进的&#xff0c;当然也有反向转播&#xff0c;那就是…

福建福州大型钢结构件3D扫描全尺寸三维测量平面度平行度检测-CASAIM中科广电

高精度三维扫描技术已经在大型工件制造领域发挥着重要作用&#xff0c;特别是在质量检测环节&#xff0c;高效、高精度&#xff0c;可以轻松实现全尺寸三维测量。本期&#xff0c;我们要分享的应用是在大型钢结构件的关键部位尺寸及形位公差检测。 钢结构件&#xff0c;是将多…

fabic.js Quadratic Curve /可控制的曲线

需要绘制一条可控制的贝塞尔曲线&#xff0c;发现fabic官网中一个demo有点类似。感兴趣的可以移步官网查看demo。 官网的demo是对于html 而言的&#xff0c;放在vue中需要变换一下&#xff0c;具体代码如下&#xff1a; <template><div class"dashboard-contai…

个人所思所想录

&#x1f9d1;‍&#x1f4bb;作者名称&#xff1a;DaenCode &#x1f3a4;作者简介&#xff1a;CSDN实力新星&#xff0c;后端开发两年经验&#xff0c;曾担任甲方技术代表&#xff0c;业余独自创办智源恩创网络科技工作室。会点点Java相关技术栈、帆软报表、低代码平台快速开…

Java版分布式微服务云开发架构 Spring Cloud+Spring Boot+Mybatis 电子招标采购系统功能清单

项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&#xff0c;以及审…

在VMware虚拟机中固定CentOS系统ip(使用桥接模式)

目录 一、前置说明二、前置准备2.1、切换虚拟机网络为桥接模式2.2、查看本机网络信息 三、配置CentOS系统IP3.1、进入系统输入ip addr 查看本机网络配置名称3.2、查看网络配置目录&#xff0c;网络配置文件名称3.3、修改网络配置文件 ifcfg-ens33 固定IP3.4、重启网络 一、前置…