在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>
分享到：
相关推荐
用javascript编程语言编写的简易计算器，仅包含+-*/运算
Javascript、CSS的简易科学计算器
简易计算器java实训报告.pdf
基于BootStrap JavaScript语言简易计算器的实现.pdf
javascript实现简易计算器的代码_.docx
利用JavaScript简易计算器，北大青鸟javascript作业题
是一个含javascript的简易计算器。
一个用JS做的简易计算器,不是很完整，有兴趣的朋友可扩展一下
自己用html写的网页版简易计算器，可以实现简单的加，减，乘，除，求开方，求次方计算，里面内嵌javascript，需要的可以下载看看。
用javascript做简单计算器，实现加减乘除的简单运算。
基于JavaScript的网络版计算器，实现基本的计算功能，具体介绍可以看我的文章：JavaScript||简易版计算器实现
下面小编就为大家带来一篇javascript实现简易计算器的代码小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html实现的一个简易计算器,使用了js、css，可用作学习之用。
简单的 HTML 计算器源码，采用 逆波兰表达式 实现！能计算加减乘除，整体界面仿自 MIUI 计算器。代码含有详细注释，通俗易懂！
simply-calculator-vuejs 一个用vue.js实现简易计算器
本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>计算器</title> &...
主要为大家详细介绍了javascript编写简易计算器的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
我的第一个javascript小程序，实现简单计算器
用javascript实现的一个计算器，
JavaScript实现简易加法计算器 本文实例为大家分享了JavaScript实现加法计算器的具体代码，供大家参考，具体内容如下 1.页面布局: 2.还需要在点击计算按钮之后在页面上显示计算结果 <html> <head> ...