JavaScript HTML 实现网页版日历代码
作者:页面旅途时间:2026-10-29 23:02:13浏览:119
本文分享了一段基于 JavaScript 和 HTML 实现的网页版日历代码。通过简单的脚本逻辑,在页面中动态生成当前月份的日历表格,包含日期和星期信息。代码结构清晰,适合前端开发初学者参考学习,可直接嵌入网页使用。
JavaScript HTML 实现网页版日历代码
本文分享了一段网页版日历的实现代码,供开发者参考。
效果展示如下:

具体实现代码如下:
<html>
<head>
<link rel="stylesheet" type="text/css" href="Skin.css">
<style>
<!--
table{ text-align: center }
-->
</style>
</head>
<body>
<div align="center">
<script language="javascript">
var my = new Date();
function showc() {
var k=1;
var j=1;
var today;
var tomonth;
var theday=1;//日期
var max;
var temp;
var tempday;//这个月第一天的星期
document.write ("<b>" + my.getFullYear() + "-" + (my.getMonth()+1) + "</b>");
document.write ("<table border='1' width='273' height='158'>");
document.write ("<tr>");
document.write ("<td height='23' width='39'><font color='red'>Sun</font></td>");
document.write ("<td height='23' width='39'>Mon</td>");
document.write ("<td height='23' width='39'>Tue</td>");
document.write ("<td height='23' width='39'>Wed</td>");
document.write ("<td height='23' width='39'>Thu</td>");
document.write ("<td height='23' width='39'>Fri</td>");
document.write ("<td height='23' width='39'>Sat</td>");
document.write ("</tr>");
temp=my.getDate();
my.setDate(1);
//document.write (my.getDate());
tempday=my.getDay();//返回第一天是星期几
my.setDate(temp);
today=my.getDay();//返回现在星期几
switch ((my.getMonth()+1)) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
max=31;
break;
case 4:
case 6:
case 9:
case 11:
max=30;
break;
default:
max=29;//这里没有考虑闰月!!
//document.write (max);
}
for(k=0;k<6;k++) {
document.write ("<tr>");
for(j=0;j<=6;j++) {
document.write ("<td height='23' width='39'>");
if(j>=(tempday)) {
tempday=0;//设置为最小,相当于取消判断条件
if(theday<=max) {
document.write ("<a title=" + my.getFullYear() + "-" + (my.getMonth()+1) + "-" +theday + " target='_blank' href=detail.asp?date=" + theday + ">");
if(theday==my.getDate())
document.write ("<font color='green'>[" + theday + "]</font></a>");
else if(j==0)
document.write ("<font color='red'>" + theday + "</font></a>");
else
document.write (theday + "</a>");
theday++;
}
}
document.write ("</td>");
}
document.write ("</tr>");
}
document.write ("</table>");
}
showc();
</script>
</div>
<body>
</html>
以上就是本文的全部内容,希望能帮助大家轻松实现网页版日历功能。
作者最新文章
JS监听滚动事件:回到顶部按钮的显示与隐藏逻辑
2026-11-05 16:19:37
JavaScript怎么读写LocalStorage与SessionStorage
2026-11-05 15:40:11
anime.js 与 GSAP 对比:轻量级项目该怎么选择动画库
2026-11-05 11:24:55
flv.js 与 hls.js 在直播场景下的选型对比
2026-11-05 08:18:52
JavaScript能做什么?前端开发中的作用与应用场景解析
2026-11-04 23:17:54
