案例要求
根据业务情况，要把核心的东西变成一个模块便于复用，慢慢沉淀后，能够更快更高效地编程。
业务核心算法:
/* 数字检测 @return 返回2，能被3和7整除 返回1，能够被3整除 返回0，不能被3整除 @author Dev Written in 2019.9 */ function checkNum(number){ if(number % 21 == 0) return 2; else if(number % 3 == 0) return 1; return 0 }
业务逻辑代码:
/* @return 返回符合条件的拼接结果，每十个一行; illegal: "unexpected number"; begin > end: "the begin is greater than the end" */ function filterNum(begin, end){ var rst = ''; var cnt = 0; //合法性判断: if(isNaN(begin) || isNaN(end)) return "unexpected number"; if(begin>end) "the begin is greater than the end"; for(var i = begin ; i <= end; i++){ if(checkNum(i) == 0) continue; rst += ("<span class='"); // 被3除 if(checkNum(i) == 1) rst += ("three "); // 被两者除 else rst += ("twt-one "); rst += ("'>"+ i +"</span>"); cnt ++; if(cnt % 10 == 0 ) rst += '<br/>'; } return rst; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="divide.css"> </head> <body> <label>请输入开始数字</label> <input type="text" name="" id="begin"> <label>请输入结束数字</label> <input type="text" name="" id="end"> <button id="smt">提交</button> <hr> <div id="result"> </div> </body> <script type="text/javascript" src="base.js"></script> <script type="text/javascript" src="divide.js"></script> </html>
/* normal style */ span{ display: inline-block; width: 100px; text-align: center; } /* Able to be divisible by three. */ .three{ color: blue; font-weight: bold; } /* Able to be divisible by 3 and 7 */ .twt-one{ color: yellow; background-color: red; }
function $(id){ return document.getElementById(id); } function print(log){ console.log(log); }
/* 数字检测 @return 返回2，能被3和7整除 返回1，能够被3整除 返回0，不能被3整除 @author Dev Written in 2019.9 */ function checkNum(number){ if(number % 21 == 0) return 2; else if(number % 3 == 0) return 1; return 0 } /* @return 返回符合条件的拼接结果，每十个一行; number wrapper: span illegal: "unexpected number"; begin > end: "the begin is greater than the end" */ function filterNum(begin, end){ var rst = ''; var cnt = 0; //合法性判断: if(isNaN(begin) || isNaN(end)) return "unexpected number"; // 转成数值 begin = Number(begin), end = Number(end); if(begin > end) return "the begin is greater than the end"; for(var i = begin ; i <= end; i++){ var num = checkNum(i); if(num == 0) continue; rst += ("<span class='"); // 被3除 if(num == 1) rst += ("three "); // 被两者除 else rst += ("twt-one "); rst += ("'>" + i + "</span>"); cnt ++; if(cnt % 10 == 0 ) rst += '<br/>'; } return rst; } /* 用户提交数据时触发 获取网页源数据，并在网页显示处理结果 */ function onSubmit(){ var begin = $('begin').value; var end = $("end").value; var rst = $('result'); rst.innerHTML = filterNum(begin,end); } // 设置点击事件函数 $('smt').onclick = onSubmit;