使用html+javascriptt实现的简易四则运算(初学JavaScript笔记)
今天第一天学javascript,做了个简易的四则运算,提供参考,效果图:
html代码:
<!DOCTYPE html> <html > <head > <meta charset="UTF-8"> <link rel="stylesheet" type = "text/css" href = "css/1.css"> <title>index</title> </head> <body id="a1"> <script type="text/javascript" src = "js/3.js"> </script> <form> <p > <input id = "1" type="text" size="20px" name="a " onkeyup="this.value=this.value.replace(/[^\d]/ig,'')"/> <select id = "c"> <option id = "jia" value="+">+</option> <option id = "jian" value="-">-</option> <option id = "cheng" value="*">*</option> <option id = "chu" value="/">/</option> </select> <input id = "2" type="text" size="20px" name="b" onkeyup="this.value=this.value.replace(/[^\d]/ig,'')"/> = <input id = "3" type="text" size="20px" name="result " onkeyup="this.value=this.value.replace(/[^\d]/ig,'')"/> <input name = "button" type = "button" value= "点击提交" onclick = "cal()"> </p> </form> </body> </html>
js代码:
function cal(){
var numa,numb,cc,sum;
numa = Number(document.getElementById("1").value);
numb = Number(document.getElementById("2").value);
cc = document.getElementById("c").value;
if(cc == "+"){
sum = numa + numb;
}else if(cc=="-"){
sum = numa - numb;
}else if(cc=="*"){
sum = numa * numb;
}else{
sum = numa / numb;
}
document.getElementById("3").value= sum;
//alert("计算结果:"+sum);
//document.write(sum);
}