JavaScript 计算器

JavaScript计算器 用于执行加法、减法、乘法、除法等数学运算。

使用 HTML 、 CSS 和 JavaScript 来设计JavaScript计算器。HTML用于设计计算器的基本结构，CSS用于应用样式，JavaScript用于添加计算功能。还使用了Math.js来评估计算结果。

方法：

使用HTML表格创建网格结构，并使用<input type="button">在网格上添加按钮。
使用<input type="text">添加输入文本框来显示表达式。
当用户点击按钮时，按钮上的值将显示在输入框中。
当点击等号按钮（=）时，调用solve()函数来评估表达式，并在输入文本框中显示结果。
使用“c”按钮来清除文本输入框。当点击按钮时，调用clr()函数将值重置为空。
solve()函数使用Math.js的evaluate()函数来评估数学表达式。

完整代码

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
      <title>JavaScript Calculator</title> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.js"
        integrity= 
"sha512-BbVEDjbqdN3Eow8+empLMrJlxXRj5nEitiCAK5A1pUr66+jLVejo3PmjIaucRnjlB0P9R3rBUs3g5jXc8ti+fQ=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"></script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.min.js"
        integrity= 
"sha512-iphNRh6dPbeuPGIrQbCdbBF/qcqadKWLa35YPVfMZMHBSI6PLJh1om2xCTWhpVpmUyb4IvVS9iYnnYMkleVXLA=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"></script> 
    
    <!-- For styling -->
    <style> 
        table { 
            border: 1px solid black; 
            margin-left: auto; 
            margin-right: auto; 
        } 
  
        input[type="button"] { 
            width: 100%; 
            padding: 20px 40px; 
            background-color: green; 
            color: white; 
            font-size: 24px; 
            font-weight: bold; 
            border: none; 
            border-radius: 5px; 
        } 
  
        input[type="text"] { 
            padding: 20px 30px; 
            font-size: 24px; 
            font-weight: bold; 
            border: none; 
            border-radius: 5px; 
            border: 2px solid black; 
        } 
    </style> 
</head> 
    
<body> 
    
      <!-- Use Table to Create Calculator Structure Design -->
    <table id="calcu"> 
        <tr> 
            <td colspan="3"><input type="text" id="result"></td> 
            <td><input type="button" value="c" onclick="clr()" /> </td> 
        </tr> 
        <tr> 
            <td><input type="button" value="1" onclick="dis('1')"
                        onkeydown="myFunction(event)"> </td> 
            <td><input type="button" value="2" onclick="dis('2')"
                        onkeydown="myFunction(event)"> </td> 
            <td><input type="button" value="3" onclick="dis('3')"
                        onkeydown="myFunction(event)"> </td> 
            <td><input type="button" value="/" onclick="dis('/')"
                        onkeydown="myFunction(event)"> </td> 
        </tr> 
        <tr> 
            <td><input type="button" value="4" onclick="dis('4')"
                        onkeydown="myFunction(event)"> </td> 
            <td><input type="button" value="5" onclick="dis('5')"
                        onkeydown="myFunction(event)"> </td> 
            <td><input type="button" value="6" onclick="dis('6')"
                        onkeydown="myFunction(event)"> </td> 
            <td><input type="button" value="*" onclick="dis('*')"
                        onkeydown="myFunction(event)"> </td> 
        </tr> 
        <tr> 
            <td><input type="button" value="7" onclick="dis('7')"
                        onkeydown="myFunction(event)"> </td> 
            <td><input type="button" value="8" onclick="dis('8')"
                        onkeydown="myFunction(event)"> </td> 
            <td><input type="button" value="9" onclick="dis('9')"
                        onkeydown="myFunction(event)"> </td> 
            <td><input type="button" value="-" onclick="dis('-')"
                        onkeydown="myFunction(event)"> </td> 
        </tr> 
        <tr> 
            <td><input type="button" value="0" onclick="dis('0')"
                        onkeydown="myFunction(event)"> </td> 
            <td><input type="button" value="." onclick="dis('.')"
                        onkeydown="myFunction(event)"> </td> 
            
            <!-- solve function call function solve to evaluate value -->
            <td><input type="button" value="=" onclick="solve()"> </td> 
  
            <td><input type="button" value="+" onclick="dis('+')"
                        onkeydown="myFunction(event)"> </td> 
        </tr> 
    </table> 
  
    <script> 
        
        // Function that display value 
        function dis(val) { 
            document.getElementById("result").value += val 
        } 
  
        function myFunction(event) { 
            if (event.key == '0' || event.key == '1' 
                || event.key == '2' || event.key == '3' 
                || event.key == '4' || event.key == '5' 
                || event.key == '6' || event.key == '7' 
                || event.key == '8' || event.key == '9' 
                || event.key == '+' || event.key == '-' 
                || event.key == '*' || event.key == '/') 
                document.getElementById("result").value += event.key; 
        } 
  
        var cal = document.getElementById("calcu"); 
        cal.onkeyup = function (event) { 
            if (event.keyCode === 13) { 
                console.log("Enter"); 
                let x = document.getElementById("result").value 
                console.log(x); 
                solve(); 
            } 
        } 
  
        // Function that evaluates the digit and return result 
        function solve() { 
            let x = document.getElementById("result").value 
            let y = math.evaluate(x) 
            document.getElementById("result").value = y 
        } 
  
        // Function that clear the display 
        function clr() { 
            document.getElementById("result").value = "" 
        } 
    </script> 
</body> 
  
</html>

输出：

JavaScript 计算器