JS单日的日历（上一天、下一天）

最新推荐文章于 2022-11-18 13:47:22 发布

weixin_38169798

最新推荐文章于 2022-11-18 13:47:22 发布

阅读量147

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/maixi/p/5178131.html

版权

最近在做这个手机页面，饼图均是用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>