如何使用JavaScript实现日期的前一天后一天
实现步骤：
1、创建一个HTML页面写入需要用到的标签
2、对HTML中的标签元素设置样式
3、写入JavaScript代码实现效果
一、创建HTML页面
1.1 创建页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 添加按钮点击事件 -->
<button onclick="before()">前一天</button>
<button onclick="after()">后一天</button>
<!-- 添加时间的盒子 -->
<div id="app"></div>
</body>
</html>
1.2 需用的标签元素
<!-- 添加按钮点击事件 -->
<button onclick="before()">前一天</button>
<button onclick="after()">后一天</button>
<!-- 添加时间的盒子 -->
<div id="app"></div>
二、设置样式
2.1 html中引入
<link rel="stylesheet" href="index.css">
2.2 对元素设置样式
button{
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
margin: 5px 15px 7px 3px;
}
div{
margin-left: 5px;
}
/* 本人写的不好看你们可以根据自己的要求改哦 */
三、JavaScript效果实现
3.1 html中引入
<script src="index.js"></script>
3.2 实现效果
得到当前日期和div的id
var day = new Date();
var app = document.getElementById('app');
设置一个函数来规定一个想要的时间格式
function myday(d) {
return `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日`
};
获取规定的时间格式并添加到div盒子中
var time = myday(day);
app.innerHTML = time;
获取时间戳和一天的时间
var xtime = day.getTime();
var dtime = 1000 * 60 * 60 * 24;
前一天按钮的点击事件，得到前一天的时间并设置时间到div盒子中
function before() {
var before = xtime - dtime;
day.setTime(before);
app.innerHTML = myday(day);
};
后一天按钮的点击事件，得到后一天的时间并设置时间到div盒子中
function after() {
var after = xtime + dtime;
day.setTime(after);
app.innerHTML = myday(day);
};
四、总代码
要复制的同志要在这取哦
index.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index1.css">
</head>
<body>
<!-- 添加按钮点击事件 -->
<button onclick="before()">前一天</button>
<button onclick="after()">后一天</button>
<!-- 添加时间的盒子 -->
<div id="app"></div>
</body>
<script src="index.js"></script>
</html>
index.js页面
//得到现在的时间
var day = new Date();
//获取id
var app = document.getElementById('app');
// console.log(day);
// 规定一个时间格式
function myday(d) {
return `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日`
};
// 获取规定的时间格式并添加到div盒子中
var time = myday(day);
app.innerHTML = time;
app.innerText
//获取时间戳和一天的时间
var xtime = day.getTime();
var dtime = 1000 * 60 * 60 * 24;
//前一天按钮的点击事件，得到前一天的时间并设置时间到div盒子中
function before() {
var before = xtime - dtime;
day.setTime(before);
app.innerHTML = myday(day);
};
//后一天按钮的点击事件，得到后一天的时间并设置时间到div盒子中
function after() {
var after = xtime + dtime;
day.setTime(after);
app.innerHTML = myday(day);
};
需要用到的知识点：
- Date 对象用于处理日期与时间。 创建 Date 对象： new Date()
- 返回月份的某一天。 getDate()
- 返回一个年份。 getFullYear()
- 返回月份。 getMonth()
- 依据当地时间返回时间的分钟数。 getMinutes()
- 返回距 1970 年 1 月 1 日之间的毫秒数。 getTime()
