JavaScript 日历

最新推荐文章于 2025-08-25 14:24:58 发布

原创最新推荐文章于 2025-08-25 14:24:58 发布 · 380 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #button #date #class #table #stylesheet

javascript 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的自定义日历应用，该应用能够显示当前时间和日期，并允许用户通过按钮切换查看不同年份和月份的日历。此外，还包括了设置特定日期样式、空白填充等细节。

h1 { font-size:30; color:black; font-weight:bolder; } div { text-align:center; /* h1 && text =>center*/ } /* text */ #text { width:150; text-align:center;/* the word in text => center*/ } /*the whole table*/ table { border-collapse:collapse; } td { text-align:right; border:solid 1px black; } /*set today red*/ td.today { color:red; } td.sunsat { color:green; } th { border:solid 1px black; } /*first part in table*/ th.firstpart { font-size:25; } /*second part in table*/ th.secondpart { font-size:20; color:blue; width:50; } /*button style*/ .button { width:25; height:25; text-align:center; vertical-align: center;/*????*/ } .buttonToday { width:50; height:25; text-align:center; padding-top:0px; } /* span.buttonleft { float:left; } span.buttonright { padding-left:60; } span.bigwords { padding-left:50; } */ <html> <head> <title>calendaragain</title> <link rel=stylesheet href="calendaragain.css" mce_href="calendaragain.css"> <mce:script type = "text/javascript"></mce:script> </head> <body onload = "allpage();">  <div> <h1>Calendar</h1> </div>  <div> <input type = "text" id = "text"> </div><br> <div> <input type = "button" class = "buttonToday" value = "Today" onclick = timeintable('today');> <select id = "yearlist" onchange = timeintable("selectyear");> <mce:script type = "text/javascript"></mce:script> </select> <select id = "monthlist" onchange = timeintable("selectmonth");> <mce:script type = "text/javascript"></mce:script> </select> </div>  <div id = "showtable"> </div> </body> </html>