700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > JavaScript编写日历(简单易懂 代码可以直接运行)

JavaScript编写日历(简单易懂 代码可以直接运行)

时间:2018-08-25 08:51:32

相关推荐

JavaScript编写日历(简单易懂 代码可以直接运行)

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给调用函数,点个👍吧

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。