用js实现简易计算器
<style>
.a1 {
width: 600px;
height: 300px;
border-radius: 5px;
margin: 100px auto;
box-shadow: 2px 2px 5px gray;
border-radius: 5px;
}
input {
width: 200px;
height: 30px;
border-radius: 5px;
outline: none;
margin-left: 5px;
margin-top: 20px;
}
button {
width: 150px;
height: 45px;
margin: 30px 0 0 100px;
background-color: #4662D9;
color: white;
}
select {
width: 60px;
height: 35px;
margin-left: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="a1">
<label for="">
数字1: <input type="text" placeholder="输入数字" id="i1"><br>
</label>
<label for="">
数字2: <input type="text" placeholder="输入数字" id="i2">
</label>
<select name="" id="i3">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<br>
<button onclick="pad()">计算结果</button>
</div>
<script>
var a = document.getElementById("i1");
var b = document.getElementById("i2");
var i3 = document.getElementById("i3");
function pad() {
if (i3.value == "+") {
var sum = a.value * 1 + b.value * 1
alert(sum)
}
else if (i3.value == "-") {
var sum = a.value * 1 - b.value * 1
alert(sum)
} else if (i3.value == "*") {
var sum = a.value * 1 * b.value * 1
alert(sum)
} else if (i3.value == "/") {
var sum = a.value * 1 / b.value * 1
alert(sum)
}
}
</script>
浙公网安备 33010602011771号