小菜鸟最近在学习JavaScript,练习一些小栗子加深印象,计算器的栗子很经典,使用 HTML 、JavaScript 创建一个简单的计算器,包含加、减、乘、除四个功能,以下是代码练习:
HTML部分:
<p>简易计算器:</p>
<table border="2" style="position:center;">
<tr>
<td>NUM1:</td>
<td><input type="text" id="first"/></td>
</tr>
<tr>
<td>NUM2:</td>
<td><input type="text" id="second"/></td>
</tr>
<tr>
<td colspan="2" >
<button οnclick="add()">+</button>
<button οnclick="subtract()">-</button>
<button οnclick="ride()">*</button>
<button οnclick="devide()">/</button>
</td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<p id="result"></p>
</td>
</tr>
</table>
JavaScript部分:
var r;
//加法
function add() {
var a = getFirstNumber();
var b = getSecondNumber();
var re =Number( a) +Number( b);//用Number()将ab转化为数字,否则默认为字符串拼接
sendResult(a,b,re,"+");
}
//减法
function subtract() {
var a = getFirstNumber();
var b = getSecondNumber();
var re = a - b;
sendResult(a,b,re,"-");
}
//乘法
function ride() {
var a = getFirstNumber();
var b = getSecondNumber();
var re = a * b;
sendResult(a,b,re,"*");
}
//除法
function devide() {
var a = getFirstNumber();
var b = getSecondNumber();
var re = a / b;
sendResult(a,b,re,"/");
}
//给p标签传值
function sendResult(x,y,r,s) {
var num = document.getElementById("result")
num.innerHTML = x+s+y+"="+r;
}
//获取第一位数字
function getFirstNumber() {
var firstNumber = document.getElementById("first").value;
return firstNumber;
}
//获取第二位数字
function getSecondNumber() {
var secondNumber = document.getElementById("second").value;
return secondNumber;
}
输出: