Django——html/css/js编写计算器案例

花了一天的时间才完成的，得记录一下，直接上代码，新手写的，可能还有BUG，互相借鉴学习：

* {
    margin-left: 0px;
    padding-left: 0px;
}

div {
    width: 180px;
}

#per {
    margin-left: 10%;
    margin-top: 10%;
}

input[name="display"] {
    text-align: right;
    background-color: #fff;
    padding-right: 5px;
}

input[name="push"] {
    width: 39px;
    height: 25px;
    margin-top: 5px;

}

input[name="push"]:hover {
    background-color: #FFD700;
    border: solid;
    border: 1px solid;
}

function initCalulator() {
    var display = document.getElementsByName("display");
    var i;
    for (i = 0; i < display.length; i++) {
        display[i].value = 0;
        display[i].disabled = "disabled";
    }
    var button = document.getElementsByName("push");
    for (i = 0; i < button.length; i++) {
        //这个函数不是在for循环里执行的，而是onclick事件进行执行，所以用i这个变量，必然是button.length
        button[i].onclick = function () {
            var keyword = this.value;
            var initNum = document.getElementById("temporary").value;
            if (!isNaN(keyword)) {
                //如果按数字的时候，正好是已经计算出结果的时候，则重新开始计算
                if (display[0].value.charAt(display[0].value.length - 1) == "=") {
                    display[0].value = 0;
                    display[1].value = keyword;
                } else if (display[1].value.indexOf(".") != -1) {
                    //当包含小数点的时候，后续添加的可能是0，如果转成数字类型的话，0会去掉。such：0.00
                    display[1].value = initNum + keyword;
                } else {
                    display[1].value = parseFloat(initNum + keyword);
                }
            } else {
                switch (keyword) {
                    case "C":
                        display[0].value = 0;
                        display[1].value = 0;
                        break;
                    case "←":
                        //只有非0才能回退且没有计算出结果时
                        if (display[1].value * 1 != 0 && display[0].value.charAt(display[0].value.length - 1) != "=") {
                            if (display[1].value.length == 1) {
                                display[1].value = 0;
                            } else if (display[1].value * 1 < 0 && display[1].value.length == 2) {
                                display[1].value = 0;
                            } else {
                                display[1].value = display[1].value.substr(0, display[1].value.length - 1);
                            }
                        }
                        break;
                    case "+/-":
                        if (display[1].value * 1 != 0) {
                            display[1].value = -display[1].value;
                        } else {
                            display[1].value = 0;
                        }
                        break;
                    case ".":
                        if (display[0].value.charAt(display[0].value.length - 1) != "=" && display[1].value.indexOf(".") == -1) {
                            //小数点只能有一个，并且是未计算出结果
                            display[1].value = display[1].value + ".";
                        } else if (display[0].value.charAt(display[0].value.length - 1) == "=") {
                            //    计算出结果，直接重新开始计算
                            display[0].value = 0;
                            display[1].value = "0.";
                        }
                        break;
                    case "+":
                        operation("+");
                        break;
                    case "-":
                        operation("-");
                        break;
                    case "*":
                        operation("*");
                        break;
                    case "/":
                        operation("/");
                        break;
                    case "=":
                        if ((isNaN(display[0].value.charAt(display[0].value.length - 1)) && display[0].value.charAt(display[0].value.length - 1) != "=" && display[1].value * 1 != 0)
                            || (isNaN(display[0].value.charAt(display[0].value.length - 1)) && display[0].value.charAt(display[0].value.length - 1) != "/" && display[1].value * 1 == 0)) {
                            //    最后一位为四则运算符且最后一个运算数不为0，或者最后一位是非除号
                            var expression = display[0].value + display[1].value;
                            display[0].value = display[0].value + display[1].value + "=";
                            display[1].value = eval(expression);
                        } else if (display[0].value.charAt(display[0].value.length - 1) == "/" && display[1].value * 1 == 0) {
                            alert("常识：除数不能为零！！！");
                        }
                        break;
                }
            }
        }
    }
    //通过按钮点击事件实现跳转
    document.getElementById("csdn").onclick = function () {
        window.location.href = "https://blog.csdn.net/qq_41470573/article/details/92802272";
    }
}

function operation(sign) {
    //这些都是外围元素，直接在子函数中改变即可，区别于其他语言，不需要通过传参的方式
    var display = document.getElementsByName("display");
    //最后一位为数字，直接拼接加号
    if (!isNaN(display[0].value.charAt(display[0].value.length - 1))) {
        display[0].value = display[1].value * 1 + sign;
        display[1].value = 0;
    } else if (display[0].value.charAt(display[0].value.length - 1) == "=") {
        //    计算出结果后，按+-*/
        display[0].value = display[1].value + sign;
        display[1].value = 0;
    } else if (display[1].value * 1 == 0) {
        //无键入数字，直接按四则运算，更改四则运算
        display[0].value = display[0].value.substr(0, display[0].value.length - 1) + sign;
        display[1].value = 0;
    } else {
        //正常拼接，输入框中的必然是数字，记得需要转换
        display[0].value = display[0].value + display[1].value * 1 + sign;
        display[1].value = 0;
    }
}

---

作为一名测试人员，通过这次案例的编写，深刻的感觉到代码学习的重要性。大概梳理一下这个场景如果是测试，需要如何设计测试用例。

1.加减乘除结果的准确性验证，即有效用例，这个不可或缺，但其实从代码的角度来看，这个只需要一个用例就可以。因为这个是代码的基本语法，不可能出错的。

2.对于同一类型的场景，没有必要反复验证，例如这个案例中的加减乘除，其实只需要重点考虑一个，其他的也只是一个有效用例过了就可以了。

3.特殊场景要尽可能多的进行考虑，代码就是在考虑异常场景的处理。

 

 

 

 

 

 

print_r('点个赞吧')；
var_dump('点个赞吧')；
NSLog(@"点个赞吧！")
System.out.println("点个赞吧!");
console.log("点个赞吧!");
print("点个赞吧!");
printf("点个赞吧!\n");
cout << "点个赞吧!" << endl;
Console.WriteLine("点个赞吧!");
fmt.Println("点个赞吧!")
Response.Write("点个赞吧")；
alert（’点个赞吧’）