用HTML，CSS，JavaScript实现的在线计算器 

<style>
    .calculator {
        width: 80%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 15px;
        background-color: #f8f8f8;
        margin: 0 auto;
    }

    .calculator input[type="text"] {
        width: 100%;
        margin-bottom: 10px;
        padding: 5px;
        font-size: 16px;
    }

    .calculator
       input[type="button"] {
       width: 15%;
       padding: 5px;
       font-size: 16px;
       border-radius: 10px;
       cursor: pointer;
    }
</style>
<div class="calculator">
    <input type="text" id="result" disabled>
    <input type="button" value="1" onclick="appendToResult('1')">
    <input type="button" value="2" onclick="appendToResult('2')">
    <input type="button" value="3" onclick="appendToResult('3')">
    <input type="button" value="4" onclick="appendToResult('4')">
    <input type="button" value="5" onclick="appendToResult('5')">
    <br>
    <input type="button" value="6" onclick="appendToResult('6')">
    <input type="button" value="7" onclick="appendToResult('7')">
    <input type="button" value="8" onclick="appendToResult('8')">
    <input type="button" value="9" onclick="appendToResult('9')">
    <input type="button" value="0" onclick="appendToResult('0')">
    <br>
    <input type="button" value="＋" onclick="appendToResult('+')">
    <input type="button" value="－" onclick="appendToResult('-')">
    <input type="button" value="×" onclick="appendToResult('*')">
    <input type="button" value="÷" onclick="appendToResult('/')">
    <input type="button" value="." onclick="appendToResult('.')">
    <br>
    <input type="button" value="C/CE" onclick="clearResult()">
    <input type="button" value="=" onclick="calculateResult()">
</div>
<script>
    function appendToResult(value) {
     // 将点击的按钮值追加到结果文本框中
     document.getElementById('result').value += value;
    }

    function calculateResult() {
     var result = eval(document.getElementById('result').value);
     // 计算结果并将结果显示在文本框中
     document.getElementById('result').value = result;
    }

    function clearResult() {
     // 清空结果文本框
     document.getElementById('result').value = '';
    }
</script>
</body>

</html>

深色版

讨论区

新回复
原创娱乐实用性科学性
© 地下黑市
2020~2025
属于闲人的社区
萌ICP备20240682号