<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>一款适合于学习的简单的js日历代码</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var now = new Date(); var month_array = new Array("january","february","march","April","May","June","July","August","September","October","November","December"); document.write("<form name=date_list><table bgcolor=silver><tr><td>"); document.write("<select name=month onchange=change_month(this.options.selectedIndex)>"); for(i=0;i<month_array.length;i++) { if (now.getMonth() != i) {document.write ("<option value="+i+">"+month_array[i]);} else {document.write ("<option value="+i+" selected>"+month_array[i]);} } document.write("</select>"); document.write("</td><td>"); document.write ("<select name=year onchange=change_year(this.options[this.options.selectedIndex])>"); for(i=1950;i<3000;i++) { if (now.getYear() != i) {document.write("<option value="+i+">"+i);} else {document.write("<option value="+i+" selected>"+i);} } document.write("</select></td></tr><tr><td colspan=2><center>"); document.write("<table bgcolor=white border=0 cellspacing = 0 cellpading = 0 width=100%><tr bgcolor=gray align=center>"); document.write("<td><font color=silver>M</font></td><td><font color=silver>T</td><td><font color=silver>W</td><td><font color=silver>T</td><td><font color=silver>F</td><td ><font color=silver>S</td><td ><font color=silver>S</td>"); document.write("</tr><tr>"); for(j=0;j<6;j++) { for(i=0;i<7;i++) { document.write("<td align=center id=d"+i+"r"+j+"></td>") } document.write("</tr>"); } document.write("</table>"); document.write("</center></from></td></tr></table>"); var show_date = new Date(); function set_cal(show_date) { begin_day = new Date (show_date.getYear(),show_date.getMonth(),1); begin_day_date = begin_day.getDay(); end_day = new Date (show_date.getYear(),show_date.getMonth()+1,1); count_day = (end_day - begin_day)/1000/60/60/24; input_table(begin_day_date,count_day); } set_cal(show_date); function input_table(begin,count) { init(); j=0; if (begin!=0){i=begin-1;}else{i=6} for (c=1;c<count+1;c++) { colum_name = eval("d"+i+"r"+j); if ((now.getDate() == c)&&(show_date.getMonth() == now.getMonth())&&(show_date.getYear() == now.getYear())) {colum_name.style.backgroundColor = "blue";colum_name.style.color = "white";}; colum_name.innerText = c; i++; if (i==7){i=0;j++;} } } function init() { for(j=0;j<6;j++) { for(i=0;i<7;i++) { colum_name = eval("d"+i+"r"+j); colum_name.innerText = "-"; colum_name.style.backgroundColor =""; colum_name.style.color =""; } } } function change_month(sel_month) { show_date = new Date(show_date.getYear(),sel_month,1); set_cal(show_date); } function change_year(sel_year) { sel_year = sel_year.value; show_date = new Date(sel_year,show_date.getMonth(),1); set_cal(show_date); } // End --> </script> </BODY> </HTML> <br><br><hr><p align="center"><font color=black>本特效由 <a target="_blank" href="http://www.daimajiayuan.com" target="_blank">代码家园</a>丨 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p> 运行代码 复制代码 另存代码 提示：可以先修改部分代码后再运行 转载请注明：代码家园 » 适合于学习的简单的js日历代码 继续浏览有关 的文章 上一篇：JS数字版动态时钟 下一篇：世界部分地区日期时间表 相关代码 CSS实现带倒影的Js日期时钟 网页右下角的指针表，纯JavaScript实现 跟随鼠标的时钟代码 又非常不错的日期选择特效 + Css3+jQuery打造的带动画特效的数字时钟 + 世界部分地区日期时间表 + 适合于学习的简单的js日历代码 + 可换样式的JavaScript小挂钟 + 带日历、星期、农历的JS电子时钟 + 计算站点的运行时间 + JS日历生成器 + 网页背景上带阴影的电子时钟网页时间 + JS获取当前时间，显示“上午”、“下午” + Js打造的很漂亮的蓝色风格带当前时间日期的日历 + 又日历特效代码 + 温度计时间显示
CSS实现带倒影的Js日期时钟