JS实现前一天后一天的案例

标题 JS实现前一天后一天的案例

JS计算前一天后一天的案例

概述
通过js代码实现点击上一天、后一天，页面显示上一天、后一天的时间

1：HTML代码
1-1:html页面需要有两个button按钮，来进行点击
div标签是用来显示的

<button onclick="prev()">前一天</button>
<button onclick="next()">后一天</button>
<div id="app"></div>

2：JS代码
2-1:首先实例化一个Date对象，通过data自带的方法获取到当前的时间日期

var date = new Date();

2-2:获取需要的时间戳

var time = date.getTime();//当前的毫秒数
var oneDay = 1000*60*60*24;//一天的毫秒数

2-3:将时间戳转换为我们需要的时间格式
用函数封装起来是为了后面再次使用方便快捷

//封装日期格式化的方法
function myGetDate(d){
    return `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日`;
}
// getMonth()+1:getMonth是获取月份的，它的返回值是0-11，
所以需要加1才能达到1-12月的效果

2-4:获取到页面元素

var app = document.getElementById("app");
app.innerHTML = myGetDate(date);

2-5:进行上一天计算的操作

function prev(){
    var before = time - oneDay;//计算前一天的毫秒数
    date.setTime(before);
    app.innerHTML = myGetDate(date);
}

2-6:进行后一天计算的操作

function next(){
    var after = time - oneDay;//计算前一天的毫秒数
    date.setTime(before);
    app.innerHTML = myGetDate(date);
}