转自林小冉
1、页面排版
<button onclick="before()">上一天</button>
<button onclick="after()">下一天</button>
<div id="date">
</div>
2、先实例化Date
var date=new Date();
3、写入页面
var el=document.getElementById('date')//找到元素id
el.innerHTML=myGetDate()//渲染页面
//这里是用函数封装的,方便后面使用
function myGetDate(){
return `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`
}
4、计算上一天
function before(){
date=new Date();//每次调用重新实例化Date
date.setTime(date.getTime()-(1000*60*60*24))//获取时间戳到当前时间的毫秒数减去一天时间的毫秒数
el.innerHTML=myGetDate()//调用上面写的排版函数,渲染页面
}
5、计算下一天
function after(){
date=new Date();
date.setTime(date.getTime()+(1000*60*60*24))
el.innerHTML=myGetDate()
}
下一天计算与上一天同理,只需把减改成加就可以了
整体代码结构
<body>
<button onclick="before()">上一天</button>
<button onclick="after()">下一天</button>
<div id="date">
</div>
</body>
<script>
var date = new Date();
var el = document.getElementById('date')
el.innerHTML = myGetDate()
function myGetDate() {
return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
}
function before() {
date = new Date();
date.setTime(date.getTime() - (1000 * 60 * 60 * 24))
el.innerHTML = myGetDate()
}
function after() {
date = new Date();
date.setTime(date.getTime() + (1000 * 60 * 60 * 24))
el.innerHTML = myGetDate()
}
</script>