Realize a simple calculator with addition, subtraction, and multiplication functions: the
code is as follows:
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
<script>
function myck(type) {
var inputNum1 = document.getElementById("num1");
var inputNum2 = document.getElementById("num2");
if(type==1){
// 1.非空判断
if(inputNum1.value==""){
alert("请先输入数字1");
return false;
}
if(inputNum2.value==""){
alert("请先输入数字2");
return false;
}
// 2.加法操作
var total = parseInt(inputNum1.value) + parseInt(inputNum2.value);
// 3.将结果展现在最下面 div 中
document.getElementById("resultDiv").innerHTML =
"<h2>最终执行结果：<strong style='color: red;'>"+total+"</strong></h2>";
}else if(type==2){
// 1.非空判断
if(inputNum1.value==""){
alert("请先输入数字1");
return false;
}
if(inputNum2.value==""){
alert("请先输入数字2");
return false;
}
// 2.减法操作
var total = parseInt(inputNum1.value) - parseInt(inputNum2.value);
// 3.将结果展现在最下面 div 中
document.getElementById("resultDiv").innerHTML =
"<h2>最终执行结果：<strong style='color: red;'>"+total+"</strong></h2>";
}else if(type==3){
// 1.非空判断
if(inputNum1.value==""){
alert("请先输入数字1");
return false;
}
if(inputNum2.value==""){
alert("请先输入数字2");
return false;
}
// 2.减法操作
var total = parseInt(inputNum1.value) * parseInt(inputNum2.value);
// 3.将结果展现在最下面 div 中
document.getElementById("resultDiv").innerHTML =
"<h2>计算结果为：<strong style='color: red;'>"+total+"</strong></h2>";
}else if(type==4){
// 清空操作
if(confirm("确认清空？")){
inputNum1.value = "";
inputNum2.value = "";
document.getElementById("resultDiv").innerHTML = "";
}
}
}
</script>
</head>
<body>
<div style="text-align: center;margin-top: 100px;">
<h1>计算器</h1>
数字1：<input id="num1" type="number" placeholder="前输入数字1"> <p></p>
数字2：<input id="num2" type="number" placeholder="前输入数字2"> <p></p>
<div>
<input type="button" value=" 相 加" onclick="myck(1)">
<input type="button" value=" 相 减 " onclick="myck(2)">
<input type="button" value=" 相 乘" onclick="myck(3)">
<input type="button" value=" 清 空 " onclick="myck(4)">
</div>
<div id="resultDiv" style="margin-top: 50px;">
</div>
</div>
</body>
</html>
The results show:
