案例：使用JS计算前一天和后一天

最新推荐文章于 2024-04-19 13:28:32 发布

?Miss

最新推荐文章于 2024-04-19 13:28:32 发布

阅读量363

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/Dousy/article/details/103585847

版权

使用JS计算前一天和后一天

介绍一个简单的小案例，用JS计算出当前时间的前一天和后一天，为了便于展示，我们先写一个小小的页面

<body>
    <div class="box">
        <button onclick="Before()">前一天</button>
        <div id="app"></div>
        <button onclick="After()">后一天</button>
    </div>
</body>

点击前一天按钮日期将会跳转至当前日期的前一天
点击后一天按钮日期将会跳转至当前日期的后一天

接下来创建一个js文件

<script src="index.js"></script>

1、要想计算日期，首先创建变量获取当前日期

var date = new Date();//当前时间

获取当前时间日期部分：

时间格式： new Date(new Date().toLocaleDateString())
string格式： new Date().toLocaleDateString()

2、获取div的Id,写入日期

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

3、获取时间戳

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

4、获取前一天日期

function Before(){
    var before = time - oneDay;//计算前一天的毫秒数
    date.setTime(before);
    //setTime() 方法以毫秒设置 Date 对象。
    //我们将向当前时间添加 XXX毫秒，并显示新的日期和时间：
    app.innerHTML = myGetDate(date);
}

5、后一天日期

后一天的日期：当前的毫秒数加上一天的毫秒数，用setTime（）方法设置，

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

注：

//前一月/后一月
var now = new Date();
now.setMonth(now.getMonth()-1); 
 var now2 = new Date();
now2.setMonth(now.getMonth()+1);  
alert(now2);

6、封装日期格式化的方法

注意： getMonth() 方法可返回表示月份的数字。返回值是 0（一月）到 11（十二月）之间的一个整数。（一月为 0, 二月为 1, 以此类推）

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

    //getFullYear() 方法可返回一个表示年份的 4 位数字。
    //getDate() 方法可返回月份的某一天。返回值是 1 ~ 31 之间的一个整数。
}

7.最后附上完整js代码

var date = new Date();

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

//时间戳
var time = date.getTime();
var oneDay = 1000*60*60*24;
//前一天
function goBefore(){
    var before = time - oneDay;//计算前一天的毫秒数
    date.setTime(before);//setTime() 方法以毫秒设置 Date 对象。
    //我们将向当前时间添加 XXX毫秒，并显示新的日期和时间：
    app.innerHTML = myGetDate(date);
}
//后一天
function goAfter(){
    var after = time + oneDay;//计算前一天的毫秒数
    date.setTime(after);
    app.innerHTML = myGetDate(date);
}
//封装日期格式化的方法
function myGetDate(d){
    return `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日`;
}