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表格时会出现下图情况,表格没有填充整个页面,导致不美观。 解决方法: 在\begin{tabular}前加上\resizebox{\linewidth}{!}{ , 在\end{tabular} 后加 ‘}’ 如下:\resizebox{…...
佛祖保佑,永不宕机,永无bug
当我们的程序编译通过,能预防的bug也都预防了,其它的就只能交给天意了。当然请求佛祖的保佑也是必不可少的。 下面是一些常用的保佑图: 佛祖保佑图 ——————————————————————————————————————————…...
redis分布式集群-redis+keepalived+ haproxy
redis分布式集群架构(RedisKeepalivedHaproxy)至少需要3台服务器、6个节点,一台服务器2个节点。 redis分布式集群架构中的每台服务器都使用六个端口来实现多路复用,最终实现主从热备、负载均衡、秒级切换的目标。 redis分布式集…...
快递管理系统springboot 寄件物流仓库java jsp源代码mysql
本项目为前几天收费帮学妹做的一个项目,Java EE JSP项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考。 一、项目描述 快递管理系统springboot 系统有1权限:管…...
自学黑客/网络安全(学习路线+教程视频+工具包+经验分享)
一、为什么选择网络安全? 这几年随着我国《国家网络空间安全战略》《网络安全法》《网络安全等级保护2.0》等一系列政策/法规/标准的持续落地,网络安全行业地位、薪资随之水涨船高。 未来3-5年,是安全行业的黄金发展期,提前踏入…...
如何进行游戏平台搭建?
游戏平台搭建涉及多个步骤和技术,下面是一个大致的指南: 市场调研和定位:首先,要了解游戏市场和受众的需求,选择适合的游戏类型和定位。 选择平台类型:决定是要搭建网页平台、移动应用平台还是其他类型的…...
安全防御问题
SSL VPN的实现,防火墙需要放行哪些流量? 实现 SSL VPN 时,在防火墙上需要放行以下流量, SSL/TLS 流量:SSL VPN 通过加密通信来确保安全性,因此防火墙需要允许 SSL/TLS 流量通过。一般情况下,SSL…...
x-www-form-urlencoded、application/json到底是什么
在http协议中规定了GET、HEAD、POST、PUT、DELETE、CONNECT 等请求方式,其中比较常用的就是post和get,其中post用来向服务器提交数据,post只规定了提交的数据必须放在请求的主体中,但是并没有规定传输数据的编码方式。比较主流的有如下的几种…...
LeetCode 33题:搜索旋转排序数组
目录 题目 思路 代码 暴力解法 分方向法 二分法 题目 整数数组 nums 按升序排列,数组中的值 互不相同 。 在传递给函数之前,nums 在预先未知的某个下标 k(0 < k < nums.length)上进行了 旋转,使数组变为 …...
用python来爬取某鱼的商品信息(1/2)
目录 前言 第一大难题——找到网站入口 曲线救国 模拟搜索 第二大难题——登录 提一嘴 登录cookie获取 第一种 第二种 第四大难题——无法使用导出的cookie 原因 解决办法 最后 出现小问题 总结 下一篇博客(大部分代码实现) 前言 本章讲理…...
网工最常犯的9大错误,越早知道越吃香
下午好,我的网工朋友 我们常说,人要学会避免错误,尤其是对在职场生活的打工人来说,更是如此。 学生时代,我们通过错题本收集错误,提高刷题正确率和分数,但到了职场,因为没有量化的…...
Windows - UWP - 网络不好的情况下安装(微软商店)MicrosoftStore的应用
Windows - UWP - 网络不好的情况下安装(微软商店)MicrosoftStore的应用 前言 UWP虽然几乎被微软抛弃了,但不得不否认UWP应用给用户带来的体验。沙箱的运行方式加上微软的审核,用户使用起来非常放心,并且完美契合Wind…...
1040:输出绝对值
【题目描述】 输入一个浮点数,输出这个浮点数的绝对值,保留到小数点后两位。 【输入】 输入一个浮点数,其绝对值不超过10000。 【输出】 输出这个浮点数的绝对值,保留到小数点后两位。 【输入样例】 -3.14 【输出样例】 …...
[Docker精进篇] Docker部署和实践 (二)
前言: Docker部署是通过使用Docker容器技术,将应用程序及其所有相关依赖项打包为一个可移植、自包含的镜像,然后在任何支持Docker的环境中快速部署和运行应用程序的过程。 文章目录 Docker部署1️⃣为什么需要?2️⃣有什么作用&am…...
day9 | 28. 实现 strStr()、459.重复的子字符串
目录: 解题及思路学习 28. 实现 strStr() https://leetcode.cn/problems/find-the-index-of-the-first-occurrence-in-a-string/ 给你两个字符串 haystack 和 needle ,请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标(下…...
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?不是128M 64M 或者说我这里小于128 每个文件一个map…...
企业有VR全景拍摄的需求吗?能带来哪些好处?
在传统图文和平面视频逐渐疲软的当下,企业商家如何做才能让远在千里之外的客户更深入、更直接的详细了解企业品牌和实力呢?千篇一律的纸质材料已经过时了,即使制作的再精美,大家也会审美疲劳;但是你让客户远隔千里&…...
【问题解决】Git命令行常见error及其解决方法
以下是我一段时间没有使用xshell,然后用git命令行遇到的一些系列错误和他们的解决方法 遇到了这个报错: fatal: Not a git repository (or any of the parent directories): .git 我查阅一些博客和资料,可以解决的方式: git in…...
【100天精通python】Day34:使用python操作数据库_ORM(SQLAlchemy)使用
目录 专栏导读 1 ORM 概述 2 SQLAlchemy 概述 3 ORM:SQLAlchemy使用 3.1 安装SQLAlchemy: 3.2 定义数据库模型类: 3.3 创建数据表: 3.4 插入数据: 3.5 查询数据: 3.6 更新数据: 3.7 删…...
Godot PCK解包原理与专业逆向实践指南
1. 这不是“解压软件”,而是Godot游戏逆向工程的第一把手术刀你刚下载了一款用Godot引擎开发的独立游戏,想研究它的UI动效逻辑,或者复刻一段粒子特效,又或者只是单纯好奇——那个让你反复通关三次的像素风过场动画,图层…...
【紧急预警】Lindy衰减临界点已提前至第8.3个月!2024最新《营销自动化寿命健康度白皮书》限时开放前500份
更多请点击: https://kaifayun.com 第一章:Lindy衰减临界点的理论重构与实证突破 Lindy效应传统上描述“越老越长寿”的非线性生存规律,但其在现代软件系统、开源生态与协议层技术栈中的适用边界正遭遇结构性挑战。本文首次将Lindy模型从静…...
基于随机森林的低成本传感器机器学习校准实践指南
1. 项目概述:当低成本传感器遇上机器学习校准在物联网和智能感知系统铺天盖地的今天,低成本传感器几乎无处不在。从监测办公室的空气质量,到追踪城市街道的噪音污染,再到农业大棚里的温湿度控制,这些价格亲民的“小眼睛…...
深度解析网络设备权限管理工具:中兴光猫工厂模式与Telnet服务完整指南
深度解析网络设备权限管理工具:中兴光猫工厂模式与Telnet服务完整指南 【免费下载链接】zteOnu A tool that can open ZTE onu device factory mode 项目地址: https://gitcode.com/gh_mirrors/zt/zteOnu 在当今网络设备管理领域,获取设备完整控制…...
多模型聚合平台如何助力网站AIB测试与选型
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 多模型聚合平台如何助力网站AIB测试与选型 对于网站产品经理而言,首页文案的生成质量直接影响用户的第一印象和转化率。…...
CentOS 8/Stream 8系统DNF换源后,安装软件还是慢?试试这几个排查命令和优化技巧
CentOS 8/Stream 8系统DNF换源后安装缓慢的深度排查与优化指南当你已经按照教程将CentOS 8/Stream 8的DNF源切换为国内镜像,却发现软件安装速度依然不尽如人意时,这种体验确实令人沮丧。作为长期使用CentOS系统的技术专家,我完全理解这种&quo…...
树莓派Zero离线语音交互实战:TTS与STT引擎部署与优化
1. 项目概述:为什么选择树莓派 Zero 来实现语音功能?如果你玩过 Arduino、ESP32 这类微控制器,也接触过树莓派 4B 这样的单板电脑,那你大概能理解那种“选择困难症”:微控制器实时性强、功耗低,但算力有限&…...
智能体任务分配算法:从启发式到深度强化学习的演进与实践
1. 项目概述:从“谁来做”到“如何做得更好”的智能进化在机器人集群、无人机编队或是自动化仓储系统中,我们常常面临一个看似简单实则复杂的问题:眼前有一堆任务,手头有一群可用的智能体(机器人、无人机、服务器等&am…...
动物森友会岛屿设计终极指南:用Happy Island Designer打造梦想岛屿
动物森友会岛屿设计终极指南:用Happy Island Designer打造梦想岛屿 【免费下载链接】HappyIslandDesigner "Happy Island Designer (Alpha)",是一个在线工具,它允许用户设计和定制自己的岛屿。这个工具是受游戏《动物森友会》(Anim…...
HiveWE地图编辑器:告别卡顿,开启魔兽争霸III地图制作新纪元
HiveWE地图编辑器:告别卡顿,开启魔兽争霸III地图制作新纪元 【免费下载链接】HiveWE A Warcraft III world editor. 项目地址: https://gitcode.com/gh_mirrors/hi/HiveWE 还在为魔兽争霸III原版编辑器的缓慢加载和频繁卡顿而烦恼吗?你…...
