html怎么写这个日历

如题所述

推荐答案推荐于2018-03-01

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title></title>
<style>
table {
width: 230px;
margin: auto;
text-align: center;
border: 1px solid darkcyan;
border-bottom: 3px double darkcyan;
box-shadow: 0 1px 2px darkcyan;
}

th,
td {
border: 1px solid darkcyan;
}

.today {
color: red;
}
</style>
<script>
//判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)
function isLeap(year) {
return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
}
var i, k,
today = new Date(), //获取当前日期
y = today.getFullYear(), //获取日期中的年份
m = today.getMonth(), //获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
d = today.getDate(), //获取日期中的日(方便在建立日期表格时高亮显示当天)
firstday = new Date(y, m, 1), //获取当月的第一天
dayOfWeek = firstday.getDay(), //判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), //创建月份数组
str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7); //确定日期表格所需的行数
document.write("<table cellspacing='0'><tr><td colspan ='7'>" + y + "年" + (m + 1) + "月" + "</td></tr>");
document.write("<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>"); //打印表格第一行(显示星期)
for(i = 0; i < str_nums; i += 1) { //二维数组创建日期表格
document.write('<tr>');
for(k = 0; k < 7; k++) {
var idx = 7 * i + k; //为每个表格创建索引,从0开始
var date = idx - dayOfWeek + 1; //将当月的1号与星期进行匹配
(date <= 0 || date > days_per_month[m]) ? date = ' ': date = idx - dayOfWeek + 1; //索引小于等于0或者大于月份最大值就用空表格代替
date == d ? document.write('<td class="today">' + date + '</td>') : document.write('<td>' + date + '</td>'); //高亮显示当天
}
document.write('</tr>');
}
document.write('</table>');
</script>
</head>

<body>
</body>

</html>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://11.wendadaohang.com/zd/Pq2vP4qFSPMv87Pv2q4.html

其他回答

第1个回答 2016-11-24

直接用Table呗

代码如下

纯手工打造，望采纳

本回答被网友采纳

第2个回答 2016-11-24

后面的自己写吧
<table width="200" border="1" cellpadding="20">
<tr>
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>

相似回答

html怎么写这个日历答：DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>table {width: 230px;margin: auto;text-align: center;border: 1px solid darkcyan;border-bottom: 3px double darkcyan;box-shadow: 0 1px 2px darkcyan;}th,td {border: 1px solid darkcyan;}.today...

大家正在搜

html5怎么编写日历 html怎么加入日历 html制作一个日历 html制作一个全月日历 html链接代码怎么写 html居中代码怎么写 html图片代码怎么写 html空格代码怎么写 html日历js