js 简单计算器
2017-06-09 07:38
357 查看
将字符串转成浮点型函数：parseFloat（"12.3"）;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div{
width:300px;
height:200px;
background:#0FF;
margin:auto;
}
#div1 h3{
text-align:center;
width:300px;
height:30px;
border:1px;
text-align:center;
background:#0CF;
}
#div2{
background:#060;
width:300px;
height:180px;
margin:10px 0;
}
#div1 #text{
margin:-20px 0 0 65px;
}
#div1 #C{
width:60px;
height:40px;
}
#div2 input{
width:65px;
height:40px;
margin:0 2px 3px 2px;
font-size:18px;
}
</style>
</head>
<body>
<div id="div">
<div id="div1">
<h3>计算器</h3>
<input type="text" id="text" />
<input type="button" id="C" value="C" onclick="qk()"/>
</div>
<div id="div2">
<input type="button" id="btn1" value="1" onclick="f(1)"/>
<input type="button" id="btn2" value="2" onclick="f(2)"/>
<input type="button" id="btn3" value="3" onclick="f(3)"/>
<input type="button" id="btn4" value="+" onclick="ysf('+')"/>
<input type="button" id="btn5" value="4" onclick="f(4)"/>
<input type="button" id="btn6" value="5" onclick="f(5)"/>
<input type="button" id="btn7" value="6" onclick="f(6)"/>
<input type="button" id="btn8" value="-" onclick="ysf('-')"/>
<input type="button" id="btn9" value="7" onclick="f(7)"/>
<input type="button" id="btn10" value="8" onclick="f(8)"/>
<input type="button" id="btn11" value="9" onclick="f(9)"/>
<input type="button" id="btn12" value="*" onclick="ysf('*')"/>
<input type="button" id="btn13" value="0" onclick="f(0)"/>
<input type="button" id="btn14" value="." onclick="f('.')"/>
<input type="button" id="btn15" value="=" onclick="ysf('=')"/>
<input type="button" id="btn16" value="/" onclick="ysf('/')"/>
</div>
</div>
<script>
var text = document.getElementById('text');
var tag = false;
var jl;
var v1=0,v2=0,v3=0;
function f(x)
{
text.value += x;
};
function ysf(ch){
switch(ch){
case '+':
v1 = parseFloat(text.value);
text.value="";
jl = 1;
break;
case '-':
v1 = parseFloat(text.value);
text.value="";
jl = 2;
break;
case '*':
v1 = parseFloat(text.value);
text.value="";
jl= 3;
break;
case '/':
v1 = parseFloat(text.value);
text.value="";
jl = 4;
break;
case '=':
v2 = parseFloat(text.value);
switch(jl){
case 1:
text.value = v1+v2;
break;
case 2:
text.value = v1-v2;
break;
case 3:
text.value = v1*v2;
break;
case 4:
text.value = v1/v2;
break;
}
break;
}
};
function qk(){
v1 = v2 = 0.0;
text.value = "";
}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div{
width:300px;
height:200px;
background:#0FF;
margin:auto;
}
#div1 h3{
text-align:center;
width:300px;
height:30px;
border:1px;
text-align:center;
background:#0CF;
}
#div2{
background:#060;
width:300px;
height:180px;
margin:10px 0;
}
#div1 #text{
margin:-20px 0 0 65px;
}
#div1 #C{
width:60px;
height:40px;
}
#div2 input{
width:65px;
height:40px;
margin:0 2px 3px 2px;
font-size:18px;
}
</style>
</head>
<body>
<div id="div">
<div id="div1">
<h3>计算器</h3>
<input type="text" id="text" />
<input type="button" id="C" value="C" onclick="qk()"/>
</div>
<div id="div2">
<input type="button" id="btn1" value="1" onclick="f(1)"/>
<input type="button" id="btn2" value="2" onclick="f(2)"/>
<input type="button" id="btn3" value="3" onclick="f(3)"/>
<input type="button" id="btn4" value="+" onclick="ysf('+')"/>
<input type="button" id="btn5" value="4" onclick="f(4)"/>
<input type="button" id="btn6" value="5" onclick="f(5)"/>
<input type="button" id="btn7" value="6" onclick="f(6)"/>
<input type="button" id="btn8" value="-" onclick="ysf('-')"/>
<input type="button" id="btn9" value="7" onclick="f(7)"/>
<input type="button" id="btn10" value="8" onclick="f(8)"/>
<input type="button" id="btn11" value="9" onclick="f(9)"/>
<input type="button" id="btn12" value="*" onclick="ysf('*')"/>
<input type="button" id="btn13" value="0" onclick="f(0)"/>
<input type="button" id="btn14" value="." onclick="f('.')"/>
<input type="button" id="btn15" value="=" onclick="ysf('=')"/>
<input type="button" id="btn16" value="/" onclick="ysf('/')"/>
</div>
</div>
<script>
var text = document.getElementById('text');
var tag = false;
var jl;
var v1=0,v2=0,v3=0;
function f(x)
{
text.value += x;
};
function ysf(ch){
switch(ch){
case '+':
v1 = parseFloat(text.value);
text.value="";
jl = 1;
break;
case '-':
v1 = parseFloat(text.value);
text.value="";
jl = 2;
break;
case '*':
v1 = parseFloat(text.value);
text.value="";
jl= 3;
break;
case '/':
v1 = parseFloat(text.value);
text.value="";
jl = 4;
break;
case '=':
v2 = parseFloat(text.value);
switch(jl){
case 1:
text.value = v1+v2;
break;
case 2:
text.value = v1-v2;
break;
case 3:
text.value = v1*v2;
break;
case 4:
text.value = v1/v2;
break;
}
break;
}
};
function qk(){
v1 = v2 = 0.0;
text.value = "";
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 