题目

FizzBuzzWhizz 需求：

when run(3) return 'Fizz'
when run(5) return 'Buzz'
when run(7) return 'Whizz'
when run(3 * 5) return 'FizzBuzz' //run 的参数为 3 和 5 共同的倍数
when run(3 * 7) return 'FizzWhizz' //run 的参数为 3 和 7 共同的倍数
when run(5 * 7) return 'BuzzWhizz' //run 的参数为 5 和 7 共同的倍数
when run(3 * 5 * 7) return 'FizzBuzzWhizz' //run 的参数为 3、5 和 7 共同的倍数


> 其余情况：
`when run(n) return n   // n 可以为 非 3、5、 7或3、5、7的倍数的数字 `
如：`run(2) return '2'`

> 作业要求：
1.通过 `document.write()` 方法，将以上需求的每一条调用结果打印出来，结果会在屏幕右边显示
2.为每一条需求写一个测试

## 分析 & 解决：

> 题目中没有给出前三列参数的描述，那我默认前三列的参数分别表示：仅为 3 的倍数，仅为 5 的倍数，仅为 7 的倍数。

那么根据题目要求，一共有八种情况。最简单的想法，写七个 `if ... eles ...` ，肯定能解决问题。
虽然这样就能解决问题，但是我们不妨再深入的分析一下题目，题目的需求是返回一个字符串，那么 run 函数就可以设计成 `run( num ) : string` 这样，只要根据传入的数字返回对应的字符串，那么此题就算完成需求。那么根据题目前七个需求，我们不妨把题目稍微修改一下说法：

1.  给你一个空字符串，只要能被三整除，那么字符串就加上 'Fizz' 
2. 只要能被五整除，那么字符串再加上 'Buzz' 
3. 只要能被七整除，那么字符串再加上 'Whizz'
4. 如果不满足上述任何一个需求，那么字符串就变为的数字

这样的话，就只需要写三个 `if` 语句，然后调整字符串的值，最后再判断一次字符串是否为空。若为空，那么就直接返回参数。

## 总结：

> 这样的话，题目的需求也算是完成了，我们不妨最后来对比一下这两种方法：

1. 第一种方法简单，不需要额外的字符串，直接返回相关字符串，但需要七次判断。
2. 第二种方法，四次判断，但是需要额外的字符串来存储结果。

其实，就本题而言，我们也许更偏向用第二种方法，原因不过是打的代码少。而不是觉得第二种方法计算量较少。`φ(゜▽゜*)♪`

完整代码：

```javascript

function run(num) {
    num = Number(num);
    var ret = '';

    if (num % 3 == 0) {
        ret += 'Fizz';
    }
    if (num % 5 == 0) {
        ret += 'Buzz';
    }
    if (num % 7 == 0) {
        ret += 'Whizz';
    }
    if (ret == '') {
        ret = num.toString();
    }
    
    return ret;
}

var test1 = function () {
    for (var i = -100; i < 100; i++) {
        run(i);
        document.write('when run(' + i + ') return ' + run(i) + '<br>');
    }
    document.write('test end<br>');
}

test1();

显示问题

结果一行一行的显示出来，实在是有点不好看，那为什么不整理一下显示的结果呢~。所以有了如下的代码：

HTML :

<!DOCTYPE html>
<html>

<head>
    <title>Run number</title>
</head>

<body>
   <input type="button" value="start" onclick="test1();"/>
    <h2>Other</h2>
    <p id="other"></p>
    <h2>Fizz</h2>
    <p id="mod3"></p>
    <h2>Buzz</h2>
    <p id="mod5"></p>
    <h2>Whizz</h2>
    <p id="mod7"></p>
    <h2>FizzBuzz</h2>
    <p id="mod35"></p>
    <h2>FizzWhizz</h2>
    <p id="mod37"></p>
    <h2>BuzzWhizz</h2>
    <p id="mod57"></p>
    <h2>FizzBuzzWhizz</h2>
    <p id="mod357"></p>
</body>

<script src="script.js"></script>

</html>

Javascript :

function visaul(str, num) {
    var td;
    var flag = 0;

    if (str == 'Fizz') {
        td = document.getElementById('mod3');
        flag = 1;
    }
    if (str == 'Buzz') {
        td = document.getElementById('mod5');
        flag = 1;
    }
    if (str == 'Whizz') {
        td = document.getElementById('mod7');
        flag = 1;
    }
    if (str == 'FizzBuzz') {
        td = document.getElementById('mod35');
        flag = 1;
    }
    if (str == 'FizzWhizz') {
        td = document.getElementById('mod37');
        flag = 1;
    }
    if (str == 'BuzzWhizz') {
        td = document.getElementById('mod57');
        flag = 1;
    }
    if (str == 'FizzBuzzWhizz') {
        td = document.getElementById('mod357');
        flag = 1;
    }

    if (flag == 0) {
        td = document.getElementById('other');
    }

    var newNode = document.createTextNode(num.toString() + "  ");
    newNode.innerHTML = num.toString();
    td.appendChild(newNode);
}

function run(num) {
    num = Number(num);

    var ret = '';

    if (num % 3 == 0) {
        ret += 'Fizz';
    }
    if (num % 5 == 0) {
        ret += 'Buzz';
    }
    if (num % 7 == 0) {
        ret += 'Whizz';
    }
    if (ret == '') {
        ret = num.toString();
    }
    
    visaul(ret, num);
    return ret;
}

var test1 = function () {
    for (var i = 1; i < 1000; i++) {
        run(i);
        //document.write('when run(' + i + ') return ' + run(i) + '<br>');
    }
    //document.write('test end<br>');
}

显示图：

结果图

纯减少代码量


function run(num) {
    num = Number(num);

    var ret = '';

    ret += num % 3 == 0 ? 'Fizz' : '';
    ret += num % 5 == 0 ? 'Buzz' : '';
    ret += num % 7 == 0 ? 'Whizz' : '';
    ret = ret == '' ? num.toString() : ret;

    return ret;
}