基本步骤为:1.在按钮点击时触发函数 获取 input1、 input 2与 计算符 通过 switch 判断计算符 进行计算,最后将结果放置到占位符中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
</head>
<body>
<label>数一<input type="number" id="num1"></label>
<label for="num">
<select name="" id="num">
<option value="ca">*</option>
<option value="cu">/</option>
<option value="ja">+</option>
<option value="jn">-</option>
</select>
</label>
<label>数二<input type="number" id="num2"></label>
<button id="btn">计算器</button>
<p></p>
<script>
var btn = document.getElementById('btn');
var p = document.getElementsByTagName('p')[0];
btn.onclick = function(){
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var math = document.getElementsByTagName('option')[0].value;
switch(math){
// p.innerHTML 为改变 p 的 HTML文本
case 'ca': p.innerHTML = num1 * num2;break;
case 'cu': p.innerHTML = num1 / num2;break;
case 'ja': p.innerHTML = num1 + num2;break;
case 'jn': p.innerHTML = num1 - num2;break;
}
}
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号