当前位置: 首页 > news >正文

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秒

相关文章:

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

运行时长 00日 00时 17分 59秒 代码 function calculateRuntime(timestamp) {const startTime Date.now(); // 获取当前时间戳//const runtimeElement document.getElementById(runtime); // 获取显示运行时长的元素function updateRuntime() {const currentTimestamp Date…...

latex三线表按页面大小填充

latex三线表按页面大小填充 使用Latex表格时会出现下图情况&#xff0c;表格没有填充整个页面&#xff0c;导致不美观。 解决方法&#xff1a; 在\begin{tabular}前加上\resizebox{\linewidth}{!}{ &#xff0c; 在\end{tabular} 后加 ‘}’ 如下&#xff1a;\resizebox{…...

佛祖保佑,永不宕机,永无bug

当我们的程序编译通过&#xff0c;能预防的bug也都预防了&#xff0c;其它的就只能交给天意了。当然请求佛祖的保佑也是必不可少的。 下面是一些常用的保佑图&#xff1a; 佛祖保佑图 ——————————————————————————————————————————…...

redis分布式集群-redis+keepalived+ haproxy

redis分布式集群架构&#xff08;RedisKeepalivedHaproxy&#xff09;至少需要3台服务器、6个节点&#xff0c;一台服务器2个节点。 redis分布式集群架构中的每台服务器都使用六个端口来实现多路复用&#xff0c;最终实现主从热备、负载均衡、秒级切换的目标。 redis分布式集…...

快递管理系统springboot 寄件物流仓库java jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 快递管理系统springboot 系统有1权限&#xff1a;管…...

自学黑客/网络安全(学习路线+教程视频+工具包+经验分享)

一、为什么选择网络安全&#xff1f; 这几年随着我国《国家网络空间安全战略》《网络安全法》《网络安全等级保护2.0》等一系列政策/法规/标准的持续落地&#xff0c;网络安全行业地位、薪资随之水涨船高。 未来3-5年&#xff0c;是安全行业的黄金发展期&#xff0c;提前踏入…...

如何进行游戏平台搭建?

游戏平台搭建涉及多个步骤和技术&#xff0c;下面是一个大致的指南&#xff1a; 市场调研和定位&#xff1a;首先&#xff0c;要了解游戏市场和受众的需求&#xff0c;选择适合的游戏类型和定位。 选择平台类型&#xff1a;决定是要搭建网页平台、移动应用平台还是其他类型的…...

安全防御问题

SSL VPN的实现&#xff0c;防火墙需要放行哪些流量&#xff1f; 实现 SSL VPN 时&#xff0c;在防火墙上需要放行以下流量&#xff0c; SSL/TLS 流量&#xff1a;SSL VPN 通过加密通信来确保安全性&#xff0c;因此防火墙需要允许 SSL/TLS 流量通过。一般情况下&#xff0c;SSL…...

x-www-form-urlencoded、application/json到底是什么

在http协议中规定了GET、HEAD、POST、PUT、DELETE、CONNECT 等请求方式,其中比较常用的就是post和get&#xff0c;其中post用来向服务器提交数据&#xff0c;post只规定了提交的数据必须放在请求的主体中&#xff0c;但是并没有规定传输数据的编码方式。比较主流的有如下的几种…...

LeetCode 33题:搜索旋转排序数组

目录 题目 思路 代码 暴力解法 分方向法 二分法 题目 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 …...

用python来爬取某鱼的商品信息(1/2)

目录 前言 第一大难题——找到网站入口 曲线救国 模拟搜索 第二大难题——登录 提一嘴 登录cookie获取 第一种 第二种 第四大难题——无法使用导出的cookie 原因 解决办法 最后 出现小问题 总结 下一篇博客&#xff08;大部分代码实现&#xff09; 前言 本章讲理…...

网工最常犯的9大错误,越早知道越吃香

下午好&#xff0c;我的网工朋友 我们常说&#xff0c;人要学会避免错误&#xff0c;尤其是对在职场生活的打工人来说&#xff0c;更是如此。 学生时代&#xff0c;我们通过错题本收集错误&#xff0c;提高刷题正确率和分数&#xff0c;但到了职场&#xff0c;因为没有量化的…...

Windows - UWP - 网络不好的情况下安装(微软商店)MicrosoftStore的应用

Windows - UWP - 网络不好的情况下安装&#xff08;微软商店&#xff09;MicrosoftStore的应用 前言 UWP虽然几乎被微软抛弃了&#xff0c;但不得不否认UWP应用给用户带来的体验。沙箱的运行方式加上微软的审核&#xff0c;用户使用起来非常放心&#xff0c;并且完美契合Wind…...

1040:输出绝对值

【题目描述】 输入一个浮点数&#xff0c;输出这个浮点数的绝对值&#xff0c;保留到小数点后两位。 【输入】 输入一个浮点数&#xff0c;其绝对值不超过10000。 【输出】 输出这个浮点数的绝对值&#xff0c;保留到小数点后两位。 【输入样例】 -3.14 【输出样例】 …...

[Docker精进篇] Docker部署和实践 (二)

前言&#xff1a; Docker部署是通过使用Docker容器技术&#xff0c;将应用程序及其所有相关依赖项打包为一个可移植、自包含的镜像&#xff0c;然后在任何支持Docker的环境中快速部署和运行应用程序的过程。 文章目录 Docker部署1️⃣为什么需要&#xff1f;2️⃣有什么作用&am…...

day9 | 28. 实现 strStr()、459.重复的子字符串

目录&#xff1a; 解题及思路学习 28. 实现 strStr() https://leetcode.cn/problems/find-the-index-of-the-first-occurrence-in-a-string/ 给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下…...

hive on tez资源控制

sql insert overwrite table dwintdata.dw_f_da_enterprise2 select * from dwintdata.dw_f_da_enterprise; hdfs文件大小数量展示 注意这里文件数有17个 共计321M 最后是划分为了21个task 为什么会有21个task&#xff1f;不是128M 64M 或者说我这里小于128 每个文件一个map…...

企业有VR全景拍摄的需求吗?能带来哪些好处?

在传统图文和平面视频逐渐疲软的当下&#xff0c;企业商家如何做才能让远在千里之外的客户更深入、更直接的详细了解企业品牌和实力呢&#xff1f;千篇一律的纸质材料已经过时了&#xff0c;即使制作的再精美&#xff0c;大家也会审美疲劳&#xff1b;但是你让客户远隔千里&…...

【问题解决】Git命令行常见error及其解决方法

以下是我一段时间没有使用xshell&#xff0c;然后用git命令行遇到的一些系列错误和他们的解决方法 遇到了这个报错&#xff1a; fatal: Not a git repository (or any of the parent directories): .git 我查阅一些博客和资料&#xff0c;可以解决的方式&#xff1a; git in…...

【100天精通python】Day34:使用python操作数据库_ORM(SQLAlchemy)使用

目录 专栏导读 1 ORM 概述 2 SQLAlchemy 概述 3 ORM&#xff1a;SQLAlchemy使用 3.1 安装SQLAlchemy&#xff1a; 3.2 定义数据库模型类&#xff1a; 3.3 创建数据表&#xff1a; 3.4 插入数据&#xff1a; 3.5 查询数据&#xff1a; 3.6 更新数据&#xff1a; 3.7 删…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...