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基础”。