JS&jQuery初级07

来源：互联网发布：浙江网络作协编辑：程序博客网时间：2024/06/04 08:37

做一个简单的计算器
加减乘除
知识点：

局部变量和全局变量
全局变量是整个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;        }    }

阅读全文

0 0