项目说明

  1. ************************************************************
  2. *名称：仿windows计算器
  3. *功能：
  4. * 1、实现单击按钮录入数字
  5. * 2、实现基础四则运算功能，并添加必要的异常处理，例如，除数为零
  6. * 3、实现小数点功能并添加异常处理：小数点只能出现一次
  7. * 4、实现正负号功能
  8. * 5、实现退位功能，已经是最后一位时，显示框显示为零
  9. * 6、清屏功能
  10. ************************************************************
  11. *使用的知识点:
  12. * 1、利用大量的自定义函数实现业务逻辑
  13. * 2、灵活运用事件及事件处理
  14. * 3、培养异常处理的编程方法
  15. * 4、培养并实践利用不同思路实现编程
  16. *综合练习的目的：
  17. * 1、将css、html和js有效的进行技术组合，实现业务功能
  18. * 2、锻炼和培养编程思想，解决问题的能力和方法
  19. * 3、锻炼和培养利用多种编程思路，完成预先设定的目标
  20. ************************************************************
  21. *简易计算器V2.0版本 2020年6月4日
  22. *bug修复：
  23. *1、JavaScript小数加减运算产生的bug 例如0.1+0.2 0.5-0.6（已修复）
  24. *2、乘法除法连续按等号可能导致的bug 例如1.4*2=== （已修复）
  25. *体验优化：
  26. *1、小数点启用后 修改该按钮的背景颜色 （已优化）
  27. *2、负号启用后 修改该按钮的背景颜色 （已优化）
  28. *3、点击加减乘除后的停滞效果 （已优化）
  29. *4、计算框内不应出现‘-01’的画面 （已优化）
  30. *5、计算器最多只能输入10个数字 （已优化）
  31. *6、计算器只能进行10位有效数字以内的计算 （已优化）
  32. *7、除法保留小数位数 防止显示溢出 （已优化）
  33. ************************************************************

实现效果图

image.png

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目：简易计算器案例</title>
    <link rel="stylesheet" href="calculator.css">
    <script type="text/javascript" src="calculator.js"></script>
</head>
<body onload="init()">
    <div class="container">
        <div>
            <h2>简易计算器V2.0</h2>
        </div>
        <div>
            <input type="text" id="num">
        </div>
        <div>
            <input type="button" value="C">
            <input type="button" value="B">
            <input type="button" value="+/-" id="minus">
            <input type="button" value="/" id="division">
            <input type="button" value="1">
            <input type="button" value="2">
            <input type="button" value="3">
            <input type="button" value="*" id="multiply">
            <input type="button" value="4">
            <input type="button" value="5">
            <input type="button" value="6">
            <input type="button" value="-" id="subtract">
            <input type="button" value="7">
            <input type="button" value="8">
            <input type="button" value="9">
            <input type="button" value="+" id="plus">
            <input type="button" value="0" id="zero">
            <input type="button" value="." id="dot">
            <input type="button" value="=">
        </div>
    </div>
</body>
</html>

CSS部分

*{
    margin: 0;
    padding: 0;
}

.container{
    width: 220px;
}

h2{
    text-align: center;
}

input[type='text']{
    width: 200px;
    height: 40px;
    font-size: 30px;
    margin: 5px 0px 5px 5px;
    text-align: right;
    background-color: white;
    border: 1px solid;
    padding-right: 2px;
}

input[type='button']{
    width: 40px;
    height: 40px;
    margin: 5px;
}
input[type='button']:hover{
    background-color: #ccc;
}

#zero{
    width: 95px;
}

JavaScript部分

// 简易计算器V2.0版本 2020年6月4日
// bug修复：
// 1、JavaScript小数加减运算产生的bug 例如0.1+0.2 0.5-0.6（已修复）
// 2、乘法除法连续按等号可能导致的bug 例如1.4*2=== （已修复）

// 体验优化：
// 1、小数点启用后 修改该按钮的背景颜色 （已优化）
// 2、负号启用后 修改该按钮的背景颜色 （已优化）
// 3、点击加减乘除后的停滞效果 （已优化）
// 4、计算框内不应出现‘-01’的画面 （已优化）
// 5、计算器最多只能输入10个数字 （已优化）
// 6、计算器只能进行10位有效数字以内的计算 （已优化）
// 7、除法保留小数位数 防止显示溢出 （已优化）

function init(){
    // 初始化 设置初值以及编辑状态
    var num = document.getElementById('num');
    num.value = 0;
    num.disabled = 'disabled';

    // 获取按钮信息并设置操作
    var oButton = document.getElementsByTagName('input');
    var save,operator;
    for (var i=0;i<oButton.length;i++){
        oButton[i].onclick = function(){
            if (isNumber(this.value)) {
                if (isNull(num.value)) {
                    num.value = this.value;
                } else {
                    if (changdu(num.value)>=10) {
                        alert('至多输入10位有效数字');
                    } else {
                        if (num.value=='-0') {
                            num.value = this.value * (-1);
                        } else {
                            num.value = num.value + this.value;
                        }    
                    }
                }
            } else {
                var btn = this.value;
                switch(btn) {
                    case '+':
                        save = Number(num.value);
                        num.value = 0;
                        operator = '+';
                        cleanbgc();
                        document.getElementById('plus').style.backgroundColor = '#ccc';
                        break;
                    case '-':
                        save = Number(num.value);
                        num.value = 0;
                        operator = '-';
                        cleanbgc();
                        document.getElementById('subtract').style.backgroundColor = '#ccc';
                        break;
                    case '*':
                        save = Number(num.value);
                        num.value = 0;
                        operator = '*';
                        cleanbgc();
                        document.getElementById('multiply').style.backgroundColor = '#ccc';
                        break;
                    case '/':
                        save = Number(num.value);
                        num.value = 0;
                        operator = '/';
                        cleanbgc();
                        document.getElementById('division').style.backgroundColor = '#ccc';
                        break;
                    case '.':
                        num.value = dotCheck(num.value);
                        break;
                    case 'B':
                        num.value = back(num.value);
                        break;
                    case 'C':
                        num.value = 0;
                        operator = '';
                        break;
                    case '+/-':
                        num.value = sign(num.value);
                        break;
                    case '=':
                        cleanbgc();
                        switch(operator) {
                            case '+':
                                num.value = (save*10 + Number(num.value)*10)/10;
                                // console.log(num.value);
                                if (changdu(num.value)>10) {
                                    alert('计算器只能进行10位有效数字以内的计算');
                                    num.value = save;
                                }
                                operator = '';
                                break;
                            case '-':
                                num.value = (save*10 - Number(num.value)*10)/10;
                                // console.log(num.value);
                                if (changdu(num.value)>10) {
                                    alert('计算器只能进行10位有效数字以内的计算');
                                    num.value = save;
                                }
                                operator = '';
                                break;
                            case '*':
                                num.value = save * Number(num.value);
                                if (changdu(num.value)>10) {
                                    alert('计算器只能进行10位有效数字以内的计算');
                                    num.value = save;
                                }
                                operator = '';
                                break;
                            case '/':
                                if (Number(num.value)==0) {
                                    alert('除数不能为0');
                                    num.value = 0;
                                } else {
                                    num.value = save / Number(num.value);
                                    if (changdu(num.value)>10) {
                                    // alert('计算器只能保留到小数点后9位数字');
                                    num.value = num.value.substr(0,11);
                                    }
                                }
                                operator = '';
                                break;
                        }
                        break;
                }
            }
            // 判断小数点是否存在
            if (num.value.indexOf('.')==-1) {
                document.getElementById('dot').style.backgroundColor = '';
            } else {
                document.getElementById('dot').style.backgroundColor = '#ccc';
            }
            // 判断负号是否存在
            if (num.value.indexOf('-')==-1) {
                document.getElementById('minus').style.backgroundColor = '';
            } else {
                document.getElementById('minus').style.backgroundColor = '#ccc';
            }
        }
    }
}

// 自定函数：判断是否为数字
function isNumber(n){
    return !isNaN(n);
}

// 自定函数：验证文本框是否为空或者0
function isNull(n){
    if (n=='0'||n.length==0) {
        return true;
    } else {
        return false;
    }
}

// 自定函数：判断小数点
function dotCheck(n){
    if (n.indexOf('.')==-1) {
        n = n + '.';
        document.getElementById('dot').style.backgroundColor = '#ccc';
    }
    return n;
}

// 自定函数：回退键
function back(n){
    n = n.substr(0,n.length-1);
    if (isNull(n)) {
        n = 0;
    }
    return n;
}

// 自定函数：实现正负号切换
function sign(n){
    if (n.indexOf('-')==-1) {
        n = '-' + n;
    } else {
        n = n.substr(1,n.length);
    }
    return n;
}

// 自定函数：返回字符串长度
function changdu(n){
    return n.length;
}

// 自定函数：把加减乘除的背景颜色置空
function cleanbgc(){
    document.getElementById('plus').style.backgroundColor = '';
    document.getElementById('subtract').style.backgroundColor = '';
    document.getElementById('multiply').style.backgroundColor = '';
    document.getElementById('division').style.backgroundColor = '';
}