web前端计算器代码怎么写 • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

要编写一个Web前端计算器代码，你可以借助HTML、CSS和JavaScript来实现。

首先，在HTML文件中创建一个基本的页面结构，包括一个显示计算结果的区域和一个包含计算器按钮的区域。你可以使用HTML的表格元素创建计算器按钮，并使用CSS样式来美化页面。

接下来，使用JavaScript来实现计算器的逻辑。你可以为每个按钮添加点击事件，当点击按钮时，将按钮上的值添加到显示区域中。可以使用JavaScript的eval()函数来计算表达式。

以下是一个简单的HTML、CSS和JavaScript代码示例：

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="calculator">
        <div id="display"></div>
        <table>
            <tr>
                <td><button onclick="addToDisplay('7')">7</button></td>
                <td><button onclick="addToDisplay('8')">8</button></td>
                <td><button onclick="addToDisplay('9')">9</button></td>
                <td><button onclick="addToDisplay('/')">/</button></td>
            </tr>
            <tr>
                <td><button onclick="addToDisplay('4')">4</button></td>
                <td><button onclick="addToDisplay('5')">5</button></td>
                <td><button onclick="addToDisplay('6')">6</button></td>
                <td><button onclick="addToDisplay('*')">*</button></td>
            </tr>
            <tr>
                <td><button onclick="addToDisplay('1')">1</button></td>
                <td><button onclick="addToDisplay('2')">2</button></td>
                <td><button onclick="addToDisplay('3')">3</button></td>
                <td><button onclick="addToDisplay('-')">-</button></td>
            </tr>
            <tr>
                <td><button onclick="addToDisplay('0')">0</button></td>
                <td><button onclick="addToDisplay('.')">.</button></td>
                <td><button onclick="calculate()">=</button></td>
                <td><button onclick="addToDisplay('+')">+</button></td>
            </tr>
        </table>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS代码（style.css）：

#calculator {
    width: 200px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
}

#display {
    height: 50px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    text-align: right;
    padding: 0 10px;
    line-height: 50px;
    font-size: 20px;
}

table {
    text-align: center;
    width: 100%;
}

button {
    width: 40px;
    height: 40px;
    margin: 5px;
    font-size: 18px;
}

JavaScript代码（script.js）：

function addToDisplay(value) {
    document.getElementById("display").innerHTML += value;
}

function calculate() {
    var display = document.getElementById("display").innerHTML;
    var result = eval(display);
    document.getElementById("display").innerHTML = result;
}

以上是一个简单的Web前端计算器代码示例。你可以根据需求对其进行扩展和优化。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

要编写一个简单的Web前端计算器，可以使用HTML、CSS和JavaScript来实现。以下是一个基本的示例：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculator">
        <input type="text" class="result" readonly>
        <div class="buttons">
            <button onclick="clearResult()">C</button>
            <button onclick="deleteLastCharacter()">DEL</button>
            <button onclick="appendCharacter('/')">/</button>
            <button onclick="appendCharacter('7')">7</button>
            <button onclick="appendCharacter('8')">8</button>
            <button onclick="appendCharacter('9')">9</button>
            <button onclick="appendCharacter('*')">x</button>
            <button onclick="appendCharacter('4')">4</button>
            <button onclick="appendCharacter('5')">5</button>
            <button onclick="appendCharacter('6')">6</button>
            <button onclick="appendCharacter('-')">-</button>
            <button onclick="appendCharacter('1')">1</button>
            <button onclick="appendCharacter('2')">2</button>
            <button onclick="appendCharacter('3')">3</button>
            <button onclick="appendCharacter('+')">+</button>
            <button onclick="appendCharacter('0')">0</button>
            <button onclick="appendCharacter('.')">.</button>
            <button onclick="calculateResult()">=</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

.calculator {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

.result {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    padding: 5px;
    font-size: 20px;
    text-align: right;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 5px;
}

button {
    width: 100%;
    height: 40px;
    font-size: 16px;
}

JavaScript逻辑

function appendCharacter(character) {
    var result = document.querySelector('.result');
    result.value += character;
}

function clearResult() {
    var result = document.querySelector('.result');
    result.value = '';
}

function deleteLastCharacter() {
    var result = document.querySelector('.result');
    result.value = result.value.slice(0, -1);
}

function calculateResult() {
    var result = document.querySelector('.result');
    try {
        result.value = eval(result.value);
    } catch (error) {
        result.value = 'Error';
    }
}

上述代码中，JavaScript部分包括四个函数：

appendCharacter(character)：将点击的按钮字符追加到结果文本框中。
clearResult()：清空结果文本框。
deleteLastCharacter()：删除结果文本框中最后一个字符。
calculateResult()：计算结果，使用eval()函数进行计算，并在计算出错时显示Error。

通过以上HTML、CSS和JavaScript的组合，即可实现一个简单的Web前端计算器。根据实际需求，还可以对上述代码进行样式和功能的扩展。

1年前 0条评论

worktile

Worktile官方账号

编写一个基础的Web前端计算器代码可以分为以下几个步骤：

HTML部分：创建UI界面

<html>
<head>
    <title>简易计算器</title>
    <style>
        body {
            text-align: center;
        }
        #calculator {
            margin: 0 auto;
            width: 200px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f5f5f5;
        }
        .button {
            width: 40px;
            height: 30px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="calculator">
        <input type="text" id="inputBox" readonly>
        <br>
        <button class="button" onclick="clearInput()">C</button>
        <button class="button" onclick="deleteLastChar()">&larr;</button>
        <button class="button" onclick="appendInput('/')">/</button>
        <button class="button" onclick="appendInput('7')">7</button>
        <br>
        <!-- 其他按钮类似，省略 -->
        <button class="button" onclick="appendInput('=')">=</button>
    </div>

    <script>
        function appendInput(value) {
            document.getElementById("inputBox").value += value;
        }

        function clearInput() {
            document.getElementById("inputBox").value = "";
        }

        function deleteLastChar() {
            var inputBox = document.getElementById("inputBox");
            inputBox.value = inputBox.value.slice(0, -1);
        }
    </script>
</body>
</html>

说明：

使用HTML创建了一个简单的UI界面，包含一个输入框和一组按钮。
输入框的id为"inputBox"，用于显示输入和结果。
各个按钮的点击事件分别调用了不同的JavaScript函数。

JavaScript部分：实现计算功能

// 其他按钮事件省略
function appendInput(value) {
    var inputBox = document.getElementById("inputBox");
    // 运算符 "=" 表示执行计算
    if (value == '=') {
        try {
            inputBox.value = eval(inputBox.value);
        } catch (e) {
            inputBox.value = "错误";
        }
    // 运算符 "C" 表示清空输入框
    } else if (value == 'C') {
        inputBox.value = "";
    // 运算符 "←" 表示删除最后一个字符
    } else if (value == '←') {
        inputBox.value = inputBox.value.slice(0, -1);
    } else {
        inputBox.value += value;
    }
}

说明：

在JavaScript代码中添加了按钮的点击事件处理函数。
点击"="符号时，使用JavaScript的eval()函数计算输入的数学表达式，并将结果显示在输入框中。
点击"C"按钮时，清空输入框的内容。
点击"←"按钮时，删除输入框中最后一个字符。
点击其他数字和运算符按钮时，将相应的内容追加到输入框中。

CSS部分：美化界面
在HTML中的

通过以上步骤，即可实现一个简易的Web前端计算器。

1年前 0条评论