js代码实现计算器
程序员文章站
2024-01-27 14:55:52
...
这篇文章介绍的内容是关于js代码实现计算器，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function myjs(){
var ft = document.getElementById("fhv").value;
var v1 = document.getElementById("v1").value;
var v2 = document.getElementById("v2").value;
var v3 = '';
//alert(ft);
//alert(v1);
//alert(v2);
//alert(v3);
if("+" == ft){
v3 = Number(v1) +Number(v2);
}else if("-" == ft){
v3 = Number(v1)-Number(v2);
}else if("*" == ft){
v3 = Number(v1)*Number(v2);
}else if("/" == ft){
v3 = Number(v1)/Number(v2);
}else{
v3 = '';
}
//alert(v3);
document.getElementById("v3").value= v3;
document.getElementById("z3").innerHTML = v3;
}
function changeFh(){
var fu = document.getElementById("fh");
var idx= fu.selectedIndex ;
var ft = fu.options[idx].value;
var fs = fu.options[idx].text;
//alert(ft == "+");
if("+" == ft){
document.getElementById("an").innerHTML= '加';
document.getElementById("fhv").value= '+';
}else if("-" == ft){
document.getElementById("an").innerHTML= '减';
document.getElementById("fhv").value= '-';
}else if("*" == ft){
document.getElementById("an").innerHTML= '乘';
document.getElementById("fhv").value= '*';
}else if("/" == ft){
document.getElementById("an").innerHTML= '除';
document.getElementById("fhv").value= '/';
}else{
document.getElementById("an").innerHTML= '请选择符号';
document.getElementById("fhv").value= '';
}
var v1 = document.getElementById("v1").value;
v1 = v1.replace(/\s+/g,"");
if(v1.length == 0){
document.getElementById("fhz").innerHTML = '';
}
}
function radow_load(){
changeFh();
}
function checkValue1(){
var v1 = document.getElementById("v1").value;
v1 = v1.replace(/\s+/g,"");
//alert(isNaN(v1));
if(isNaN(v1)){
document.getElementById("v1").value = "" ;
alert("请输入数字!");
}
document.getElementById("z1").innerHTML = v1;
}
function checkValue2(){
var v2 = document.getElementById("v2").value;
v2 = v2.replace(/\s+/g,"");
if(isNaN(v2)){
document.getElementById("v2").value = '';
alert("请输入数字");
}
var fhx = document.getElementById("fhv").value;
if(fhx.length == 0){
document.getElementById("v2").value = '';
alert("请输入符号");
return;
}
document.getElementById("fhz").innerHTML = fhx;
document.getElementById("z2").innerHTML = v2;
document.getElementById("fhzy").innerHTML = '=';
}
function clearValue(){
//alert("clear");
document.getElementById("v1").value= '';
document.getElementById("v2").value= '';
document.getElementById("v3").value= '';
document.getElementById("fhv").value= '';
document.getElementById("fh").value= '';
document.getElementById("fhz").value= '';
document.getElementById("an").innerHTML= '请选择符号';
document.getElementById("z1").innerHTML= '';
document.getElementById("z2").innerHTML= '';
document.getElementById("z3").innerHTML= '';
document.getElementById("fhzy").innerHTML= '';
document.getElementById("fhz").innerHTML= '';
}
</script>
</head>
<body onload="radow_load()">
<h1>我的 Web 页面</h1>
<table>
<tr>
<td>
<input id="v1" name="第一个值" onchange="checkValue1()"/>
<select id="fh" name="符号" onchange="changeFh()" >
<option value ="+">+</option>
<option value ="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input id="v2" name="第二个值" onchange="checkValue2()"/>
<b>=</b>
<input id="v3" name="结果"/>
<button id="an" type="button" onclick="myjs()">请选择符号</button>
<button id="ca" type="button" onclick="clearValue()">清空</button>
<input id="fhv" name="fhv" hidden="true"/>
</td>
</tr>
<tr>
<td>
<b id="z1"></b>
<b id="fhz"></b>
<b id="z2"></b>
<b id="fhzy"></b>
<b id="z3"></b>
</td>
</tr>
</table>
</body>
</html>
相关推荐：
以上就是js代码实现计算器的详细内容，更多请关注其它相关文章！