<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>计算器
</title>
<script>
var fuhao =""; //定义一个运算符号
var zuobian =""; //定义第一个变量
var youbian =""; //定义第二个变量
var result =0; //给输出结果一个定义
function czFuhao(fh){ // 给操作符合一个定义函数,参数为fh
fuhao=fh; //把参数给运算符号
}
function dianjishuzi(num){ //定义一个点击数字的函数
var txt=num.toString(); //把数字转化为字符串
if (fuhao=="") {
zuobian=zuobian+txt;
document.getElementById("show").value=zuobian; //通过id元素show输出数值
} else {
youbian=youbian+txt;
document.getElementById("show").value=youbian;
}
}
function dian(){ //定义一个小数点的函数
if (fuhao=="") {
zuobian=zuobian+".";
document.getElementById("show").value=zuobian;
} else {
youbian=youbian+".";
document.getElementById("show").value=youbian;
}
}
function jisuan(){ //定义函数基本的加减乘除计算
if (fuhao=="+") {
result=Number(zuobian)+Number(youbian); //用Number将左右两边的数转化为数值
document.getElementById("show").value=result;
}else if(fuhao=="-"){
result=Number(zuobian)-Number(youbian);
document.getElementById("show").value=result;
}else if(fuhao=="*"){
result=Number(zuobian)*1000*Number(youbian); //计算机中默认为小数点后三位数,首先让其成为整数,最后让结果回位
result=result/1000;
document.getElementById("show").value=result;
}else if(fuhao=="/"){
result=Number(zuobian)/Number(youbian);
document.getElementById("show").value=result;
}else if(fuhao=="%"){
result=Number(zuobian)%Number(youbian);
document.getElementById("show").value=result;
}else{
document.getElementById("show").value="错误,你还没有选择运算符号!";
}
}
function clearAC(){ //定义清除数据的函数
fuhao ="";
zuobian ="";
youbian =""; //所有数据为空
document.getElementById("show").value = "";
document.getElementById("result").value = "";
}
</script>
</head>
<body>
<h1 align="center">计算器</h1>
<table width="270px"height="340px"border="1px"cellpadding="8px"cellspacing="0px"align="center"> <!-- 新建一个表格,给各个元素一个定义值-->
<tr>
<td colspan="4" align="center"><input type="text" id="show" style="width: 220px;height: 60px;margin: 10px;font-size: 30px;"/></td>
</tr>
<tr>
<td><input type="button" style="color: red;width: 50px;height: 40px;" value="C" οnclick="clearAC()"/></td>
<td><input type="button" style="width: 50px;height: 40px;" value="/" οnclick="czFuhao('/')" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="*" οnclick="czFuhao('*')" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="←" οnclick="shanchu()" /></td>
</tr>
<tr>
<td><input type="button" style="width: 50px;height: 40px;" value="7" οnclick="dianjishuzi(7)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="8" οnclick="dianjishuzi(8)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="9" οnclick="dianjishuzi(9)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="-" οnclick="czFuhao('-')" /></td>
</tr>
<tr>
<td><input type="button" style="width: 50px;height: 40px;" value="4" οnclick="dianjishuzi(4)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="5" οnclick="dianjishuzi(5)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="6" οnclick="dianjishuzi(6)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="+" οnclick="czFuhao('+')" /></td>
</tr>
<tr>
<td><input type="button" style="width: 50px;height: 40px;" value="1" οnclick="dianjishuzi(1)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="2" οnclick="dianjishuzi(2)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="3" οnclick="dianjishuzi(3)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="%" οnclick="czFuhao('%')" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" style="width: 118px;height: 40px;" value="0" οnclick="dianjishuzi(0)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="." οnclick="dian()" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="=" οnclick="jisuan()" /></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>计算器
<script>
var fuhao =""; //定义一个运算符号
var zuobian =""; //定义第一个变量
var youbian =""; //定义第二个变量
var result =0; //给输出结果一个定义
function czFuhao(fh){ // 给操作符合一个定义函数,参数为fh
fuhao=fh; //把参数给运算符号
}
function dianjishuzi(num){ //定义一个点击数字的函数
var txt=num.toString(); //把数字转化为字符串
if (fuhao=="") {
zuobian=zuobian+txt;
document.getElementById("show").value=zuobian; //通过id元素show输出数值
} else {
youbian=youbian+txt;
document.getElementById("show").value=youbian;
}
}
function dian(){ //定义一个小数点的函数
if (fuhao=="") {
zuobian=zuobian+".";
document.getElementById("show").value=zuobian;
} else {
youbian=youbian+".";
document.getElementById("show").value=youbian;
}
}
function jisuan(){ //定义函数基本的加减乘除计算
if (fuhao=="+") {
result=Number(zuobian)+Number(youbian); //用Number将左右两边的数转化为数值
document.getElementById("show").value=result;
}else if(fuhao=="-"){
result=Number(zuobian)-Number(youbian);
document.getElementById("show").value=result;
}else if(fuhao=="*"){
result=Number(zuobian)*1000*Number(youbian); //计算机中默认为小数点后三位数,首先让其成为整数,最后让结果回位
result=result/1000;
document.getElementById("show").value=result;
}else if(fuhao=="/"){
result=Number(zuobian)/Number(youbian);
document.getElementById("show").value=result;
}else if(fuhao=="%"){
result=Number(zuobian)%Number(youbian);
document.getElementById("show").value=result;
}else{
document.getElementById("show").value="错误,你还没有选择运算符号!";
}
}
function clearAC(){ //定义清除数据的函数
fuhao ="";
zuobian ="";
youbian =""; //所有数据为空
document.getElementById("show").value = "";
document.getElementById("result").value = "";
}
</script>
</head>
<body>
<h1 align="center">计算器</h1>
<table width="270px"height="340px"border="1px"cellpadding="8px"cellspacing="0px"align="center"> <!-- 新建一个表格,给各个元素一个定义值-->
<tr>
<td colspan="4" align="center"><input type="text" id="show" style="width: 220px;height: 60px;margin: 10px;font-size: 30px;"/></td>
</tr>
<tr>
<td><input type="button" style="color: red;width: 50px;height: 40px;" value="C" οnclick="clearAC()"/></td>
<td><input type="button" style="width: 50px;height: 40px;" value="/" οnclick="czFuhao('/')" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="*" οnclick="czFuhao('*')" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="←" οnclick="shanchu()" /></td>
</tr>
<tr>
<td><input type="button" style="width: 50px;height: 40px;" value="7" οnclick="dianjishuzi(7)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="8" οnclick="dianjishuzi(8)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="9" οnclick="dianjishuzi(9)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="-" οnclick="czFuhao('-')" /></td>
</tr>
<tr>
<td><input type="button" style="width: 50px;height: 40px;" value="4" οnclick="dianjishuzi(4)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="5" οnclick="dianjishuzi(5)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="6" οnclick="dianjishuzi(6)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="+" οnclick="czFuhao('+')" /></td>
</tr>
<tr>
<td><input type="button" style="width: 50px;height: 40px;" value="1" οnclick="dianjishuzi(1)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="2" οnclick="dianjishuzi(2)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="3" οnclick="dianjishuzi(3)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="%" οnclick="czFuhao('%')" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" style="width: 118px;height: 40px;" value="0" οnclick="dianjishuzi(0)" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="." οnclick="dian()" /></td>
<td><input type="button" style="width: 50px;height: 40px;" value="=" οnclick="jisuan()" /></td>
</tr>
</table>
</body>
</html>