用js设计一个动态日历，布局用到了bootstrap
代码：
<!DOCTYPE html>
<html lang="zh">
<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" type="text/css" href="asserts/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-offset-2">
<select name="year" id="year" class="form-control" onchange="changeyear()">
<option value="2014">2014</option>
<option value="2014">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
</div>
<div class="col-md-1 text-center" style="font-size: 2em;">
年
</div>
<div class="col-md-3 col-xs-offset">
<select name="month" id="month" class="form-control" onchange="changemonth()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="col-md-1 text-center" style="font-size: 2em;">
月
</div>
<div class="row">
<div class="col-md-8 col-xs-offset-2">
<table class="table table-striped table-hover">
<tr>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
<th>日</th>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var date = new Date(); //获取时间对象
var year = year = date.getFullYear(); //当前年份
var moth = date.getMonth(); //当前月份
var nday = date.getDate(); //天
var adays = document.getElementsByTagName('td');
console.log(year + '/' + moth)
var nlstr = new Date(year, moth, 1); //获取每月的第一天 nlstr.getday()每月第一天是周几
var nld = nlstr.getDay();
if(nld == 0) {
nld = 7;
}
var days = new Array(31, 28 + is_leap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);//每月天数
var ayear = document.getElementById('year');//显示当前年份
for(var i = 0; i < ayear.length; i++) {
if(ayear[i].value == year) {
ayear[i].selected = true;
break;
}
}
var amoth = document.getElementById('month');//显示当前月份
for(var i = 0; i < amoth.length; i++) {
if(amoth[i].value - 1 == moth) {
amoth[i].selected = true;
break;
}
}
function is_leap(year) { //判断是否为闰年
return(year % 100 == 0 ? res = (year % 400 == 0 ? 1 : 0) : res = (year % 4 == 0 ? 1 : 0));
}
function $(id) {
return document.getElementById(id)
}
function calendar(year, moth, nday) { //显示日期函数
nlstr = new Date(year, moth, 1); //获取每月的第一天 nlstr.getday()每月第一天是周几
nld = nlstr.getDay();
if(nld == 0) {
nld = 7;
}
var ds1 = days[moth];
var ds
if(moth === 0) {
ds = days[11];
} else {
ds = days[moth - 1];
}
for(var i = 0; i < adays.length; i++) {
adays[i].removeEventListener('click', null);
adays[i].className = '';
if(i < nld - 1) {
var d = ds - nld + i + 2;
adays[i].innerHTML = d;
adays[i].style.color = "rgba(0,0,0,0.3)";
continue;
} else if(i < days[moth] + nld - 1) {
var d = i - nld + 2;
adays[i].innerHTML = d;
adays[i].style.color = "rgba(0,0,0,1.0)";
adays[i].addEventListener('click', function() {//更改当前日
//bug 点击先前灰白区可能触发之前事件，为2^n-1次，
//bug2有些月份点击会出现变色点偏移
console.log(1)
nday = this.innerHTML;
calendar(year, moth, nday);
});
if(adays[i].innerHTML == nday && year == year && moth == moth) {
adays[i].className = 'alert-info';
}
continue;
} else if(i > days[moth] + nld - 2) {
var d = i - ds1 - nld + 2;
adays[i].innerHTML = d;
adays[i].style.color = "rgba(0,0,0,0.3)";
}
// if(i > nld - 2 && i < days[moth] + nld - 1) {
// adays[i].addEventListener('click', function() {
// console.log(i)
// nday = this.innerHTML;
// calendar(year, moth, nday);
// })
// }
// if(adays[i].innerHTML == nday && year == year && moth == moth) {
// adays[i].className = 'alert-info';
// }
}
}
calendar(year, moth, nday)
// function clickpointer(year, moth, nday) {
// for(var i = 0; i < adays.length; i++) {
// if(i > nld - 2 && i < days[moth] + nld - 1) {
// console.log(moth)
// adays[i].addEventListener('click', function() {
// nday = this.innerHTML;
// calendar(year, moth, nday);
// })
// }
// }
// }
// $('year').addEventListener('chang',function(){
// year = this.innerHTML;
// calendar(year, moth, nday);
// })
function changeyear() {//选择年份更改日历
for(var i = 0; i < ayear.length; i++) {
if(ayear[i].selected == true) {
year = ayear[i].innerText;
calendar(year, moth, nday);
}
}
}
function changemonth() {//选择月份更改日历
for(var i = 0; i < amoth.length; i++) {
if(amoth[i].selected == true) {
moth = amoth[i].innerText - 1;
calendar(year, moth, nday);
}
}
}
</script>
</body>
</html>