使用 HTML 、JavaScript 创建一个简单的计算器，包含加、减、乘、除四个功能

最新推荐文章于 2023-08-14 15:50:28 发布

尅湖的雨

最新推荐文章于 2023-08-14 15:50:28 发布

阅读量5.5k

点赞数 1

文章标签： javascript html

<body>

<p>简单计算器:</p>
<table border="1" style="position:center;">
<tr>
<td>第一个数：</td>
<td><input type="text" id="first"/></td>
</tr>
<tr>
<td>第二个数：</td>
<td><input type="text" id="twice"/></td>
</tr>
<tr>
<td colspan="2" >
 
<button style="width:inherit" οnclick="add()">+</button>
 
<button style="width:inherit" οnclick="subtract()">-</button>
 
<button style="width:inherit" οnclick="ride()">*</button>
 
<button style="width:inherit" οnclick="devide()">/</button>
</td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<p id="result"></p>
</td>
</tr>
</table>

</body>

var result_1;

//加法
function add() {alert(1);
var a = getFirstNumber();
var b = getTwiceNumber();
var re =Number( a) +Number( b);
sendResult(re);
}

//减法
function subtract() {
var a = getFirstNumber();
var b = getTwiceNumber();
var re = a - b;
sendResult(re);
}

//乘法
function ride() {
var a = getFirstNumber();
var b = getTwiceNumber();
var re = a * b;
sendResult(re);
}

//除法
function devide() {
var a = getFirstNumber();
var b = getTwiceNumber();
var re = a / b;
sendResult(re);
}

//给p标签传值
function sendResult(result_1) {
var num = document.getElementById("result")
num.innerHTML = result_1;
}

//获取第一位数字
function getFirstNumber() {
var firstNumber = document.getElementById("first").value;
return firstNumber;
}

//获取第二位数字
function getTwiceNumber() {
var twiceNumber = document.getElementById("twice").value;
return twiceNumber;
}
</script>