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

news2024/11/19 17:25:30

运行时长 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.coloradmin.cn/o/886154.html

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

相关文章

spring入门基本介绍及注入方式---详细介绍

一&#xff0c;spring的简介 Spring是一个开源框架&#xff0c;它由Rod Johnson创建。它是为了解决企业应用开发的复杂性而创建的。 提供了许多功能强大且易于使用的特性&#xff0c;使得开发者能够更加轻松地构建可维护且可扩展的应用程序&#xff0c;简单来说: Spring使用基…

攻击LNMP架构Web应用

环境配置(centos7) 1.php56 php56-fpm //配置epel yum install epel-release rpm -ivh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm//安装php56&#xff0c;php56-fpm及其依赖 yum --enablereporemi install php56-php yum --enablereporemi install php…

深入了解唯品会API及其应用

随着电商行业的快速发展&#xff0c;API&#xff08;Application Programming Interface&#xff0c;应用程序接口&#xff09;已经成为许多企业实现系统对接、数据交换和功能扩展的重要工具之一。唯品会作为国内领先的电商平台之一&#xff0c;也提供了丰富的API接口&#xff…

component:()=>import(“@/views/Home.vue“) 报错,ts说没有找到类型声明文件

1 没有写.vue文件的类型声明&#xff0c;要在env.d.ts文件中写.vue的类型声明文件 2 ts.config.josn的incluede字段中&#xff0c;没有把.d.ts文件的路径写对。 如果没写对&#xff0c;就会在项目启动的时候&#xff0c;找不到.d.ts文件。找不到类型声明文件

【自动电压调节器】无功功率控制的终端电压控制研究(Simulink)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

ATF(TF-A)安全通告 TFV-5 (CVE-2017-15031)

安全之安全(security)博客目录导读 ATF(TF-A)安全通告汇总 目录 一、ATF(TF-A)安全通告 TFV-5 (CVE-2017-15031) 二、CVE-2017-15031 一、ATF(TF-A)安全通告 TFV-5 (CVE-2017-15031) Title 未初始化或保存/恢复PMCR_EL0可能会泄露安全世界的时间信息 CVE ID CVE-2017-1503…

cs231n assignment 3 Q2 Image Captioning with Vanilla RNNs

文章目录 嫌啰嗦直接看代码Q2 Image Captioning with Vanilla RNNs一个给的工具代码里的bug问题展示问题解决思路解决办法 rnn_step_forward题面解析代码输出 rnn_step_backward题面解析代码输出 rnn_forward题面解析代码输出 rnn_backward题面解析代码输出 word_embedding_for…

时序预测 | MATLAB实现基于CNN-BiLSTM卷积双向长短期记忆神经网络的时间序列预测-递归预测未来(多指标评价)

时序预测 | MATLAB实现基于CNN-BiLSTM卷积双向长短期记忆神经网络的时间序列预测-递归预测未来(多指标评价) 目录 时序预测 | MATLAB实现基于CNN-BiLSTM卷积双向长短期记忆神经网络的时间序列预测-递归预测未来(多指标评价)预测结果基本介绍程序设计参考资料 预测结果 基本介绍…

leetcode 518. 零钱兑换 II

本题是背包问题系列的完全背包问题&#xff0c;和0-1背包唯一的区别就在于&#xff1a;物品是可以重复选取的。 经过之前背包问题的拷打&#xff0c;本题也是一遍AC了。 接下来将给出二维和一维两种做法。 二维dp数组做法&#xff1a; 本题的背包大小即为题中给出的总金额&am…

与微软Office抗衡,两大巨头布局,打造新办公软件,再上新台阶

办公软件是我们日常工作中不可或缺的工具。 除了广为人知的微软Office套件外&#xff0c;近几年来&#xff0c;中国市场有许多优秀的国产办公软件抢眼登场&#xff0c;这些软件在提高工作效率、简化工作流程方面发挥着重要作用。 简单介绍几款值得知道的国产办公软件&#xff…

【学习FreeRTOS】第9章——FreeRTOS任务调度

1.开启任务调度器 vTaskStartScheduler() 作用&#xff1a;用于启动任务调度器&#xff0c;任务调度器启动后&#xff0c; FreeRTOS 便会开始进行任务调度【动态创建任务为例】 创建空闲任务如果使能软件定时器&#xff0c;则创建定时器任务关闭中断&#xff0c;防止调度器开…

99%的Python用户都不知道的f-string隐秘技巧

f-string想必很多Python用户都基础性的使用过&#xff0c;作为Python3.6版本开始引入的特性&#xff0c;通过它我们可以更加方便地向字符串中嵌入自定义内容&#xff0c;但f-string真正蕴含的功能远比大多数用户知道的要丰富&#xff0c;今天我们就来一起get它们~ 「最基础用法…

JVS开源基础框架:平台基本信息介绍

JVS是面向软件开发团队可以快速实现应用的基础开发脚手架&#xff0c;主要定位于企业信息化通用底座&#xff0c;采用微服务分布式框架&#xff0c;提供丰富的基础功能&#xff0c;集成众多业务引擎&#xff0c;它灵活性强&#xff0c;界面化配置对开发者友好&#xff0c;底层容…

MySQL性能分析之慢查询日志查看

一、背景 MySQL的慢查询日志是MySQL提供的一种日志记录,他用来记录在MySQL中响应的时间超过阈值的语句,具体指运行时间超过long_query_time(默认是10秒)值的SQL,会被记录到慢查询日志中。 慢查询日志一般用于性能分析时开启,收集慢SQL然后通过explain进行全面分析,一…

GPU Dissolve(GPU 消散)学习GPU Instancing

一&#xff1a;摘要 通过制作一个模型GPU消散效果来学习GPU Instancing 也就是实例化。 目标效果是杨超大佬文章《GPU shatter》里面的消散效果如图&#xff1a; Tags&#xff1a;模型顶点分裂(Mesh Vertex Splitting)&#xff0c; 实例化绘制(GPU Instancing Drawing)&#x…

【100天精通python】Day36:GUI界面编程_高级功能操作和示例

专栏导读 专栏订阅地址&#xff1a;https://blog.csdn.net/qq_35831906/category_12375510.html 一、GUI 高级功能 1 自定义主题和样式 自定义主题和样式可以让你的GUI应用程序在外观方面更加出色。在使用Tkinter时&#xff0c;你可以使用ttkthemes库来应用不同的主题和样式。…

一文搞懂Spring是如何解决Bean循环依赖的?

一.什么是Bean循环依赖 循环依赖是指Bean对象循环引用&#xff0c;是两个或多个Bean之间相互持有对方的引用&#xff0c;循环依赖有2中表现形式 第一种相互依赖&#xff0c;就是A依赖B&#xff0c;B又依赖A 第二种是自我依赖&#xff0c;就是A依赖自己形成自我依赖 对象引用…

上山取石&#xff0c;下江取锦。诗人秋浦啸傲&#xff0c;新津樵唱。江南山水秀美&#xff0c;水乡文化流长。而水&#xff0c;则是这些山水风景的灵魂所在。 水&#xff0c;雨露滋润万物生长的泉源。 它潺潺流淌于山间溪涧&#xff0c;涓涓细流化成了青山的眼泪。水顺势而下&a…

Unity如何制作声音控制条(控制音量大小)

一&#xff1a;UGUI制作 1. 首先在【层级】下面创建UI里面的Slider组件。设置好它对应的宽度和高度。 2.调整Slider滑动条的填充颜色。一般声音颜色我黄色&#xff0c;所以我们也调成黄色。 我们尝试滑动Slider里面的value。 a.滑动前。 b.滑动一半。 c.滑动完。 从以上滑动va…

Openai中的tokens怎么估计

大规模语言模型&#xff08;LLM&#xff09;的出现给自然语言处理领域带来了变革的可能性&#xff0c;Openai开放了chatgpt的API&#xff0c;方便了开发人员使用LLM的推理能力&#xff0c;注册时赠送5美元的使用额度&#xff0c;有效期3个月。 如果想便捷的使用chatgpt的API&a…