使用扩展片段创建计算器可以通过以下步骤实现:
以下是一个示例的HTML、CSS和JavaScript代码,用于创建一个简单的加法计算器:
HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="calculator.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="appendNumber(1)">1</button>
<button onclick="appendNumber(2)">2</button>
<button onclick="appendNumber(3)">3</button>
<button onclick="appendNumber(4)">4</button>
<button onclick="appendNumber(5)">5</button>
<button onclick="appendNumber(6)">6</button>
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<button onclick="appendNumber(9)">9</button>
<button onclick="appendNumber(0)">0</button>
<button onclick="appendOperator('+')">+</button>
<button onclick="calculate()">=</button>
<button onclick="clearDisplay()">C</button>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>
CSS代码(calculator.css):
.calculator {
width: 200px;
margin: 0 auto;
text-align: center;
}
#display {
width: 100%;
height: 40px;
margin-bottom: 10px;
}
.buttons button {
width: 40px;
height: 40px;
margin: 5px;
}
JavaScript代码(calculator.js):
let display = document.getElementById('display');
let currentNumber = '';
let operator = '';
let result = 0;
function appendNumber(number) {
currentNumber += number;
display.value = currentNumber;
}
function appendOperator(op) {
operator = op;
result = parseInt(currentNumber);
currentNumber = '';
}
function calculate() {
let num = parseInt(currentNumber);
switch (operator) {
case '+':
result += num;
break;
// 添加其他运算符的处理逻辑
}
display.value = result;
currentNumber = '';
}
function clearDisplay() {
display.value = '';
currentNumber = '';
operator = '';
result = 0;
}
这个示例代码创建了一个简单的加法计算器,用户可以通过点击按钮输入数字和运算符,并在显示屏上显示计算结果。可以根据需要扩展代码,实现更复杂的计算功能。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云