倒计时列表实现(小程序端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 }
相关文章:
倒计时列表实现(小程序端Vue)
//rich-text主要用来将展示html格式的,可以直接使用这个标签 <view class"ptBox" v-for"(item,index) in orderList" :key"index"> <rich-text :nodes"item.limit_time|limitTimeFilter"></rich-text>…...
ContentType:application/x-www-form-urlencoded请求方法遇到的坑【PHP】
有些API要求请求的内容类型为application/x-www-form-urlencoded function requestUrl($url,$datanull,$httpstrue,$methodpost){//1.初始化url$ch curl_init($url);//2.设置相关的参数//字符串不直接输出,进行一个变量的存储curl_setopt($ch, CURLOPT_RETURNTRANSFER, true)…...
RabbitMQ - 死信、TTL原理、延迟队列安装和配置
目录 一、死信交换机 1.1、什么是死信交换机 1.2、TTL 1.2.1、什么是 TTL 1.2.2、通过 TTL 模拟触发死信 二、延迟队列 2.1、什么是延迟队列 2.2、配置延迟队列插件 2.2.1、延迟队列配置 a)下载镜像 b)运行容器 c)刚刚设定的Rabb…...
大数据与云计算实验一
检查是否开启 sudo service docker status 开启服务 sudo service docker start 运行服务 sudo docker run -itd -p 8080:80 nginx 查询ID docker ps -all 进入容器shell sudo docker exec -it <容器ID或容器名称> /bin/bash 找到/usr/share/nginx/html/index.…...
实施主品牌进化战略(一):确立主品牌进化架构
主品牌进化战略,即以主品牌为核心创造、巩固、转化竞争优势应对竞争环境变化,避免衰退,回归增长,让主品牌进化的方法论体系。主品牌进化战略制定要从 4 个方面出发:确立主品牌进化架构、更新和明确主品牌竞争方向、建立…...
linux搭建单机ES,集成ik分词器,文本抽取,Kibana可视化平台
Elasticsearch单机(Linux) 准备工作 第一项: 创建运行Elasticsearch和Kibana专用的普通用户,因为 elasticsearch 和 kibana 不允许使用 root用户启动,所以需要创建新用户启动。 linux用root权限创建一个用户赋权即可…...
金融和大模型的“两层皮”问题
几年前,我采访一位产业专家,他提到了一个高科技到产业落地的主要困惑:两层皮。 一些特别牛的技术成果在论文上发表了,这是一层皮。企业的技术人员,将这些成果产品化、商品化的时候,可能出于工程化的原因&am…...
智能生活从这里开始:数字孪生驱动的社区
数字孪生技术,这个近年来备受瞩目的名词,正迅速渗透到社区发展领域,改变着我们居住的方式、管理的方式以及与周围环境互动的方式。它不仅仅是一种概念,更是一种变革,下面我们将探讨数字孪生技术如何推动社区智能化发展…...
Python计算机二级知识点整理
1.当一个进程在运行过程中释放了系统资源后要调用 唤醒进程原语 唤醒进程原语是把进程从等待队列里移出到就绪队列并设置进程为就绪状态,当一个进程在运行过程中释放了系统资源后进入就绪状态,调用唤醒进程原语。 2. 3. 4.在希尔排序法中&#x…...
双系统ubuntu20.04(neotic版本)从0实现Gazebo仿真slam建图
双系统ubuntu20.04(neotic版本)从0实现Gazebo仿真slam建图 昨晚完成了ROS的多机通讯,还没来得及整理相关操作步骤,在进行实际小车的实验之前,还是先打算在仿真环境中进行测试,熟悉相关的操作步骤,计划通过虚拟机&…...
(JavaEE)(多线程案例)线程池 (简单介绍了工厂模式)(含经典面试题ThreadPoolExector构造方法)
线程诞生的意义,是因为进程的创建/销毁,太重了(比较慢),虽然和进程比,线程更快了,但是如果进一步提高线程创建销毁的频率,线程的开销就不能忽视了。 这时候我们就要找一些其他的办法…...
单播与多播mac地址
MAC 地址(Media Access Control Address)是一个用于识别网络设备的唯一标识符。每个网络设备都有一个独特的 MAC 地址,用于在局域网中进行通信。 单播MAC地址:单播MAC地址用于单播通信,即一对一的通信模式。当设备发送…...
反向动力学Ik学习
参考文章:(非本人原创) 英文原文:Inverse Kinematics Techniques in Computer Graphics: A Survey (andreasaristidou.com) 知乎翻译文章: 【游戏开发】逆向运动学(IK)详解 - 知乎 (zhihu.co…...
基于Levenberg-Marquardt算法的声源定位matlab仿真
目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 .................................................................... %ML if (bML1)varxs…...
vscode的Emmet语法失效
解决方案:设置 -> 搜索Emmet -> 勾选 Emmet:Trigger Expansion On Tab和Emmet: Use Inline Completions -> 重启 注:Emmet语法是vscode自带的语法,可以快速生成HTML结构/CSS样式/格式化语法 Emmet语法 参考:关于vscode使…...
堆排序(大根堆)
堆的定义如下,n个关键字序列[1...n]称为堆,当且仅当满足: a(i)>a(2i)且a(i)>a(2i1) 这个为大根堆 a(i)<a(2i)且a(i)<a(2i 1) 这个为小根堆 通过建堆得到大根堆 大根堆 87,45,78,32,17,65,53,9 可以看成 …...
Mybatis学习笔记3 在Web中应用Mybatis
Mybatis学习笔记2 增删改查及核心配置文件详解_biubiubiu0706的博客-CSDN博客 技术栈:HTMLServletMybatis 学习目标: 掌握mybatis在web应用中如何使用 Mybatis三大对对象的作用域和生命周期 关于Mybatis中三大对象的作用域和生命周期、 官网说明 ThreadLocal原理及使用 巩…...
软件测试之功能测试详解
一、功能测试概述 1)功能测试就是对产品的各功能进行验证,根据功能测试用例,逐项测试,检查产品是否达到用户要求的功能。 2)功能测试,根据产品特性、操作描述和用户方案,测试一个产品的特性和…...
javascript选取元素的范围,可以包含父级,也可以不包含父级
//函数可以选取元素的范围,对于要选取文本的非常方便,或选取特定的子节点 function getRange(element){//判断是否支持range范围选取var supdocument.implementation.hasFeature("Range","2.0");var also(typeof document.createRan…...
QGIS怎么修改源代码?持续更新...
修改配置文件保存位置 修改目的:放着和本地安装的其他QGIS共用一份配置文件 修改文件:core/qgsuserprofilemanager.cpp 修改位置:第37行 return basePath QDir::separator() "my_profiles";修改完毕后,再次生成一下…...
YOLOv11目标检测与伏羲气象模型的融合应用:灾害天气图像识别预警
YOLOv11目标检测与伏羲气象模型的融合应用:灾害天气图像识别预警 最近几年,极端天气好像越来越频繁了。有时候,一场突如其来的暴雨或浓雾,就能让整个城市的交通陷入瘫痪,甚至带来不小的经济损失。传统的天气预报&…...
Cursor功能增强工具使用指南
Cursor功能增强工具使用指南 【免费下载链接】cursor-free-vip [Support 0.45](Multi Language 多语言)自动注册 Cursor Ai ,自动重置机器ID , 免费升级使用Pro 功能: Youve reached your trial request limit. / Too many free t…...
AT25SF041 SPI Flash驱动设计与嵌入式可靠性实践
1. AT25SF041 SPI Flash 存储器驱动深度解析AT25SF041 是由 Adesto(现为 Dialog Semiconductor)推出的 4 Mbit(512 KB)串行 NOR Flash 存储器,采用标准四线 SPI 接口(CLK、CS#、DI、DO)…...
信息安全毕设容易的项目选题汇总
0 选题推荐 - 网络与信息安全篇 毕业设计是大家学习生涯的最重要的里程碑,它不仅是对四年所学知识的综合运用,更是展示个人技术能力和创新思维的重要过程。选择一个合适的毕业设计题目至关重要,它应该既能体现你的专业能力,又能满…...
OpenClaw 超级 AI 实战专栏【补充内容】AI开发实操:减少Token用量、提升模型效率的8个核心技巧(附代码)
目录 一、核心前提:理解Token消耗的关键场景 二、6种优化方案(附案例+代码) 方案1:精简Prompt(最易落地,立竿见影) 核心思路 应用案例 代码实现 方案2:上下文窗口裁剪(避免历史信息冗余) 核心思路 应用案例 代码实现 方案3:输入文本摘要压缩(批量处理场景…...
从朱诺到威尼斯:一个可持续旅游模型如何‘开箱即用’解决你的美赛问题二
从朱诺到威尼斯:可持续旅游模型的跨场景迁移实战指南 模型迁移的核心挑战与解决框架 当我们将一个城市的可持续旅游模型迁移到另一个城市时,表面上看似乎只需要更换数据输入,但实际操作中会遇到三个维度的挑战: 1. 资源禀赋差异 自…...
Llama-3.2V-11B-cot惊艳案例:电影截图角色关系推演与剧情发展预测展示
Llama-3.2V-11B-cot惊艳案例:电影截图角色关系推演与剧情发展预测展示 1. 视觉推理工具简介 Llama-3.2V-11B-cot是基于Meta多模态大模型开发的高性能视觉推理工具,专为双卡4090环境深度优化。该工具不仅修复了视觉权重加载的关键问题,还支持…...
分子构象采样新范式:CREST工具解决药物研发核心挑战
分子构象采样新范式:CREST工具解决药物研发核心挑战 【免费下载链接】crest Conformer-Rotamer Ensemble Sampling Tool based on the xtb Semiempirical Extended Tight-Binding Program Package 项目地址: https://gitcode.com/gh_mirrors/crest/crest 在药…...
FindSomething:革新性网页智能信息提取工具完全指南
FindSomething:革新性网页智能信息提取工具完全指南 【免费下载链接】FindSomething 基于chrome、firefox插件的被动式信息泄漏检测工具 项目地址: https://gitcode.com/gh_mirrors/fi/FindSomething 在数字时代,网页中隐藏的敏感信息和数据模式往…...
RT-Thread Nano 3.0.3移植STM32F103后,第一个实战:用FinSH组件实现串口命令行调试
RT-Thread Nano 3.0.3移植STM32F103实战:FinSH组件实现串口命令行调试 当你成功将RT-Thread Nano移植到STM32F103开发板后,第一个令人兴奋的里程碑就是让系统真正"活"起来——而FinSH组件正是实现这一目标的完美起点。这个内置的命令行交互工具…...
