用HTML生成一个科学计算器。
以下是一个简单的科学计算器的HTML代码示例：
<!DOCTYPE html>
<html>
<head>
<title>科学计算器</title>
<style>
.container {
width: 300px;
margin: 0 auto;
}
.input {
width: 100%;
padding: 10px;
font-size: 20px;
}
.button {
width: 70px;
height: 40px;
font-size: 20px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" class="input" id="display" readonly>
<button class="button" onclick="clearDisplay()">C</button>
<button class="button" onclick="deleteLastCharacter()">←</button>
<button class="button" onclick="calculate()">=</button>
<br>
<button class="button" onclick="appendToDisplay('7')">7</button>
<button class="button" onclick="appendToDisplay('8')">8</button>
<button class="button" onclick="appendToDisplay('9')">9</button>
<button class="button" onclick="appendToDisplay('/')">/</button>
<br>
<button class="button" onclick="appendToDisplay('4')">4</button>
<button class="button" onclick="appendToDisplay('5')">5</button>
<button class="button" onclick="appendToDisplay('6')">6</button>
<button class="button" onclick="appendToDisplay('*')">*</button>
<br>
<button class="button" onclick="appendToDisplay('1')">1</button>
<button class="button" onclick="appendToDisplay('2')">2</button>
<button class="button" onclick="appendToDisplay('3')">3</button>
<button class="button" onclick="appendToDisplay('-')">-</button>
<br>
<button class="button" onclick="appendToDisplay('0')">0</button>
<button class="button" onclick="appendToDisplay('.')">.</button>
<button class="button" onclick="appendToDisplay('+')">+</button>
<button class="button" onclick="toggleScientific()">Scientific</button>
</div>
<script>
let scientificMode = false;
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function deleteLastCharacter() {
let displayValue = document.getElementById('display').value;
document.getElementById('display').value = displayValue.slice(0, -1);
}
function calculate() {
let displayValue = document.getElementById('display').value;
let result;
try {
result = eval(displayValue);
} catch (error) {
result = 'Error';
}
document.getElementById('display').value = result;
}
function toggleScientific() {
scientificMode = !scientificMode;
let buttons = document.getElementsByClassName('button');
for (let i = 0; i < buttons.length; i++) {
buttons[i].classList.toggle('scientific');
}
}
</script>
</body>
</html>
这个示例包含了一个简单的计算器界面，可以进行基本的四则运算。可以点击数字和运算符按钮来输入表达式，点击等号按钮计算结果。另外，还提供了清空按钮、删除按钮和切换科学模式按钮
原文地址: http://www.cveoy.top/t/topic/hLhD 著作权归作者所有。请勿转载和采集!