JavaScript网页特效-“渔夫打鱼晒网”程序设计

程序设计时，把可能需要反复执行的代码封装为函数，然后在需要执行该段代码功能的地方进行调用，这样不仅可以实现代码的复用，更重要的是可以保证代码的一致性，只需要修改该函数代码，则所有调用位置均得到体现。同时，把大任务拆分成多个函数也是“分治法”和“模块化程序设计”的基本思路，这样有利于复杂问题简单化。本节使用自定义函数，实现“渔夫打鱼晒网”程序设计。

1案例呈现

若某渔夫从当年1月1日起开始“三天打渔两天晒网”，编程实现输入当年的某一天，输出该渔夫是在“打渔”还是在“晒网”。案例输入输出效果，如图4-10所示。

图4-10案例输入输出效果

2案例分析

案例中从当年1月1日起开始“三天打渔两天晒网”，则当年1月1号、2号和3号在打渔，1月4号和5号在晒网，依此类推。首先计算出，用户输入日期是这一年中的第几天，由于“打渔”和“晒网”的周期为5天，将计算出的天数对5取余数，若余数为1，2，3，则他是在“打渔”，否则是在“晒网”。根据分析，算法设计分为三步。

（1）计算输入日期是当年的第几天，若当年是闰年且输入月份大于2份，则需要多加一天。

（2）将计算出的天数对5取余数。

（3）根据余数判断渔夫是在“打渔”还是在“晒网”；若余数为1，2，3，则渔夫是在“打渔”，否则是在“晒网”。

为简化代码，程序中自定义两个函数，实现判断闰年和计算输入日期是当年的第几天的功能，然后在程序中调用。

3案例实现

  1  <!DOCTYPE html>2  <html lang="en">3  <head>4  </head>5  <body>6   </script>7         function isLeap(year) { // 判断是否闰年8             if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {9                 return true;10             }11             return false;12         }13         function getDays(year, month, day) {// 计算计算输入日期是当年的第几天14             var arr = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];//月份15             for (var i = 0; i < month - 1; i++) {// for循环让前面月份天数相加。16                 day += arr[i];17             }18             if (isLeap(year) && month > 2) {// 调用函数19                 day++;20             }21             return day;22         }23         var year = prompt("请输入年");24         var month = prompt("请输入月");25         var day = prompt("请输入日");26         var n = getDays(year, month, day); // 调用函数27         if ((n % 5) < 4 && (n % 5) > 0) // 余数是1或2或3时说明在打渔，否则在晒网28             alert(year + "年" + month + "月" + day + "日渔夫在打渔");29         else30             alert(year + "年" + month + "月" + day + "日渔夫在晒网");31     </script>32   </body>33  </html>

案例代码中，第7行代码定义函数isLeap(year)，它判断参数年份是否是闰年；第13行代码定义函数getDays(year, month, day)，它调用isLeap(year)计算输入日期是当年的第几天；第26行代码调用getDays(year, month, day)函数获得输入日期是当年的第几天；第27-30行代码将获得的天数对5取余数，根据余数判断渔夫是在“打渔”还是在“晒网”，并弹窗显示相应结果信息。

视频讲解：JavaScript网页特效-“渔夫打鱼晒网”程序设计_哔哩哔哩_bilibili

源码：清华大学出版社-图书详情-《JavaScript前端开发与实例教程（微课视频版）》