JS单日的日历(上一天、下一天)

 

最近在做这个手机页面 ,  饼图均是用CSS3实现的。日期切换 JS代码如下(自己写的,轻测无BUG):

 

贴代码进来后居然直接可以预览;:下面是效果(可以点击哦)

 JS单日的日历(上一天、下一天):

日历

 

< 当前日期 >

 

 

 代码:

 

 

 

<!DOCTYPE html>
<html>
<head>
<title>日历</title>
<style>
span:first-child,
span:last-child{display: inline-block;background: #ccc;width: 20px;text-align: center;}
</style>
</head>
<body>
<div id="date">
<span><</span>
<span>当前日期</span>
<span>></span>
</div>
<script type="text/javascript">
// 获取页面UI
var date_view = document.getElementById('date'),
btn_prev = date_view.getElementsByTagName('span')[0],
date_text = date_view.getElementsByTagName('span')[1],
btn_next = date_view.getElementsByTagName('span')[2];

// 获取时间
var d = new Date(),
year = d.getFullYear(),
month = d.getMonth() + 1,
date = d.getDate();

date_text.innerHTML = year + '年' + month + '月' + date + '日';

btn_prev.onclick = function(){
date--
month_pd()
date_text.innerHTML = year + '年' + month + '月' + date + '日';
}
btn_next.onclick = function(){
date++
month_pd()
date_text.innerHTML = year + '年' + month + '月' + date + '日';
}
function month_pd(){
function set_date(nd){
if(date>nd){
date = 1
month = month+1
if(month>12){month=1;year =year+1}
}
if(date<1){
month = month-1
if(month<1){month=12;year =year-1}
date = new Date(year,month,0).getDate()
}
}
if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) isy = true;
switch(month){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
set_date(31)
break;
case 4:
case 6:
case 9:
case 11:
set_date(30)
break;
case 2:
if(isy){
set_date(29)
}else{
set_date(28)
}
break;
}
}
</script>
</body>
</html>

 

posted @ 2016-02-02 17:28  王麦曦  阅读(653)  评论(0编辑  收藏  举报