js实现按创建时间戳1609459200000 开始往后开始显示运行时长-demo

运行时长 00日 00时 17分 59秒

代码

function calculateRuntime(timestamp) {const startTime = Date.now(); // 获取当前时间戳//const runtimeElement = document.getElementById('runtime'); // 获取显示运行时长的元素function updateRuntime() {const currentTimestamp = Date.now(); // 获取当前时间戳const runtime = currentTimestamp - timestamp; // 计算运行时长// 将运行时长格式化为 "00日 00时 17分 59秒" 的形式const days = Math.floor(runtime / (1000 * 60 * 60 * 24)).toString().padStart(2, '0');const hours = Math.floor((runtime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString().padStart(2, '0');const minutes = Math.floor((runtime % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0');const seconds = Math.floor((runtime % (1000 * 60)) / 1000).toString().padStart(2, '0');const formattedRuntime = `${days}日 ${hours}时 ${minutes}分 ${seconds}秒`;//runtimeElement.innerText = formattedRuntime; // 更新显示的运行时长console.log(formattedRuntime)}// 初始更新一次运行时长updateRuntime();// 每秒更新一次运行时长setInterval(updateRuntime, 1000);
}

使用示例 

const timestamp = 1609459200000; // 替换为你的13位时间戳
calculateRuntime(timestamp);

代码优化

/*** 运行时长格式化* @param ms 时间戳 13位*/
function timeFormatHandle(runtime) {// 将运行时长格式化为 "00日 00时 17分 59秒" 的形式const days = Math.floor(runtime / (1000 * 60 * 60 * 24)).toString().padStart(2, '0');const hours = Math.floor((runtime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString().padStart(2, '0');const minutes = Math.floor((runtime % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0');const seconds = Math.floor((runtime % (1000 * 60)) / 1000).toString().padStart(2, '0');const formattedRuntime = `${days}日 ${hours}时 ${minutes}分 ${seconds}秒`;console.log(formattedRuntime);
}let dateTimer = null;function closeDateTimer() {if (dateTimer) {clearTimeout(dateTimer);dateTimer = null;}
}function runRateTime(ms) {closeDateTimer();//timeFormatHandle(ms);dateTimer = setTimeout(() => {timeFormatHandle(ms); // 保留一个即可runRateTime(ms + 1000);}, 1000);
}const timestamp = 1691640413734; //创建时间戳
closeDateTimer() 
runRateTime(new Date().getTime() - timestamp);

const startTime = 1609459200000; // 开始时间戳function displayRuntime() {const now = Date.now(); // 当前时间戳let runtime = now - startTime; // 运行时长,单位为毫秒const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数const oneHour = 60 * 60 * 1000; // 一小时的毫秒数const oneMinute = 60 * 1000; // 一分钟的毫秒数// 计算天数let days = Math.floor(runtime / oneDay);runtime = runtime % oneDay;// 计算小时数let hours = Math.floor(runtime / oneHour);runtime = runtime % oneHour;// 计算分钟数let minutes = Math.floor(runtime / oneMinute);runtime = runtime % oneMinute;// 计算秒数let seconds = Math.floor(runtime / 1000);const displayDays = padZero(days); // 补零显示天数const displayHours = padZero(hours); // 补零显示小时数const displayMinutes = padZero(minutes); // 补零显示分钟数const displaySeconds = padZero(seconds); // 补零显示秒数console.log(`运行时长 ${displayDays}日 ${displayHours}时 ${displayMinutes}分 ${displaySeconds}秒`);
}// 补零函数,将一位数前面补零
function padZero(num) {if (num < 10) {return '0' + num;} else {return num;}
}// 每秒钟更新一次运行时长
setInterval(displayRuntime, 1000);

优化

const displayRuntime=(startTime)=> {const now = Date.now(); // 当前时间戳let runtime = now - startTime; // 运行时长,单位为毫秒const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数const oneHour = 60 * 60 * 1000; // 一小时的毫秒数const oneMinute = 60 * 1000; // 一分钟的毫秒数// 计算天数let days = Math.floor(runtime / oneDay).toString().padStart(2, '0');runtime = runtime % oneDay;// 计算小时数let hours = Math.floor(runtime / oneHour).toString().padStart(2, '0');runtime = runtime % oneHour;// 计算分钟数let minutes = Math.floor(runtime / oneMinute).toString().padStart(2, '0');runtime = runtime % oneMinute;// 计算秒数let seconds = Math.floor(runtime / 1000).toString().padStart(2, '0');console.log(`运行时长 ${days}日 ${hours}时 ${minutes}分 ${seconds}秒`);
}displayRuntime(1691994296457)//运行时长 00日 00时 16分 06秒

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

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

相关文章

1.物联网LWIP网络,TCP/IP协议簇

一。TCP/IP协议簇 1.应用层&#xff1a;FTP&#xff0c;HTTP&#xff0c;Telent&#xff0c;DNS&#xff0c;RIP 2.传输层&#xff1a;TCP&#xff0c;UDP 3.网络层&#xff1a;IPV4&#xff0c;IPV6&#xff0c;OSPF&#xff0c;EIGRP 4.数据链路层&#xff1a;Ethernet&#…

后端返回图片资源错误404,前端使用默认图片

后端返回的图片资源可能会因为各种原因&#xff08;后台误删&#xff0c;地址更改未及时更新&#xff0c;损毁&#xff09;出现无法展示的情况&#xff0c;比如这种报错 就会导致图片资源错误&#xff0c;页面出现这种情况 用户体验很不好&#xff0c;为了改善这种情况&#xf…

36.8k Star! 一款小而美的自动化运维监控工具——Uptime Kuma

自动化运维是指利用计算机科学和信息技术来实现系统和应用程序的自动化管理、监控、维护以及问题解决的过程。它的目标是减少人工干预、提高效率、降低错误率&#xff0c;并确保系统的稳定性和可靠性。 应用简览 Uptime-Kuma 是一个轻量级的监控工具&#xff0c;其独特之处在于…

5G科技防汛,助力守护一方平安

“立秋虽已至&#xff0c;炎夏尚还在”&#xff0c;受台风席卷以及季节性影响全国多地正面临强降水的严峻挑战。“落雨又顺秋&#xff0c;绵绵雨不休”&#xff0c;正值“七下八上” 防汛关键时期&#xff0c;贵州省水文水资源局已全面进入备战状态。 为确保及时响应做好防汛抢…

typedef

t y p e d e f typedef typedef 声明&#xff0c;简称typedef&#xff0c;是创建现有类型的新名字。 比如&#xff1a; #include <bits/stdc.h> using namespace std; typedef long long ll; int main() {ll n;scanf("%lld",&n);printf("%lld"…

echarts tooltip提示框加单位

效果&#xff1a; 1.比较简单的方法 series: [{name: "重大风险",type: "bar",data: data2,color: ExtremeRiskColor,tooltip: {valueFormatter: function (value) {return value 个;}},},{name: "较大风险",type: "bar",data: dat…

rabbitmq的消息应答

消费者完成一个任务可能需要一段时间&#xff0c;如果其中一个消费者处理一个长的任务并仅只完成 了部分突然它挂掉了&#xff0c;会发生什么情况。RabbitMQ 一旦向消费者传递了一条消息&#xff0c;便立即将该消 息标记为删除。在这种情况下&#xff0c;突然有个消费者挂掉了…

如何切换goland之中的版本号(升级go 到1.20)

go 安装/版本切换_go 切换版本_云满笔记的博客-CSDN博客 用brew就行&#xff1a; echo export PATH"/opt/homebrew/opt/go1.20/bin:$PATH" >> ~/.zshrc

HTML详解连载(7)

HTML详解连载&#xff08;7&#xff09; 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽结构伪类选择器作用 :nth-child&#xff08;公式&#xff09;作用举例 伪元素选择器作用注意&#xff1a; PxCoook作用盒子模型-重要组成部分 盒子模型-边框线属性名属性…

Matlab中图例的位置(图例放在图的上方、下方、左方、右方、图外面)等

一、图例默认位置 默认的位置在NorthEast r 10; a 0; b 0; t0:0.1:2.1*pi; xar*cos(t); ybr*sin(t); A1plot(x,y,r,linewidth,4);%圆 hold on axis equal A2plot([0 0],[1 10],b,linewidth,4);%直线 legend([A1,A2],圆形,line)二、通过Location对legend的位置进行改变 变…

sykwalking8.2和mysql5.7快速部署

1.SkyWalking 是什么&#xff1f; 分布式系统的应用程序性能监视工具&#xff0c;专为微服务、云原生架构和基于容器&#xff08;Docker、K8s、Mesos&#xff09;架构而设计。 提供分布式追踪、服务网格遥测分析、度量聚合和可视化一体化解决方案。 2.SkyWalking 有哪些功能…

K8S之存储卷

K8S之存储卷 一、emptyDir emptyDir&#xff1a;可实现Pod中的容器之间共享目录数据&#xff0c;但emptyDir存储卷没有持久化数据的能力&#xff0c;存储卷会随着Pod生命周期结束而一起删除二、hostPath hostPath&#xff1a;将Node节点上的目录/文件挂载到Pod容器的指定目录…

LVS-DR模式下(RS检测)ldirectord工具实现部分节点掉点后将请求发往正常设备进行处理

基于前文的LVS-DR集群构建环境 一.下载ldirectord软件 二.将模板文件中的LVS-DR模式相关文件拷贝到/etc/ha.d主配置目录并按实际设备修改 三.配置两台RS匹配规则 四.停止RS1的http服务进行测试 RS1失去工作能力&#xff0c;RS2接替RS1 基于前文的LVS-DR集群构建环境 一.下…

VITS2来袭~

论文&#xff1a;VITS2: Improving Quality and Efficiency of Single-Stage Text-to-Speech with Adversarial Learning and Architecture Design 演示&#xff1a;https://vits-2.github.io/demo/ 论文&#xff1a;https://arxiv.org/abs/2307.16430 目前仍然存在的问题: int…

使用GUI Guider工具开发嵌入式GUI应用(6)-切换多screen换场景

使用GUI Guider工具开发嵌入式GUI应用&#xff08;6&#xff09;-切换多screen换场景 本节将展示使用GUI Guider实现切换显示页面功能。 这里设计的用例是&#xff1a; 创建3张页面&#xff0c;screen_0,screen_1和screen_2。分别在每个页面上中放置一个Label&#xff08;最…

C++ STL容器适配器(详解)

STL容器适配器 什么是适配器&#xff0c;C STL容器适配器详解 在详解什么是容器适配器之前&#xff0c;初学者首先要理解适配器的含义。 其实&#xff0c;容器适配器中的“适配器”&#xff0c;和生活中常见的电源适配器中“适配器”的含义非常接近。我们知道&#xff0c;无…

后端项目打包上传服务器记录

后端项目打包上传服务器记录 文章目录 后端项目打包上传服务器记录1、项目打包2、jar包上传服务器 本文记录打包一个后端项目&#xff0c;上传公司服务器的过程。 1、项目打包 通过IDEA的插件进行打包&#xff1a; 打成一个jar包&#xff0c;jar包的位置在控制台可以看到。 2、…

简单介绍C++中的模板

目录 一、泛型编程 泛型编程的概念: 泛型编程举例: 二、函数模板 函数模板的概念&#xff1a; 函数模板的格式&#xff1a; 函数模板的实例化: 隐式实例化&#xff1a; 显式实例化&#xff1a; 模板参数的匹配原则: 三、类模板 类模板的格式定义&#xff1a; 类模…

【学会动态规划】最长湍流子数组(23)

目录 动态规划怎么学&#xff1f; 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后&#xff1a; 动态规划怎么学&#xff1f; 学习一个算法没有捷径&#xff0c;更何况是学习动态规划&#xff0c; 跟我…

LeetCode 141.环形链表

文章目录 &#x1f4a1;题目分析&#x1f4a1;解题思路&#x1f514;接口源码&#x1f4a1;深度思考❓思考1❓思考2 题目链接&#x1f449; LeetCode 141.环形链表&#x1f448; &#x1f4a1;题目分析 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中…