87,910
社区成员
发帖
与我相关
我的任务
分享[分享]一个JavaScript版的简易计算器，没有什么技术含量和实用价值，只供新手学习，高手帮忙再完善一下
在JavaScript版搜索了一下“计算器”，只搜索到三条记录。所以发出来，今天没事写着玩儿的。比较简单，没有什么技术含量和实用价值，只供新手学习，高手看看有没问题，再完善一下。
测试环境：IE6 + FireFox1.5下测试通过
技术说明：
1、documnet.getElementsByTagName的用法
2、给HTML对象绑定事件：element.事件名 = 函数名
3、eval的用法
源码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>简易计算器-JavaScript版</title>
</head>
<style type="text/css">
<!--
body td {
font-size: 12px;
}
table {
border: 2px outset #F5F5F5;
background-color: #D6D3CE;
}
input {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 24px;
height: 24px;
color: #0000FF;
}
.r {
width: 120px;
height: auto;
background-color: #F5F5F5;
color: #000000;
}
.b {
width: 80px;
color: #FF0000;
}
.color_red {
color: #FF0000;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
window.onload = function() {
var elements = document.getElementsByTagName("input");
for(i = 0; i < elements.length; i++){
if (elements[i].type == "button"){
switch (elements[i].id){
case "b": elements[i].onclick = backSpace; break;
case "c": elements[i].onclick = clear; break;
case "=": elements[i].onclick = calculate; break;
default : elements[i].onclick = oper; break;
}
}
}
}
function backSpace() {
var value = this.form.r.value;
this.form.r.value = value.substr(0, value.length - 1);
}
function clear(){
this.form.r.value = "";
}
function calculate(){
try{
var result = eval(this.form.r.value);
if (isNaN(result)){
this.form.r.value = "无法计算";
}else if (!isFinite(result)){
this.form.r.value = "无意义";
} else {
this.form.r.value = result;
}
} catch (e){
this.form.r.value = "发生错误";
}
}
function oper(){
this.form.r.value += this.value;
}
//-->
</script>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="100" border="0" align="center" cellpadding="3" cellspacing="1">
<tr>
<td colspan="4"><input name="r" type="text" class="r" id="r" size="16" maxlength="16" readonly="readonly"/></td>
</tr>
<tr>
<td colspan="3" align="right"><input name="b" type="button" class="b" id="b" value="BackSpace"/></td>
<td><input name="c" type="button" class="color_red" id="c" value="C" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name="(" type="button" class="color_red" id="(" value="(" /></td>
<td><input name=")" type="button" class="color_red" id=")" value=")" /></td>
</tr>
<tr>
<td><input name="7" type="button" id="7" value="7" /></td>
<td><input name="8" type="button" id="8" value="8" /></td>
<td><input name="9" type="button" id="9" value="9" /></td>
<td><input name="/" type="button" class="color_red" id="/" value="/" /></td>
</tr>
<tr>
<td><input name="4" type="button" id="4" value="4" /></td>
<td><input name="5" type="button" id="5" value="5" /></td>
<td><input name="6" type="button" id="6" value="6" /></td>
<td><input name="*" type="button" class="color_red" id="*" value="*" /></td>
</tr>
<tr>
<td><input name="1" type="button" id="1" value="1" /></td>
<td><input name="2" type="button" id="2" value="2" /></td>
<td><input name="3" type="button" id="3" value="3" /></td>
<td><input name="-" type="button" class="color_red" id="-" value="-" /></td>
</tr>
<tr>
<td><input name="0" type="button" id="0" value="0" /></td>
<td><input name="." type="button" id="." value="." /></td>
<td><input name="=" type="button" class="color_red" id="=" value="=" /></td>
<td><input name="1+" type="button" class="color_red" id="1+" value="+" /></td>
</tr>
</table>
</form>
</body>
</html>
测试环境：IE6 + FireFox1.5下测试通过
技术说明：
1、documnet.getElementsByTagName的用法
2、给HTML对象绑定事件：element.事件名 = 函数名
3、eval的用法
源码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>简易计算器-JavaScript版</title>
</head>
<style type="text/css">
<!--
body td {
font-size: 12px;
}
table {
border: 2px outset #F5F5F5;
background-color: #D6D3CE;
}
input {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width: 24px;
height: 24px;
color: #0000FF;
}
.r {
width: 120px;
height: auto;
background-color: #F5F5F5;
color: #000000;
}
.b {
width: 80px;
color: #FF0000;
}
.color_red {
color: #FF0000;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
window.onload = function() {
var elements = document.getElementsByTagName("input");
for(i = 0; i < elements.length; i++){
if (elements[i].type == "button"){
switch (elements[i].id){
case "b": elements[i].onclick = backSpace; break;
case "c": elements[i].onclick = clear; break;
case "=": elements[i].onclick = calculate; break;
default : elements[i].onclick = oper; break;
}
}
}
}
function backSpace() {
var value = this.form.r.value;
this.form.r.value = value.substr(0, value.length - 1);
}
function clear(){
this.form.r.value = "";
}
function calculate(){
try{
var result = eval(this.form.r.value);
if (isNaN(result)){
this.form.r.value = "无法计算";
}else if (!isFinite(result)){
this.form.r.value = "无意义";
} else {
this.form.r.value = result;
}
} catch (e){
this.form.r.value = "发生错误";
}
}
function oper(){
this.form.r.value += this.value;
}
//-->
</script>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="100" border="0" align="center" cellpadding="3" cellspacing="1">
<tr>
<td colspan="4"><input name="r" type="text" class="r" id="r" size="16" maxlength="16" readonly="readonly"/></td>
</tr>
<tr>
<td colspan="3" align="right"><input name="b" type="button" class="b" id="b" value="BackSpace"/></td>
<td><input name="c" type="button" class="color_red" id="c" value="C" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input name="(" type="button" class="color_red" id="(" value="(" /></td>
<td><input name=")" type="button" class="color_red" id=")" value=")" /></td>
</tr>
<tr>
<td><input name="7" type="button" id="7" value="7" /></td>
<td><input name="8" type="button" id="8" value="8" /></td>
<td><input name="9" type="button" id="9" value="9" /></td>
<td><input name="/" type="button" class="color_red" id="/" value="/" /></td>
</tr>
<tr>
<td><input name="4" type="button" id="4" value="4" /></td>
<td><input name="5" type="button" id="5" value="5" /></td>
<td><input name="6" type="button" id="6" value="6" /></td>
<td><input name="*" type="button" class="color_red" id="*" value="*" /></td>
</tr>
<tr>
<td><input name="1" type="button" id="1" value="1" /></td>
<td><input name="2" type="button" id="2" value="2" /></td>
<td><input name="3" type="button" id="3" value="3" /></td>
<td><input name="-" type="button" class="color_red" id="-" value="-" /></td>
</tr>
<tr>
<td><input name="0" type="button" id="0" value="0" /></td>
<td><input name="." type="button" id="." value="." /></td>
<td><input name="=" type="button" class="color_red" id="=" value="=" /></td>
<td><input name="1+" type="button" class="color_red" id="1+" value="+" /></td>
</tr>
</table>
</form>
</body>
</html>
...全文
请发表友善的回复…
发表回复
KimSoft 2006-03-07
- 打赏
- 举报
我的那个只是演示一下这三点功能，实用性不强。windows用户只要运行一下calc就OK了。呵呵
1、documnet.getElementsByTagName的用法
2、给HTML对象绑定事件：element.事件名 = 函数名
3、eval的用法
1、documnet.getElementsByTagName的用法
2、给HTML对象绑定事件：element.事件名 = 函数名
3、eval的用法
yibotiemen 2006-03-07
- 打赏
- 举报
都不错嘛，从实用性来说，我更倾向于 Jk的那个
kofkyo 2006-03-07
- 打赏
- 举报
学习来了
clare2003 2006-03-07
- 打赏
- 举报
我收集到的一个
-----------------
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>简易计算器</title>
<script language="JavaScript1.2">
var results=''
var previouskey=''
var re=/(\/|\*|\+|-)/
var re2=/(\/|\*|\+|-){2}$/
var re3=/.+(\/|\*|\+|-).+/
var re4=/\d|\./
var re5=/^[^\/\*\+].+\d$/
var re6=/\./
function calculate(){
if (event.srcElement.tagName=="TD"){
if (event.srcElement.innerText.match(re4)&&previouskey=="=")
results=''
if (result.innerText.match(re3)&&event.srcElement.innerText.match(re)){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}
results+=event.srcElement.innerText
if (results.match(re2))
results=results.substring(0,results.length-2)+results.charAt(results.length-1)
result.innerText=results
}
}
function calculateresult(){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}
function pn(){
if (result.innerText.charAt(0)!='-')
result.innerText=results='-'+result.innerText
else if (result.innerText.charAt(0)=='-')
result.innerText=results=result.innerText*(-1)
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td width="100%" valign="top">
<table border="2" width="200" cellspacing="0" cellpadding="0" bgcolor="#000000" style="border-color:black" onClick="previouskey=event.srcElement.innerText">
<tr>
<td width="100%" bgcolor="#FFFFFF" id="result" style="font:bold 20px Verdana;color:black;text-align='right'">0</td>
</tr>
<tr>
<td width="100%" valign="middle" align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" style="font:bold 20px Verdana;color:white">
<tr>
<td width="80%" align="center">
<table border="1" width="100%" cellspacing="0" cellpadding="0" style="cursor:hand;font:bold 20px Verdana;color:white" onMouseover="if (event.srcElement.tagName=='TD')event.srcElement.style.color='yellow'" onMouseout="event.srcElement.style.color='white'" onselectStart="return false" onClick="calculate()" height="82">
<tr>
<td width="25%" align="center" height="17">7</td>
<td width="25%" align="center" height="17">8</td>
<td width="25%" align="center" height="17">9</td>
<td width="25%" align="center" height="17">/</td>
</tr>
<tr>
<td width="25%" align="center" height="19">4</td>
<td width="25%" align="center" height="19">5</td>
<td width="25%" align="center" height="19">6</td>
<td width="25%" align="center" height="19">*</td>
</tr>
<tr>
<td width="25%" align="center" height="19">1</td>
<td width="25%" align="center" height="19">2</td>
<td width="25%" align="center" height="19">3</td>
<td width="25%" align="center" height="19">-</td>
</tr>
<tr>
<td width="25%" align="center" height="19">0</td>
<td width="25%" align="center" height="19" onClick="pn();previouskey=1;event.cancelBubble=true">+/-</td>
<td width="25%" align="center" height="19">.</td>
<td width="25%" align="center" height="19">+</td>
</tr>
</table>
</td>
<td width="20%">
<div align="left">
<table border="1" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" style="cursor:hand;font:bold 20px Verdana;color:white;text-align:center" onMouseover="event.srcElement.style.color='yellow'" onMouseout="event.srcElement.style.color='white'" onClick="result.innerText=0;results=''">C</td>
</tr>
</table>
</div>
<div align="left">
<table border="1" width="100%" cellspacing="0" cellpadding="0" height="81">
<tr>
<td width="100%" style="cursor:hand;font:bold 32px Verdana;color:white;text-align:center" onMouseover="event.srcElement.style.color='yellow'" onMouseout="event.srcElement.style.color='white'" onClick="calculateresult()">=</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
-----------------
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>简易计算器</title>
<script language="JavaScript1.2">
var results=''
var previouskey=''
var re=/(\/|\*|\+|-)/
var re2=/(\/|\*|\+|-){2}$/
var re3=/.+(\/|\*|\+|-).+/
var re4=/\d|\./
var re5=/^[^\/\*\+].+\d$/
var re6=/\./
function calculate(){
if (event.srcElement.tagName=="TD"){
if (event.srcElement.innerText.match(re4)&&previouskey=="=")
results=''
if (result.innerText.match(re3)&&event.srcElement.innerText.match(re)){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}
results+=event.srcElement.innerText
if (results.match(re2))
results=results.substring(0,results.length-2)+results.charAt(results.length-1)
result.innerText=results
}
}
function calculateresult(){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}
function pn(){
if (result.innerText.charAt(0)!='-')
result.innerText=results='-'+result.innerText
else if (result.innerText.charAt(0)=='-')
result.innerText=results=result.innerText*(-1)
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td width="100%" valign="top">
<table border="2" width="200" cellspacing="0" cellpadding="0" bgcolor="#000000" style="border-color:black" onClick="previouskey=event.srcElement.innerText">
<tr>
<td width="100%" bgcolor="#FFFFFF" id="result" style="font:bold 20px Verdana;color:black;text-align='right'">0</td>
</tr>
<tr>
<td width="100%" valign="middle" align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" style="font:bold 20px Verdana;color:white">
<tr>
<td width="80%" align="center">
<table border="1" width="100%" cellspacing="0" cellpadding="0" style="cursor:hand;font:bold 20px Verdana;color:white" onMouseover="if (event.srcElement.tagName=='TD')event.srcElement.style.color='yellow'" onMouseout="event.srcElement.style.color='white'" onselectStart="return false" onClick="calculate()" height="82">
<tr>
<td width="25%" align="center" height="17">7</td>
<td width="25%" align="center" height="17">8</td>
<td width="25%" align="center" height="17">9</td>
<td width="25%" align="center" height="17">/</td>
</tr>
<tr>
<td width="25%" align="center" height="19">4</td>
<td width="25%" align="center" height="19">5</td>
<td width="25%" align="center" height="19">6</td>
<td width="25%" align="center" height="19">*</td>
</tr>
<tr>
<td width="25%" align="center" height="19">1</td>
<td width="25%" align="center" height="19">2</td>
<td width="25%" align="center" height="19">3</td>
<td width="25%" align="center" height="19">-</td>
</tr>
<tr>
<td width="25%" align="center" height="19">0</td>
<td width="25%" align="center" height="19" onClick="pn();previouskey=1;event.cancelBubble=true">+/-</td>
<td width="25%" align="center" height="19">.</td>
<td width="25%" align="center" height="19">+</td>
</tr>
</table>
</td>
<td width="20%">
<div align="left">
<table border="1" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" style="cursor:hand;font:bold 20px Verdana;color:white;text-align:center" onMouseover="event.srcElement.style.color='yellow'" onMouseout="event.srcElement.style.color='white'" onClick="result.innerText=0;results=''">C</td>
</tr>
</table>
</div>
<div align="left">
<table border="1" width="100%" cellspacing="0" cellpadding="0" height="81">
<tr>
<td width="100%" style="cursor:hand;font:bold 32px Verdana;color:white;text-align:center" onMouseover="event.srcElement.style.color='yellow'" onMouseout="event.srcElement.style.color='white'" onClick="calculateresult()">=</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
gcbsh 2006-03-06
- 打赏
- 举报
good
patchclass 2006-03-06
- 打赏
- 举报
不错,还行,呵呵
aniude 2006-03-06
- 打赏
- 举报
顶了
x8086 2006-03-06
- 打赏
- 举报
呵呵。强
netpotRL 2006-03-06
- 打赏
- 举报
不错啊，重用性比较高
界面改漂亮点就行了~~
界面改漂亮点就行了~~
KimSoft 2006-03-06
- 打赏
- 举报
呵呵，也不错。
JK_10000 2006-03-06
- 打赏
- 举报
n年前也写了个更没含量的计算器
用起来还算方便
这几年倒是经常拿它实用
1.有多个输入屏，可以输入简单的变量
2.计算后会把原算式保留，算式输入错误，计算后发现只需改一下算式就行，而不用将整个算式重新输入
3.虽说没有返回键，但是在计算前,可以使用undo功能
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>算式</title>
</head>
<body>
<form name=frm onsubmit="return jisuan()">
变量: <input name="bianliang" size=40 value="">输入变量请在不同的变最之间用<font color=red>,</font>隔开，如<font color=red>a=1,b=2</font><br>
算式：<input name="suanshi" size=40 ><input type=submit value="开始计算" ><br>
结果：<input name="jieguo" size=40><br>
</form>
<script language=javascript>
function jisuan()
{
try
{
with(Math) //支持数学常用的数学函数
{
//JKhaveatest=frm.bianliang.value.match(/[\w,=\'\".]+/i); //除去变量定义里的非法字符
JKhaveatest=frm.bianliang.value;
if (JKhaveatest!="")
{
frm.bianliang.value=JKhaveatest;
eval("var "+JKhaveatest+";"); //定义变量
}
eval("frm.jieguo.value="+frm.suanshi.value); //计算值
}
if ((frm.suanshi.value.match(/^\(/i)+frm.suanshi.value.match(/\)$/i))!="()")
frm.suanshi.value="("+frm.suanshi.value+")"; //用括号括起算式
frm.suanshi.focus();
}
catch(exception){alert("算式有误");frm.suanshi.focus();}
return false;
}
</script>
</body>
</html>
用起来还算方便
这几年倒是经常拿它实用
1.有多个输入屏，可以输入简单的变量
2.计算后会把原算式保留，算式输入错误，计算后发现只需改一下算式就行，而不用将整个算式重新输入
3.虽说没有返回键，但是在计算前,可以使用undo功能
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>算式</title>
</head>
<body>
<form name=frm onsubmit="return jisuan()">
变量: <input name="bianliang" size=40 value="">输入变量请在不同的变最之间用<font color=red>,</font>隔开，如<font color=red>a=1,b=2</font><br>
算式：<input name="suanshi" size=40 ><input type=submit value="开始计算" ><br>
结果：<input name="jieguo" size=40><br>
</form>
<script language=javascript>
function jisuan()
{
try
{
with(Math) //支持数学常用的数学函数
{
//JKhaveatest=frm.bianliang.value.match(/[\w,=\'\".]+/i); //除去变量定义里的非法字符
JKhaveatest=frm.bianliang.value;
if (JKhaveatest!="")
{
frm.bianliang.value=JKhaveatest;
eval("var "+JKhaveatest+";"); //定义变量
}
eval("frm.jieguo.value="+frm.suanshi.value); //计算值
}
if ((frm.suanshi.value.match(/^\(/i)+frm.suanshi.value.match(/\)$/i))!="()")
frm.suanshi.value="("+frm.suanshi.value+")"; //用括号括起算式
frm.suanshi.focus();
}
catch(exception){alert("算式有误");frm.suanshi.focus();}
return false;
}
</script>
</body>
</html>
kangqin 2006-03-06
- 打赏
- 举报
不错不错,接分
DeluxWorld 2006-03-05
- 打赏
- 举报
学习来了~
梅雪香 2006-03-05
- 打赏
- 举报
呵~还行.
mingxuan3000 2006-03-05
- 打赏
- 举报
up
