<!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写的计算器,优美的js写法,可供学习和使用
JavaScript简单计算器程序是一种基于Web的计算工具，利用HTML、CSS和JavaScript这三种核心技术来实现。在本项目中，JavaScript主要用于处理逻辑计算，HTML构建用户界面，而CSS则用于美化和布局，使计算器在浏览器中...
学习了javascript ，这个代码是使用javascript来做一个简单的计算器，可以实现简单的额加减乘除的计算
总的来说，这个JavaScript计算器项目涵盖了前端开发的基本技能，包括JavaScript编程、DOM操作、事件处理、以及HTML和CSS的使用。对于初学者来说，这是一个很好的实践项目，可以帮助他们深入理解这些基础知识并提高...
JavaScript网页计算器是基于Web浏览器的一种交互式计算工具，利用JavaScript编程语言实现，可以在网页上进行基本的数学运算。本文将详细介绍如何使用JavaScript构建一个具备显示当前时间、清零、加减乘除取模运算...
JavaScript网页版计算器是一种基于Web的计算工具，利用JavaScript这门客户端脚本语言实现。JavaScript，简称JS，是由 Netscape 公司开发的，主要用于增强网页的交互性，它被广泛应用于网页和应用开发，实现动态内容...
javascript实现计算器的源码 本例是一个html文件，可使用
JavaScript编写科学计算器是一种常见的Web开发任务，用于创建交互式的用户界面，为用户提供各种数学运算功能。在这个项目中，我们将深入探讨如何使用JavaScript语言构建一个功能丰富的科学计算器，并将其内嵌在HTML...
首先，JavaScript计算器的核心是事件监听和处理。它通过监听用户在HTML元素（如按钮）上的点击事件，来捕获用户的输入和操作。例如，每个数字按钮和运算符按钮都有对应的点击事件，当用户点击这些按钮时，JavaScript...
在本文中，我们将深入探讨JavaScript计算器的设计与实现，以及它在Web开发中的重要性。 首先，JavaScript是一种解释型的、跨平台的脚本语言，常用于网页和网络应用的动态内容创建。它在浏览器环境中运行，可以处理...
用javascript编程语言编写的简易计算器，仅包含+-*/运算
在JavaScript计算器项目中，CSS可以用来设置计算器的外观，包括按钮的大小、颜色、边框、间距，以及显示屏的样式等。通过选择器（如ID选择器、类选择器）和盒模型属性（如margin、padding、border），可以精确地调整...
完整功能的JavaScript写的计算器，供JavaScript初学者参考。
<title>JavaScript计算器 <!-- 数字按钮和运算符按钮在这里 --> ``` 接下来，我们将在JavaScript中处理这些按钮的点击事件。首先，我们需要获取到这些元素，可以使用`document.getElementById`或`...
JavaScript 实现简单计算器 本文将对 JavaScript 实现简单计算器的原理和实现过程进行详细的解释。 计算器的基本概念 在开始实现计算器之前，我们需要了解计算器的基本概念。计算器是一种 electronic device 或 ...
需求：制作web版计算器，要求实现+-*%和平方，开方。 2.0版：修复归零的问题 3.0版：支持正负数； 4.0版：修复多个多个运算符号导致不能计算的bug; 5.0版： 多个小数点的bug， 自然数e的问题， 0.1，0.2，0.04等...