做一个简单的计算器
加减乘除
知识点:
局部变量和全局变量
全局变量是整个JS都可以调用的,局部变量只能在函数里用。如何让JS的结果显示在html里
用innerHTML。将重复出现的动作,集合起来作为一个函数,用的时候调用函数。
比如其中的getInputNum()。
<!DOCTYPE html>
<html>
<body>
<form>
第一个数字:<br>
<input type="text" id="num1" value="100">
<br>
第二个数字:<br>
<input type="text" id="num2" value="200">
<br>
运算结果:
<br>
<p id="result">显示结果</p>
</form>
<button id="add">+</button>
<button id="subtract">-</button>
<button id="multiply">×</button>
<button id="divide">÷</button>
</body>
</html>
var addBtn=document.getElementById('add');
var subtractBtn=document.getElementById('subtract');
var multiplyBtn=document.getElementById('multiply');
var divideBtn=document.getElementById('divide');
var resultNum=document.getElementById('result');//提取result元素。
var a_int;
var b_int;
addBtn.onclick=function(){
getInputNum();
var result=addiction(a_int,b_int);
resultNum.innerHTML=String(result);//让结果显示在html里。
};
subtractBtn.onclick=function(){
getInputNum();
var result=subtraction(a_int,b_int);
var resultHtml="<p>"+result+"</p>";
resultNum.innerHTML=resultHtml;
};
multiplyBtn.onclick=function(){
getInputNum();
var result=multiplication(a_int,b_int);
var resultHtml="<p>"+result+"</p>";
resultNum.innerHTML=resultHtml;
};
divideBtn.onclick=function(){
getInputNum();
var result=division(a_int,b_int);
var resultHtml="<p>"+result+"</p>";
resultNum.innerHTML=resultHtml;
};
function getInputNum(){
var a=document.getElementById('num1').value;//调用页面里的num1元素的值。
var b=document.getElementById('num2').value;
a_int=parseInt(a,10);//按照十进制,把字符转换成数值。
b_int=parseInt(b,10);
}
function addiction(x,y){
return x+y;
}
function subtraction(x,y){
return x-y;
}
function multiplication(x,y){
return x*y;
}
function division(x,y){
if (y == 0){
alert("0不能做除数");
return;}
else{
return x/y;
}
}