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

(编辑:jimmy 日期: 2024/11/16 浏览:2)

要实现在页面上点击“前一天”或“后一天”,页面上的时间改变。

首先让我们整理一下思路

如下图:

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

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年到现在的时间戳

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计算前一天和后一天的思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。