javascript计算器小程序

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

<!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>
<title>javascript测试</title>
<script type="text/javascript" language="javascript">
var n1 = '', n2 = '';
var item1_flag = true; //默认设置为第一运算符
var opr_type = '+'; //运算符默认是加号
//设置初始值函数
function SetVal(item) {
document.Cal.OutText.value += item;//字符串的连接
if (item1_flag) {
n1 += item;
}
else
n2 += item;
}
//再输入框中输入运算符
function SetOpr(opr) {
document.Cal.OutText.value += opr;
item1_flag = false
opr_type = opr;
}
//清屏函数
function Clear() {
document.Cal.OutText.value = "";
item1_flag = true;
opr_type = '+';
n1 = '';
n2 = '';
}
//计算表达式的值
function Compute(obj) {
var Result;
if ((n1 != '') && (n2 != '')) {
if ((eval(n2) == 0) && (opr_type == '/')) {
alert('除数不能为0！');
Clear();
return;
}
else {
Result = eval(obj.OutText.value);
document.Cal.OutText.value += '=';
document.Cal.OutText.value += Result;
}

}
}
</script>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align="center">
<form name="Cal" action="#" >
<input type="text" value="" name="OutText" /><br /><br />
<input type="button" class="button1" value="0" onclick="SetVal('0')" />
<input type="button" class="button1" value="1" onclick="SetVal('1')" />
<input type="button" class="button1" value="2" onclick="SetVal('2')" />
<input type="button" class="button1" value="3" onclick="SetVal('3')" /><br /><br />
<input type="button" class="button1" value="4" onclick="SetVal('4')" />
<input type="button" class="button1" value="5" onclick="SetVal('5')" />
<input type="button" class="button1" value="6" onclick="SetVal('6')" />
<input type="button" class="button1" value="7" onclick="SetVal('7')" /><br /><br />
<input type="button" class="button1" value="8" onclick="SetVal('8')" />
<input type="button" class="button1" value="9" onclick="SetVal('9')" />
<input type="button" class="button1" value="+" onclick="SetVal('+')" />
<input type="button" class="button1" value="-" onclick="SetVal('-')" /><br /><br />
<input type="button" class="button1" value="*" onclick="SetVal('*')" />
<input type="button" class="button1" value="/" onclick="SetVal('/')" />
<input type="button" class="button1" value="CE" onclick="Clear()" />
<input type="button" class="button1" value="=" onclick="Compute(this.form)" />
</form>
</div>
</body>
</html>