简单计算器

zsq-rookie

于 2021-11-04 15:52:24 发布

阅读量91

点赞数

分类专栏： js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_59104495/article/details/121144192

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<body>
    <div class="calculator J_calculator">
        <p>结果:<span class="result">0</span></p>
        <div class="input-group">
            <input type="text" value="0" />
            <input type="text" value="0" />
        </div>
        <div class="btn-group">
            <button data-method="plus">+</button>
            <button data-method="minus">-</button>
            <button data-method="mul">*</button>
            <button data-method="div">/</button>
        </div>
    </div>
    <script src="js/index.js"></script>
</body>

在js目录下编写index.js代码

第一种写法：

var oCalculator = document.getElementsByClassName('J_calculator')[0],
    oResult = oCalculator.getElementsByClassName('result')[0],
    fInput = oCalculator.getElementsByTagName('input')[0],
    sInput = oCalculator.getElementsByTagName('input')[1],
    oBtnGroup = oCalculator.getElementsByClassName('btn-group')[0];

oBtnGroup.addEventListener('click',onBtnClick,false);

function onBtnClick (ev){
    var e = ev || window.Event,
        tar = e.target || e.srcElement,
        tagName = tar.tagName.toLowerCase();

    if (tagName ==='button'){
        var method = tar.getAttribute('data-method');
            fVal = Number(fInput.value.replace(/\s+/g,'')) || 0,
            sVal = Number(sInput.value.replace(/\s+/g,'')) || 0;

        switch (method){
            case 'plus':
                oResult.innerText = fVal + sVal;
                break;
            case 'minus':
                oResult.innerText = fVal - sVal;
                break;
            case 'mul':
                oResult.innerText = fVal * sVal;
                break;
            case 'div':
                oResult.innerText = fVal /sVal;
                break;
            default:
                break;
        }
    }
}

第二种写法

; (function () {
    var oCalculator = document.getElementsByClassName('J_calculator')[0],
        oResult = oCalculator.getElementsByClassName('result')[0],
        fInput = oCalculator.getElementsByTagName('input')[0],
        sInput = oCalculator.getElementsByTagName('input')[1],
        oBtnGroup = oCalculator.getElementsByClassName('btn-group')[0];

    var init = function () {
        bindEvent();
    }

    function bindEvent() {
        oBtnGroup.addEventListener('click', onBtnClick, false);
    }


    function onBtnClick(ev) {
        var e = ev || window.Event,
            tar = e.target || e.srcElement,
            tagName = tar.tagName.toLowerCase();

        if (tagName === 'button') {
            var method = tar.getAttribute('data-method');
                fVal = Number(fInput.value.replace(/\s+/g, '')) || 0,
                sVal = Number(sInput.value.replace(/\s+/g, '')) || 0;

            switch (method) {
                case 'plus':
                    oResult.innerText = fVal + sVal;
                    break;
                case 'minus':
                    oResult.innerText = fVal - sVal;
                    break;
                case 'mul':
                    oResult.innerText = fVal * sVal;
                    break;
                case 'div':
                    oResult.innerText = fVal / sVal;
                    break;
                default:
                    break;
            }
        }
    }

    init();
})();