一个简单的手机计算器的HTML源代码

最新推荐文章于 2024-06-10 22:52:56 发布

技术学堂

最新推荐文章于 2024-06-10 22:52:56 发布

阅读量640

点赞数 11

文章标签： html css 前端

本文链接：https://blog.csdn.net/q254364872/article/details/134632268

版权

下面是一个简单的手机计算器的HTML源代码示例：

<!DOCTYPE html>
<html>
<head>
<title>手机计算器</title>
<style>
/* 样式代码可以写在这里 */
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="result" readonly>
<div class="buttons">
<button class="number" οnclick="addToResult('7')">7</button>
<button class="number" οnclick="addToResult('8')">8</button>
<button class="number" οnclick="addToResult('9')">9</button>
<button class="operator" οnclick="setOperator('+')">+</button>
<br>
<button class="number" οnclick="addToResult('4')">4</button>
<button class="number" οnclick="addToResult('5')">5</button>
<button class="number" οnclick="addToResult('6')">6</button>
<button class="operator" οnclick="setOperator('-')">-</button>
<br>
<button class="number" οnclick="addToResult('1')">1</button>
<button class="number" οnclick="addToResult('2')">2</button>
<button class="number" οnclick="addToResult('3')">3</button>
<button class="operator" οnclick="setOperator('*')">*</button>
<br>
<button class="number" οnclick="addToResult('0')">0</button>
<button class="operator" οnclick="setOperator('/')">/</button>
<button class="clear" οnclick="clearResult()">C</button>
<button class="equals" οnclick="calculateResult()">=</button>
</div>
</div>

<script>
let currentNumber = '';
let operator = '';
let result = '';
let resetAfterCalculation = true;
function addToResult(number) {
currentNumber = number;
if (operator !== '') {
result = result + number;
updateDisplay();
resetAfterCalculation = false;
} else {
result = number;
updateDisplay();
resetAfterCalculation = true;
}
}
function setOperator(operator) {
this.operator = operator;
currentNumber = '';
updateDisplay();
}
function calculateResult() {
if (currentNumber !== '') {
result = eval(result + operator + currentNumber);
resetAfterCalculation = true;
} else {
result = eval(result + operator);
resetAfterCalculation = false;
}
updateDisplay();
}
function clearResult() {
result = '';
currentNumber = '';
operator = '';
updateDisplay();
}
function updateDisplay() {
document.getElementById('result').value = result;
}
</script>
</body>
</html>

添加css:

<style>
/* 样式代码可以写在这里 */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
#calculator {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
#result {
width: 100%;
height: 50px;
line-height: 50px;
font-size: 24px;
text-align: right;
margin-bottom: 20px;
border: none;
outline: none;
padding: 0 10px;
box-sizing: border-box;
}
.buttons {
display: flex;
justify-content: space-between;
padding: 10px 0;
}
.buttons button {
width: 50%;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.buttons button:hover {
background-color: #f0f0f0;
}
.buttons button.operator {
font-size: 18px;
}
</style>