JavaScript编写日历(简单易懂,代码可以直接运行)
运行效果图如下:
点个👍吧,代码如下:
首先是日历代码是HTML文件:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>制作年历</title><style type="text/css">body{text-align: center;}.box{margin: 0 auto;width: 880px;}.title{background: #ccc;}table{height: 200px;width: 200px;font-size: 12px;text-align: center;float: left;margin: 10px;font-size: arial;}</style><script src="calendar.js"></script></head><body><div id="app"></div><script>var year = parseInt(prompt('输入年份',''))// document.write(calendar(year))document.getElementById('app').innerHTML = calendar(year)</script></body></html>
接下来是calendar.js文件:
function calendar(y){//获取指定年份1月1日的星期数值var w = new Date(y,0).getDay();var html = '<div class = "box">'//拼接每个月份的表格for (var m = 1;m <=12;m++){html += '<table>';html += '<tr class = title><th colspan="7">' + y + '年' + m + '月</th></tr>';html += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>'//获取月份m共有多少天var max = new Date(y,m,0).getDate()//开始<tr>标签html += '<tr>';for (var d = 1;d <= max;d++){//如果该月的第一天不是星期日,则填充空白if(w && d == 1){html += '<td colspan = " '+ w +' "> </td>';}html += '<td>' + d + '</td>';//如果星期六不是该月的最后一天,则换行if (w == 6 && d != max){html += '</tr><tr>';}else if(d == max) //该月的最后一天,闭合<tr>{html += '</tr>';}w = (w + 1 > 6) ? 0 : w+1;}html += '</table>'}html += '</div>';return html;}
函数的最后不要忘了返回一个HTML给调用函数,点个👍吧