提问：用js写一个加减乘除的计算器给我，要加CSS样式让他好看点

以下是一个使用JavaScript编写的加减乘除计算器，并添加了一些CSS样式以使其看起来更好看：

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>计算器</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="result" readonly>
        <div class="buttons">
            <button onclick="clearResult()">C</button>
            <button onclick="appendNumber(7)">7</button>
            <button onclick="appendNumber(8)">8</button>
            <button onclick="appendNumber(9)">9</button>
            <button onclick="appendOperator('+')">+</button>
            <button onclick="appendNumber(4)">4</button>
            <button onclick="appendNumber(5)">5</button>
            <button onclick="appendNumber(6)">6</button>
            <button onclick="appendOperator('-')">-</button>
            <button onclick="appendNumber(1)">1</button>
            <button onclick="appendNumber(2)">2</button>
            <button onclick="appendNumber(3)">3</button>
            <button onclick="appendOperator('*')">*</button>
            <button onclick="appendNumber(0)">0</button>
            <button onclick="calculate()">=</button>
            <button onclick="appendOperator('/')">/</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS代码（style.css）：

css
.calculator {
    width: 200px;
    margin: 0 auto;
    text-align: center;
}

#result {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    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: 18px;
    background-color: #f2f2f2;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #e6e6e6;
}

JavaScript代码（script.js）：

let result = document.getElementById('result');
let expression = '';

function appendNumber(number) {
    expression += number;
    result.value = expression;
}

function appendOperator(operator) {
    expression += operator;
    result.value = expression;
}

function calculate() {
    try {
        let answer = eval(expression);
        result.value = answer;
        expression = '';
    } catch (error) {
        result.value = 'Error';
    }
}

function clearResult() {
    expression = '';
    result.value = '';
}

将上述代码保存为三个文件：index.html、style.css和script.js，然后在浏览器中打开index.html文件，即可看到一个带有加减乘除功能的计算器，并且具有一些CSS样式使其看起来更好看。

最终的效果：

 

 

 

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。