javascript日历实现

最新推荐文章于 2026-01-04 11:45:10 发布

原创最新推荐文章于 2026-01-04 11:45:10 发布 · 575 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #calendar #class #div #date #function

本文介绍了一个基于HTML和JavaScript实现的日历插件，该插件能够动态展示指定年月的日历，并允许用户通过按钮来切换不同的月份和年份。

<!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> </head> <mce:script type="text/javascript"></mce:script> <mce:style></mce:style><style mce_bogus="1">body { font:Arial, Helvetica, sans-serif 12px; color:#000; margin:0 auto; padding:0px; } ul { padding:0px; margin:0px; list-style-type:none; } li { padding:0px; margin:0px; list-style-type:none; } #calendar { width:274px; height:240px; margin:0 auto; padding:0px; margin-top:20px; background:#ccc; } #calendar ul { width:274px; height:210px; } #calendar ul li { width:274px; height:30px; } #calendar ul li input { border:0px; background:none; height:25px; } #calendar ul li div { height:28px; width:37px; border:1px #888 solid; line-height:28px; text-align:center; float:left; background:#f8f8f8; color:#ddd; } #calendar ul li .title { background:#ccc; height:28px; width:37px; border:1px #888 solid; line-height:28px; text-align:center; float:left; color:#000; } #calendar ul li .left { background:#ccc; height:28px; width:35px; border:1px #888 solid; line-height:28px; text-align:center; float:left; color:#000; } #calendar ul li .l_butt { background:#f8f8f8; height:28px; width:30px; border:1px #888 solid; line-height:28px; text-align:center; float:left; color:#000; } #calendar ul li .show_year { background:#f8f8f8; height:28px; width:134px; border:1px #888 solid; line-height:28px; text-align:center; float:left; color:blue; font-size:11px; font-weight:bold; } .no_no { height:28px; width:30px; border:1px #888 solid; line-height:28px; text-align:center; float:left; background:#f8f8f8; color:#ddd; } .show_font { font-size:13px; color:red; font-weight:bold; }</style> <body onload="calendar( '','','' )"> <div id="calendar"> <ul> <li> <div class="left"><input type="button" value="<<" onclick="lastYear('month','year')"><input type="hidden" id="year" /></div> <div class="l_butt"><input type="button" value="<" onclick="lastMonth('month','year')"><input type="hidden" id="month" /></div> <div id="show_y" class="show_year"></div> <div class="l_butt"><input type="button" value=">" onclick="nextMonth('month','year')"></div> <div class="left"><input type="button" value=">>" onclick="nextYear('month','year')"></div> </li> <li> <div class="title">日</div><div class="title">一</div><div class="title">二</div><div class="title">三</div><div class="title">四</div><div class="title">五</div><div class="title">六</div> </li> <li> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div> </li> <li> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div> </li> <li> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div> </li> <li> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div> </li> <li> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div> </li> <li> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div> </li> </ul> </div> </body> </html>