使用JavaScript计算前一天和后一天的思路详解

作者：拾光

时间：2026-10-23

本文详细讲解如何利用JavaScript的时间戳机制，通过获取当前时间与1970年的毫秒差，结合一天的固定毫秒数，实现页面上“前一天”和“后一天”按钮点击后的日期动态切换功能。

文章目录

功能概述与页面布局

实现页面中点击“前一天”或“后一天”按钮时，页面显示的时间随之更新的功能。

首先梳理实现逻辑。

参考如下示意图：

功能概述与页面布局

1、页面布局设计

首先需要完成页面的基础排版，例如：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <button onclick="goBefore()">前一天</button>
  <button onclick="goAfter()">后一天</button>
  <div id="app"></div>
</body>
</html>

核心逻辑：时间戳计算

2、获取时间戳

2.1、获取从1970年1月1日至今的时间戳


var date = new Date();
var time = date.getTime();//当前的时间到1970年凌晨的时间戳

2.2、计算一天的毫秒数（用于后续推算）


var oneDay = 1000*60*60*24;//一天的毫秒数

日期格式化封装

3、封装日期格式化方法

以下代码将日期格式化逻辑封装为函数，以便后续调用。


function myGetDate(d){
return `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日`;
}

事件处理与页面渲染

4、获取页面元素、计算当前日期的前一天（或后一天）并调用渲染函数


var ele = document.getElementById("show")；//获取页面元素

function gobefore(){
  var m=time-OneDay;<br>　　//把毫秒数转为时间
  date.setTime(m)；<br>　　//调用排版渲染到页面
  ele.innerHTML=MyDate()；
}

function goafter(){
  var m=time+OneDay;<br>　　//把毫秒数转为时间
  date.setTime(m)；<br>　　//调用排版渲染到页面
  ele.innerHTML=MyDate()；
}

通过以上步骤，我们实现了使用JavaScript简单计算并展示前一天和后一天的功能。

总结

以上介绍了使用JavaScript计算前一天和后一天的详细思路，希望能对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。在此感谢大家对本站的支持！如果觉得本文对您有帮助，欢迎转载，请注明出处，谢谢！