案例要求

 

根据业务情况，要把核心的东西变成一个模块便于复用，慢慢沉淀后，能够更快更高效地编程。

业务核心算法:

/*
    数字检测
    @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>
divide.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;
}
divide.css

 

function $(id){
    return document.getElementById(id);
}
function print(log){
    console.log(log);
}
base.js

 

/*
    数字检测
    @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;
divide.js