1.我只想问的是为什么showBtn里面的aNowSpan[0].parentNode.onclick点击后不能再获取到leftmonth和leftyear的值,或者我把leftmonth和leftyear都写进了onclick里面还是不能获取新的值,这又是为什么?
2.如果不用递归怎么获取leftmonth和leftyear的值?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0; font-size:12px;}
#div1{ margin:20px; position:absolute; top:25px; left:10px; display:none;}
#nowTime{ width:330px; float:left;}
#nextTime { width:330px; float:left; margin:0 0 0 10px;}
.title{ width:100%; height:30px; background:#17a4eb; color:#FFFFFF; position:relative;}
.title .c{ text-align:center; line-height:30px;}
.title .l{ position:absolute; top:6px; left:5px;}
.title .r{ position:absolute; top:6px; right:5px;}
table{ width:100%; background:#dee3e9; color:#9ea7ac;}
table tr{ background:#f9fafc;}
table th{ width:46px; padding:5px;}
table td{ padding:5px; text-align:center;}
.red{ color:#FF0000;}
.blue{ color:#0000FF;}
table td p{ color:#FF0000;}
input{ margin:20px;}
</style>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
var oDiv = document.getElementById('div1');
var oNowTime = document.getElementById('nowTime');
var oNextTime = document.getElementById('nextTime');
var aTd = oDiv.getElementsByTagName('td');
var aNowSpan = oNowTime.getElementsByTagName('span');
var aNextSpan = oNextTime.getElementsByTagName('span');
var bBtn = true;
aInput[2].onclick = function(){
var oDate = new Date();
if(bBtn){
oDiv.style.display = 'block';
if(oDate.getMonth()+1==12){
showDate(oNowTime,oDate.getFullYear(),oDate.getMonth()+1,true);
showDate(oNextTime,oDate.getFullYear()+1,1);
}
else{
showDate(oNowTime,oDate.getFullYear(),oDate.getMonth()+1,true);
showDate(oNextTime,oDate.getFullYear(),oDate.getMonth()+2);
}
showColor(oDate.getDate());
showBtn();
}
else{
oDiv.style.display = 'none';
}
bBtn = !bBtn;
};
function showDate(obj,year,month,bBtn){
var oDate = new Date();
var dayNum = 0;
if(!obj.bBtn){
obj.oTitle = document.createElement('div');
obj.oTitle.className = 'title';
obj.appendChild(obj.oTitle);
var oTable = document.createElement('table');
var oThead = document.createElement('tHead');
var oTr = document.createElement('tr');
var arr = ['周一','周二','周三','周四','周五','周六','周日'];
for(var i=0;i<7;i++){
var oTh = document.createElement('th');
oTh.innerHTML = arr[i];
if(i==5 || i==6){
oTh.className = 'red';
}
oTr.appendChild(oTh);
}
oThead.appendChild(oTr);
oTable.appendChild(oThead);
var oTbody = document.createElement('tBody');
for(var i=0;i<6;i++){
var oTr = document.createElement('tr');
for(var j=0;j<7;j++){
var oTd = document.createElement('td');
oTr.appendChild(oTd);
}
oTbody.appendChild(oTr);
}
oTable.appendChild(oTbody);
obj.appendChild(oTable);
obj.bBtn = true;
}
obj.oTitle.innerHTML = ( bBtn ? '<div class="l"><span>'+(month-1)+'</span>月</div>' : '<div class="r"><span>'+(month+1)+'</span>月</div>')+'<div class="c"><span>'+year+'</span>年<span>'+month+'</span>月</div>';
var aTd = obj.getElementsByTagName('td');
for(var i=0;i<aTd.length;i++){
aTd[i].innerHTML = '';
}
if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){
dayNum = 31;
}
else if(month==4 || month==6 || month==9 || month==11){
dayNum = 30;
}
else if(month==2 && isLeapYear(year)){
dayNum = 29;
}
else{
dayNum = 28;
}
oDate.setFullYear(year);
oDate.setMonth(month-1);
oDate.setDate(1);
switch(oDate.getDay()){
case 0:
for(var i=0;i<dayNum;i++){
aTd[i+6].innerHTML = i+1;
}
break;
case 1:
for(var i=0;i<dayNum;i++){
aTd[i].innerHTML = i+1;
}
break;
case 2:
for(var i=0;i<dayNum;i++){
aTd[i+1].innerHTML = i+1;
}
break;
case 3:
for(var i=0;i<dayNum;i++){
aTd[i+2].innerHTML = i+1;
}
break;
case 4:
for(var i=0;i<dayNum;i++){
aTd[i+3].innerHTML = i+1;
}
break;
case 5:
for(var i=0;i<dayNum;i++){
aTd[i+4].innerHTML = i+1;
}
break;
case 6:
for(var i=0;i<dayNum;i++){
aTd[i+5].innerHTML = i+1;
}
break;
}
if(month==1 && bBtn){
obj.oTitle.getElementsByTagName('span')[0].innerHTML = 12;
}
else if(month==12 && !bBtn){
obj.oTitle.getElementsByTagName('span')[0].innerHTML = 1;
}
}
function isLeapYear(year){
if(year%4==0 && year%100!=0){
return true;
}
else{
if(year%400==0){
return true;
}
else{
return false;
}
}
}
function showColor(date){
var result = [];
var oDate = new Date();
var re = new RegExp(''+date+'(<p>)*');
var bBtn = true;
var index = 0;
for(var i=0;i<aTd.length;i++){
if(aTd[i].innerHTML!=''){
result.push(aTd[i]);
}
}
if(aNowSpan[1].innerHTML == oDate.getFullYear() && aNowSpan[2].innerHTML == oDate.getMonth()+1){
for(var i=0;i<result.length;i++){
if(re.test(result[i].innerHTML) && bBtn){
result[i].className = 'red';
index = i;
bBtn = false;
}
}
for(len=index+11;index+1<len;index++){
result[index+1].className = 'blue';
}
}
else{
for(var i=0;i<result.length;i++){
result[i].className = '';
}
}
}
function showBtn(){
var leftMonth = parseInt(aNowSpan[0].innerHTML);
var leftYear = parseInt(aNowSpan[1].innerHTML);
var rightMonth = parseInt(aNextSpan[0].innerHTML);
var rightYear = parseInt(aNextSpan[1].innerHTML);
aNowSpan[0].parentNode.onclick = function(){
//var leftMonth = parseInt(aNowSpan[0].innerHTML);
//var leftYear = parseInt(aNowSpan[1].innerHTML);
//var rightMonth = parseInt(aNextSpan[0].innerHTML);
//var rightYear = parseInt(aNextSpan[1].innerHTML);
if(leftMonth == 12){
showDate(oNowTime,leftYear-1,leftMonth,true);
showDate(oNextTime,leftYear,1);
}
else{
showDate(oNowTime,leftYear,leftMonth,true);
showDate(oNextTime,leftYear,leftMonth+1);
}
//showBtn();
showColor(new Date().getDate());
};
aNextSpan[0].parentNode.onclick = function(){
if(rightMonth == 1){
showDate(oNowTime,rightYear,12,true);
showDate(oNextTime,rightYear+1,rightMonth);
}
else{
showDate(oNowTime,rightYear,rightMonth-1,true);
showDate(oNextTime,rightYear,rightMonth);
}
showBtn();
showColor(new Date().getDate());
};
}
};
</script>
</head>
<body>
<input type="text" /><input type="text" /><input type="button" value="确定" />
<div id="div1">
<div id="nowTime">
<!--<div class="title">
<div class="l"><span>3</span>月</div>
<div class="c"><span>2000</span>年<span>3</span>月</div>
</div>
<table>
<thead>
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th class="red">周六</th>
<th class="red">周日</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>
1
<p>200元</p>
</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>-->
</div>
<div id="nextTime">
<!--<div class="title">
<div class="r"><span>3</span>月</div>
<div class="c"><span>2000</span>年<span>3</span>月</div>
</div>
<table>
<thead>
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th class="red">周六</th>
<th class="red">周日</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>
1
<p>200元</p>
</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>-->
</div>
</div>
</body>
</html>
没有发现你说的问题
要先把递归注释掉,你在看看
@马斯塔:
因为没有注释之前,aNowSpan[0]每次都是取得更新后的月份(即新创建的节点),而放开注释之后,取到的永远都是固定的。
如果还不懂,就加我QQ278500368吧
兼容?