用js寫一個簡易計算器

新進小設計 2021-08-28

展開全文

要求

1.實現(xiàn)最基本的+ - * / %運算，樣式不做要求。
2.有一個【清除】按鈕，清除所有輸入

有幾個地方需要注意:

如何獲取輸入框的內(nèi)容？

    //用H5的方法獲取元素內(nèi)容
    var n1 = document.querySelector('.n1');
    var n2 = document.querySelector('.n2');

如何取得運算符的內(nèi)容？

    1.先獲取select這個下拉框
    var ys = document.querySelector('#ys');
    2.然后獲取被選中的下標值，并獲取到該值(運算符)
    var index = ys.selectedIndex;
    var opt = ys.options[index].value;

獲取到的內(nèi)容能否直接運算？

    有了兩個值和運算符，還不能直接元素。因為獲取到的內(nèi)容都是string字符串類型。需要強制轉換成number類型。
    然后用switch語句判斷運算符內(nèi)容，并進行對應的運算。

如何把運算結果寫到頁面中？

    首頁要獲取到展示結果的位置
    獲取元素文本內(nèi)容，有幾種方式：
        1.innerHTML或者innerContext
            innerHTML會讀取內(nèi)容的語義，解析標簽
            innerContext和上面作用一樣，只適用于火狐(Firefox)瀏覽器。
        2.innerText(推薦使用)
            只是讀取直接子級的文字
        2.textContent (不推薦使用)
            讀取的內(nèi)容不僅僅是直接子級，元素所有的文字內(nèi)容
            也會被讀取出，不推薦使用，會被惡意注入。

清除按鈕怎么清除所有內(nèi)容？

    上面功能完成了，幾乎就沒啥問題了。
    清除就是把所有的輸入框，結果對應的元素標簽
    element.innerText = '';

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>計算器</title>
    <style>
        input,select,option,span,p,button{
            width: 80px;
            height: 30px;
            font-size: 20px;
        }
        .clear{
            cursor: pointer;
            border: 1px solid #333;
        }
        p.result{
            display: inline-block;
            min-width: 50px;
            width: 150px;
        }
        option{
            font-size: 26px;
        }
    </style>
</head>
<body>
    <input type="number" value="" class="n1">
    <select id="ys">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
        <option value="%">%</option>
    </select>
    <input type="number" class="n2" value="">
    <button>=</button>
    <p class="result">0</p>
    <br>
    <span class="clear">清除</span>

    <script>
        var n1 = document.querySelector(".n1");
        var n2 = document.querySelector(".n2");
        var ys = document.querySelector("#ys");
        var result = document.querySelector(".result");
        var btn = document.querySelector("button");
        var clear = document.querySelector(".clear")
        //點擊按鈕 計算結果
        btn.onclick= function(){
            var resultValue;
            switch(ys.value){
                case '+':
                    resultValue = parseFloat(n1.value)+parseFloat(n2.value);
                    break;
                case '-':
                    resultValue = parseFloat(n1.value)-parseFloat(n2.value);
                    break;
                case '*':
                    resultValue = parseFloat(n1.value)*parseFloat(n2.value);
                    break;
                case '/':
                    resultValue = parseFloat(n1.value) / parseFloat(n2.value);
                    break;
                case '%':
                    resultValue = parseInt(n1.value) % parseInt(n2.value);
            }
            //解決不同瀏覽器對innerText屬性兼容性問題  ， firefox用的是innerContent
            (typeof result.innerText) == "string" ? (result.innerText = resultValue) : (result.innerContent = resultValue) ;
        }
        //清零
        clear.onclick = function(){
            result.innerText = '0';
            n1.value = '';
            n2.value = '';
        }
    </script>
</body>
</html>