JavaScript,每5秒打印,已运行时间,和还剩多少时间,多少分,多少秒

简介: JavaScript,每5秒打印,已运行时间,和还剩多少时间,多少分,多少秒

为了实现这个需求,我们可以使用JavaScript的setInterval函数来每隔5秒执行一次操作,并使用Date对象来跟踪程序的开始时间和当前时间,从而计算出已运行时间和剩余时间(假设你有一个预定的总运行时间)。但是,请注意,对于“剩余时间”,这里我将假设一个固定的总运行时间,比如300秒(即5分钟),因为你没有具体说明总运行时间是多少。

下面是一个示例代码,演示了如何实现这个逻辑:

javascript复制代码
 // 假设总运行时间为300秒  
 
 const totalDuration = 300; // 秒  
 
   
 
 // 获取程序开始时间  
 
 let startTime = new Date().getTime();  
 
   
 
 // 每隔5秒执行一次  
 
 setInterval(function() {  
 
     // 获取当前时间  
 
     let currentTime = new Date().getTime();  
 
   
 
     // 计算已运行时间  
 
     let elapsedTime = currentTime - startTime;  
 
   
 
     // 计算剩余时间  
 
     let remainingTime = totalDuration - elapsedTime;  
 
   
 
     // 将剩余时间转换为分钟、秒  
 
     let minutes = Math.floor(remainingTime / 60);  
 
     let seconds = remainingTime % 60;  
 
   
 
     // 如果秒数小于10,则前面补0以保持格式(例如,"05"秒而不是"5"秒)  
 
     seconds = seconds < 10 ? '0' + seconds : seconds;  
 
   
 
     // 打印信息  
 
     console.log(`已运行时间: ${Math.floor(elapsedTime / 60)}分${elapsedTime % 60}秒`);  
 
     console.log(`还剩时间: ${minutes}分${seconds}秒`);  
 
   
 
     // 如果剩余时间小于等于0,则停止定时器  
 
     if (remainingTime <= 0) {  
 
         console.log('时间到!');  
 
         clearInterval(this); // 注意:这里的'this'可能不总是指向定时器ID,但在这个示例中可行  
 
     }  
 
 }, 5000); // 5000毫秒 = 5秒

注意:在setInterval的回调函数中,this的值依赖于函数的调用方式,而在这个示例中,虽然this似乎可以工作来取消定时器(因为它指向全局对象,这在浏览器环境中通常是window,且window.setInterval返回的ID是全局可访问的),但更好的做法是使用setInterval返回的ID来取消定时器。你可以将setInterval的返回值保存到一个变量中,并使用clearInterval函数和该变量来停止定时器。

javascript复制代码
 let timerId = setInterval(function() {  
 
     // ...  
 
     if (remainingTime <= 0) {  
 
         console.log('时间到!');  
 
         clearInterval(timerId); // 使用保存的定时器ID来停止定时器  
 
     }  
 
 }, 5000);

image.png

相关文章
|
Windows
Electron窗口白屏解决
Electron白屏问题主要出现在两方面: 1、electron未加载完毕html,electron自身产生的白色背景; 2、electron加载html,html处于加载渲染过程中产生的短暂白屏;
3061 0
|
8月前
|
人工智能 安全 数据安全/隐私保护
落实《安全生产法》,企业隐患排查如何实现闭环管理
落实制度靠流程,而流程能不能闭环,很大程度上取决于工具是不是够简洁。在隐患排查这件事上,复杂不一定代表先进,能落地、能用起来、能留下记录,才是关键。
|
小程序 JavaScript 数据库
微信小程序云开发数据库操作删除记录
微信小程序云开发数据库操作删除记录
353 0
|
12月前
|
SQL JSON 关系型数据库
17.6K star!后端接口零代码的神器来了,腾讯开源的ORM库太强了!
"🏆 实时零代码、全功能、强安全 ORM 库 🚀 后端接口和文档零代码,前端定制返回 JSON 的数据和结构"
250 1
|
JavaScript 前端开发 索引
JavaScript获取url网址中域名后面的部分
如何截取 url 中网站域名之后的部分,需要用到以下几个方法:
405 3
|
前端开发 JavaScript Java
一文带你了解和使用js中的Promise
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,正向全栈进发。如果我的文章对你有帮助,请关注我,将持续更新更多优质内容!🎉🎉🎉
834 0
一文带你了解和使用js中的Promise
|
机器学习/深度学习 自然语言处理 并行计算
淘宝搜索中的深度语义模型:从理论到实践
淘宝搜索系统通过引入深度语义模型,极大地提升了搜索质量和用户体验。这些模型不仅能够准确理解用户的需求,还能够智能地匹配和推荐商品,为用户提供了一个更加便捷、个性化的购物环境。随着技术的不断发展和完善,淘宝搜索将会变得更加智能和高效。
|
关系型数据库 MySQL
MySQL中varchar能存多少汉字、数字
MySQL中varchar能存多少汉字、数字
1310 0
|
前端开发
uniapp 实战 -- 创建 uni-admin 项目,部署到 uniCloud 前端网页托管(免费云空间)
uniapp 实战 -- 创建 uni-admin 项目,部署到 uniCloud 前端网页托管(免费云空间)
1423 0
|
存储 编译器 数据处理
栈溢出及解决方法
栈溢出及解决方法

热门文章

最新文章