<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
第一个数:<input type="text" placeholder="请输入第一个数字" id="txt1">
<select name="" id="slt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
第二个数:<input type="text" placeholder="请输入第二个数字" id="txt2">
<button id="btn">计算</button>
结果<input type="text" placeholder="" id="res">
<script>
// 查找到标签:
// 对按钮单击事件 ------取出数字和运算符号 ----赋值给结果的框 var v1=txt1.value
// 1.查标签
var txt1 = document.querySelector('#txt1'); //通过选择器查找dom节点。
var txt2 = document.querySelector('#txt2'); //通过选择器查找dom节点。
var res = document.querySelector('#res'); //通过选择器查找dom节点。
var btn = document.querySelector('#btn'); //通过选择器查找dom节点。
var slt = document.querySelector('#slt'); //通过选择器查找dom节点。
// 2.对按钮加事件。
btn.onclick = function () {
//2.1取值 txt1.value txt2.value slt.value
var v1 = txt1.value;
var v2 = txt2.value;
var v3 = slt.value;
// var v3 = slt.value;
//2.2判断运算符是什么符号
switch (v3) {
case "+":
res.value = parseFloat(v1) + parseFloat(v2);
break;
case "-":
res.value = parseFloat(v1) - parseFloat(v2);
break;
case "*":
res.value = parseFloat(v1) * parseFloat(v2);
break;
case "/":
res.value = parseFloat(v1) / parseFloat(v2);
break;
case "%":
res.value = parseFloat(v1) % parseFloat(v2);
break;
}
}
</script>
</body>
</html>
JavaScript编写一个简易计算器
最新推荐文章于 2024-09-07 13:38:28 发布