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('输入年份','2017'))
// 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给调用函数,点个👍吧
更多推荐
JavaScript编写日历(简单易懂,代码可以直接运行)
发布评论