js日历

nlx0201

浏览: 28883 次
性别:
来自: 武汉

最近访客更多访客>>

pei1219

zhuchen629579

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (62)

社区版块

存档分类

js制作日历，可以获取当前的月份，并按对应的星期进行摆放，也可以加上相应的CSS和a标签。具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <style type="text/css" mce_bogus="1"> *{margin:0;padding:0;} </style> <script type="text/javascript" language="javascript"> window.onload=function() { var d = new Date(); var year = d.getUTCFullYear(); var month = (d.getMonth() + 1); // 获取月份。 var firstDay = new Date(month.toString() + "-1-" + year.toString()).getDay(); //这个月1号是星期几 var flag = 0; var tTable = document.getElementById("tb1"); var firstTr = tTable.rows[0].cells[0]; var ds = 31; var temp=0; if (parseInt(month) == 4 || parseInt(month) == 6 || parseInt(month) == 9 || parseInt(month) == 11) { ds = 30; } if (parseInt(month) == 2) { if((parseInt(year) % 400 == 0) || (parseInt(year) % 100 != 0) && (parseInt(year) % 4 == 0)){ ds = 29; }else{ ds = 28; } } var atemp = ","; var days = new Array("1", "3", "4", "5"); for (var k = 0; k < days.length; k++) { atemp += days[k] + ","; } firstTr.innerHTML = month + "月"; for (var i = 2; i < 8; i++) { var tRow = tTable.insertRow(i); for (var j = 0; j < 7; j++) { var tCell = tRow.insertCell(j); temp = (i - 2) * 7 + j - parseInt(firstDay) +1; if (temp > ds) { break; } if (parseInt(d.getDate()) == temp) { tCell.innerHTML = temp; //$(tCell).attr("style", "font-weight:bold");如果是当天就突出显示 } if (temp > 0) { if (atemp.indexOf("," + temp + ",") > -1) { tCell.innerHTML = "<a href='#'>" + temp + "</a>"; //如果是数组里面的特定月份就加上链接 } else tCell.innerHTML = temp; } } flag++; } var lastTr = tTable.rows[tTable.rows.length - 1].cells[0]; if ((month - 1) > 0) { lastTr.innerHTML = (month-1) + "月"; } }; </script> </head> <body> <form id="form1"> <table width="300" id="tb1" style="border:0px; margin:0px; padding:0px;"> <tr> <td colspan="7" style="text-align:center"></td> </tr> <tr style="background-color:#e5e5e5;"> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr> <tr style="background-color:#e5e5e5;color:#ff00ff; size:16px;"> <td colspan="7"></td> </tr> </table> </form> </body> </html>

运行效果如图：