用JS和JQ实现简易计算器

100

 

HTML代码

<input type="numble" id="num1">

<select id="op">

<option value="+">+</option>

<option value="-">-</option>

<option value="*">*</option>

<option value="/">/</option>

</select>

<input type="text" id="num2">

<button οnclick="caculate()">计算</button>

<input type="text" id="result">

用JS实现：

//页面加载事件

window.οnlοad=function(){

btn.οnclick=function(){

//获取第一个框num1的值

var num1=parseFloat(document.getElementById("num1").value);

//获取第二个框num2的值

var num2=parseFloat(document.getElementById("num2").value);

//获取运算符下拉框“op”的值

var op=document.getElementById("op").value;

//运算

var result=0;

if(op=="+"){

result=parseFloat(num1)+parseFloat(num2);

//加parseFloat（）是因为num1+num2是字符串拼接的写法

}else if(op=="-"){

result=num1-num2;

}else if(op=="*"){

result=num1*num2;

}else if(num2==0){

result=0;

}else{

result=num1/num2;

}

//给result赋值

document.getElementById("result").value=result;

}

}

用jq实现

function caculate(){

var num1=$("#num1").val();

var num2=$("#num2").val();

var result=0;

console.log(result);

var op=$("#op").val();

if(op=="+"){

result=parseFloat(num1)+parseFloat(num2);

}else if(op=="-"){

result=num1-num2;

}else if(op=="*"){

result=num1*num2;

}

else if(op=="/"){

if(num2==0){

alert("除数不能为0")

}

result=num1/num2;

}

$("#result").val(result);

}

JQ部分就不写备注了，如果不了解JQ部分的方法或用法可看我之前写的“JQuery基础”。