做一个简单的计算器 加减乘除 知识点:
局部变量和全局变量 全局变量是整个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; } }