~本特利~

案例-制作年历

代码实现思路:

①利用prompt()函数接收用户设置的年份。
②编写calendar()函数，根据指定的年份生成年历。
③设计并输出日历的显示样式。

④获取指定年份1月1日的星期值，获取每个月共有多少天。
⑤循环遍历每个月中的日期。
⑥将日期显示到对应的星期下面。

具体步骤

( 1）弹出-个输入框，提示用户输入年份。

    <script>var year = parseInt(prompt('输入年份：', '2017'));document.write(calendar(year));//调用函数生成指定年份的年历</script>

(2）编写calendar()函数，根据指定的年份生成年历。

function calendar(y) {var html = '';return html;
}

上述代码中，参数y表示指定的年份，如2006、2018;变量 html用于保存字符串拼接的年历HTML生成结果。具体拼接方法将在后面的步骤中实现。

(3）在第（2）步第2行代码的下面编写如下代码，拼接全年12个月份的表格。

 // 拼接每个月份的表格for (m = 1; m <= 12; ++m) {html += '<table>';html += '<tr><th colspan="7">' + y + ' 年 ' + m + ' 月</th></tr>';html += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>';html += '</table>';

(4）为了将日期输出到对应的星期位置，在第（2)步第2行代码的上面编写如下代码，实现获取指定年份1月1日的星期值，保存到变量w中。

   // 获取指定年份1月1日的星期数值var w = new Date(y, 0).getDay();

(5）在第（3）步第5行代码的下面编写如下代码，获取每个月共有多少天。

   // 获取月份m共有多少天var max = new Date(y, m, 0).getDate();//从该月份的第1天遍历到最后1天for (var d = 1; d<- max; ++d){//控制星期值在0一6范围内变动w=(w+1>6)? 0 :w+ l;}

按照上述步骤修改后，目前代码中共有两个 for循环，外层循环用于遍历月份，内层循环用于遍历每一天。在循环体中可以通过变量w获取当前的星期值。

( 6)将每一天的数字拼接到表格中。在拼接前，需要考虑给定月份的第1天是否为星期日，如果不是，则需要填充空白单元格。并且，在拼接到周六时，需要考虑是否为月底，如果不是月底则需要换到下一行。接下来将第(5)步第3~7行代码修改成如下代码，实现每月日期的拼接。

 html += '<tr>';                         // 开始<tr>标签for (d = 1; d <= max; ++d) {if (w && d == 1) {                  // 如果该月的第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;}

上述第3 ~ 5行代码利用合并单元格的方式填充空白,将当期的星期数作为需要合并的列数;第6行代码用于拼接当期日期;第7 ~ 11行代码用于判断是否需要换行或完成每月最后一个星期的完整拼接。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>制作年历</title><style>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-family:arial;}</style><script src="calendar.js"></script><script>var year = parseInt(prompt('输入年份：', '2017'));document.write(calendar(year));</script></head><body></body>
</html>

// 定义年历生成函数
function calendar(y) {// 获取指定年份1月1日的星期数值var w = new Date(y, 0).getDay();var html = '<div class="box">';// 拼接每个月份的表格for (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();html += '<tr>';                         // 开始<tr>标签for (d = 1; d <= max; ++d) {if (w && d == 1) {                  // 如果该月的第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;
}

JavaScript内置对象案例-制作年历相关推荐

javaScript基础学习 - 14 - JavaScript内置对象 -案例代码
javaScript基础学习 - 14 - JavaScript内置对象 -案例代码 1. Math对象最大值 2. 封装自己的数学对象 3. Math绝对值和三个取整方法 4. Math对象随机数方 ...
JavaScript内置对象（内置对象、查文档（MDN）、Math对象、日期对象、数组对象、字符串对象）
目录 JavaScript内置对象内置对象查文档 MDN Math对象 Math概述案例一:封装自己的对象随机数方法 random() 案例一:猜数字游戏日期对象 Date 概述 Date( ...
JavaScript内置对象之 Math数学对象
JavaScript中的对象分为自定义对象.内置对象.浏览器对象 JavaScript内置对象内置对象:就是指js语言自带的一些对象,这些对象供开发者使用,并提供了一些常用 ...
JavaScript 内置对象（一）：Array 对象（构造函数、属性和方法）
Date 对象就是日期对象,它可以表示从年用毫秒的所有时间和日期.该对象是 JavaScript 内置对象中使用频率最高的一个对象. 1.Date 对象的构造函数 Date 对象的构造函数有以下4种: ...
JavaScript 内置对象（二）：Date 对象（构造函数、属性和方法）
Date 对象就是日期对象,它可以表示从年用毫秒的所有时间和日期.该对象是 JavaScript 内置对象中使用频率最高的一个对象. 1.Date 对象的构造函数 Date 对象的构造函数有以下4种: ...
对JavaScript内置对象arguments的一些见解
深入理解JavaScript内置对象arguments 这两天有伙伴问到我关于arguments的问题,使我产生了一种arguments对象容易被学习者忽略的想法,想分享一下自己对于JavaScrip ...
04-前端技术_ javaScript内置对象与DOM操作
目录五,javaScript内置对象与DOM操作 1,JavaScript对象定义和使用 2,JavaScript内置对象 2.1 Array数组 2.1.1 创建方式 2.1.2 常用属性: 2. ...
JavaScript进阶 - 第7章 JavaScript内置对象
第7章 JavaScript内置对象 7-1 什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的, ...
JavaScript内置对象-Math对象
JavaScript内置对象-Math对象 1.内置对象 2.查文档 2.1.MDN 2.2.如何学习对象中的方法 3.Math内置对象 3.1.求最大值 3.2.封装自己的数学对象 3.3.Math ...

JavaScript内置对象案例-制作年历

案例-制作年历

代码实现思路:

具体步骤

JavaScript内置对象案例-制作年历相关推荐

最新文章

热门文章