DEMO2：
思路：首先获取元素节点元素--->根据点击事件隐藏显示元素--->建立showdate方法（判断12月 则右边年份+1，月份1 ）--->还要设置btn开关 防止多次重建--->根据元素清空 for循环列 行、把 th tr thead加入table--->根据判断每一次点击进入月份必须先清空一次td
判断月份大小及闰年---> switch循环加入日期
难点：整理下再写
代码部分：
window.onload=function()
{
var ainput = document.getElementsByTagName("input");
var odiv = document.getElementById("div1");
var oNowTime = document.getElementById("nowTime");
var oNextTime = document.getElementById("nextTime");
//=============获取span 左边 右边的 标题年 月 表示长度【i】
var aNowspan = oNowTime.getElementsByTagName('span');
var aNextspan = oNextTime.getElementsByTagName('span');
var aTd = odiv.getElementsByTagName("td");
var bBtn =true; //确认点击事件
ainput[2].onclick=function()
{
var oDate = new Date();
if(bBtn)
{
odiv.style.display="block";
//判断时间 当12月是 后面一个月是1月份
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);
}
//添加方法 当前日期显示红色 后10天显示蓝色
console.log("几号"+oDate.getDate());
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.oTtiel = document.createElement("div");
obj.oTtiel.className = "title";
obj.appendChild(obj.oTtiel); 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.oTtiel.innerHTML = (bBtn ? '<div class="title"><div class="l"><span>'+(month-1)+'</span>月</div>' :'<div class="title"><div class="r"><span>'+(month+1)+'</span>月</div>')+'<div class="c"><span>'+year+'</span>年<span>'+month+'</span>月</div>'; var aTd = obj.getElementsByTagName("td"); //误区 如果 obj改为 doucument 则只能显示一张日历
//每次都要清空一次 再生产 为什么？？ 每次点击都是要更新日历内容 如果换一天了 更新一天的日历所以必须清空重新生成
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{ //2月份闰年 判断
if(month == 2 && isleeyear(year)){
dayNum =29;
}else{
dayNum = 28;
}
} oDate.setFullYear(year);
oDate.setMonth(month-1);
oDate.setDate(1); //日期
console.log(oDate.getDay());
console.log(year)
console.log(month) 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; }
//判断当前月份是否是1月 则 前面一个月份 是 year-1 月份是12 右边 12 下一个月 为1月
if(month==1 && bBtn){
//代表左边一个日历
obj.oTtiel.getElementsByTagName('span')[0].innerHTML =12; }else if(month==12 && !bBtn){
obj.oTtiel.getElementsByTagName('span')[0].innerHTML =1;
} }
//闰年判断
function isleeyear(year)
{
if (year %4 == 0 && year%100 !=0) {
return true;
}else if(year%400==0){
return true;
}else{
return false;
}
} function showColor(date)
{
//储存所有带数值的td
var oDate = new Date();
var result =[];
//正则 传入 当前 日期 几号
var re = new RegExp(''+date+'(<p>)*');
var index = 0;
var bBtn = true;
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;
}
}
//寻找 当前日期后面的 10个日子 变身蓝色
console.log(index);
//for循环的另一种思想
var len = index +11;
for(var i=index +1;index+1<len;index++){
result[index+1].className = "blue";
} }else{
for (var i = 0; i < result.length; i++) {
result[i].className="";
}
} }
function showBtn()
{
//获取左边月份
var leftM = parseInt(aNowspan[0].innerHTML);
var leftY = parseInt(aNowspan[1].innerHTML); console.log(aNowspan[0].innerHTML)
//获取 年份
var rightM =parseInt(aNextspan[0].innerHTML);
var rightY =parseInt(aNextspan[1].innerHTML);
//判断 当前日历 下一个点击按钮
aNowspan[0].parentNode.onclick=function()
{
//到12月份 判断
if (leftM ==12) {
showDate(oNowTime,leftY-1,leftM,true);
showDate(oNextTime,leftY,1); }else{
showDate(oNowTime,leftY,leftM,true);
showDate(oNextTime,leftY,leftM+1);
} showBtn();
showColor(new Date().getDate()); //当前日期去验证是否在同一张日历
}
aNextspan[0].parentNode.onclick=function()
{
//到12月份 判断
if (rightM ==1) {
showDate(oNowTime,rightY,12,true);
showDate(oNextTime,rightY+1,rightM); }else{
showDate(oNowTime,rightY,rightM-1,true);
showDate(oNextTime,rightY,rightM);
} showBtn();
showColor(new Date().getDate()); //当前日期去验证是否在同一张日历 } } }
HTML部分：
<body>
<input type="text" /><input type="text" /><input type="button" value="确定" />
<div id="div1">
<div id="nowTime">
</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>
还未完成功能：
点击日历 把日历日期 赋值到 选项框中
在日期中 ajax传价格