當前位置:編程學習大全網 - 源碼下載 - html怎麽寫這個日歷

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?{

color:?red;

}

</style>

<script>

//判斷當前年份是否是閏年(閏年2月份有29天,平年2月份只有28天)

function?isLeap(year)?{

return?year?%?4?==?0(year?%?100?!=?01?:?(year?%?400?==?01?:?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?==?ddocument.write('<td?class="today">'?+?date?+?'</td>')?:?document.write('<td>'?+?date?+?'</td>');?//高亮顯示當天

}

document.write('</tr>');

}

document.write('</table>');

</script>

</head>

<body>

</body>

</html>

  • 上一篇:楊冪線下活動因安全因素取消,她最近有哪些作品待播?
  • 下一篇:密碼學C語言實現AES核心步驟
  • copyright 2024編程學習大全網