html+js一个简单的日历

来源：互联网发布：淘宝模版怎么做编辑：程序博客网时间：2024/05/21 09:02

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

//var sYear=2014;
//var sDonth=1;
//var sDate=sYear+"-"+sDonth+"-01";

function getLastMonthDay(){
var year=document.getElementById("year").innerHTML;
var month=document.getElementById("month").innerHTML;
var day = new Date(year,month,0);
var lastdate = day.getDate();//获取当月最后一天日期
console.log("lastdate="+lastdate);
return lastdate;
}

function getNullDay(){
//var myDate = "2014-02-"+getLastMonthDay(2014,2);
var year=document.getElementById("year").innerHTML;
var month=document.getElementById("month").innerHTML;
var date=year+"-"+month+"-01";

var myDate = new Date(date);
var result=myDate.getDay();
console.log(result);

return result;
}

//day total day
//dayFirst create null day in the row day 1 show in which cell 0 to 6 (0 is sunday)
function init(day, dayFirst){
/*星期一： Mon.=Monday
星期二： Tues.=Tuesday
星期三： Wed.=Wednesday
星期四： Thur.=Thursday
星期五： Fri.=Friday
星期六： Sat.=Saturday
星期天： Sun.=Sunday*/
var ary=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var count = 1;//how many day output
var totalTd = day + dayFirst;//total cell
var daySize = 7;//how many day
var totalTr = Math.ceil(totalTd/daySize);//total row
var table = document.createElement("table");
table.id="divCandler"
var trHead=document.createElement("tr");
for(var i=0; i<ary.length; i++){
var tdHead=document.createElement("td");
tdHead.innerHTML=ary[i];
trHead.appendChild(tdHead);
console.log(i);
}
table.appendChild(trHead);
//console.log("row="+totalTr);
for(var i=1; i<=totalTr; i++){
var tr=document.createElement("tr");
//first row set
if(i==1){//begin if
//set null cell
for(var j=1; j<=dayFirst; j++){
var tdNull=document.createElement("td");
tr.appendChild(tdNull);
//console.log("null="+j);
}
//begin set day cell
for(var j=1; j<=daySize-dayFirst; j++){
var td=document.createElement("td");
td.innerHTML=count;
tr.appendChild(td);
count=count+1;
}
}//end if
else{//begin else
for(var j=1; j<=daySize; j++){
if(count<=day){
var td=document.createElement("td");
td.innerHTML=count;
tr.appendChild(td);
count=count+1;
}
}
}//end else

table.appendChild(tr);
//console.log(i);
}
var parentdiv=document.getElementById("divContainer");
var divCandler=document.getElementById("divCandler");
if(null!=divCandler){
parentdiv.removeChild(divCandler);
}
parentdiv.appendChild(table);
}

function switchLeftCandler(){
var year=document.getElementById("year");
var month=document.getElementById("month");

if(month.innerHTML==1){
year.innerHTML=year.innerHTML-1;
month.innerHTML=12;
}
else{
month.innerHTML=month.innerHTML-1;
}

init(getLastMonthDay(),getNullDay());
}
function switchRightCandler(){
var year=document.getElementById("year");
var month=document.getElementById("month");

if(month.innerHTML==12){
year.innerHTML=parseInt(year.innerHTML)+1;
month.innerHTML=1;
}
else{
month.innerHTML=parseInt(month.innerHTML)+1;
}

init(getLastMonthDay(),getNullDay());
}
</script>
</head>

<body>

<div id="divContainer">
<div>
<a href="#" onClick="switchLeftCandler()">< </a>
<a id="year">2014</a>-<a id="month">12</a>
<a href="#" onClick="switchRightCandler()"> ></a>
</div>
<script type="text/javascript">init(getLastMonthDay(),getNullDay());</script>
</div>
</body>
</html>

0 0