JavaScript 在线计算器
<!DOCTYPE HTML>
<html>
<body>
<p>JS计算器</p>
<p>快捷键：等于（回车）；清空（ESC）；小键盘</p>
<style><!--
.tdBtn input
{
width:50px;
font-weight:bold;
margin:1px;
font-size:16px;
}
.tdExtBtn input
{
height:60px;
line-height:60px;
}
--></style>
<script type="text/javascript">// <![CDATA[
function getObj(id)
{
return document.getElementById(id);
}
function pageLoad()
{
var inputs = document.getElementById('trCalc').getElementsByTagName('input');
for(var i=0; i<inputs.length; i++)
{
if(inputs[i].type == 'button')
{
inputs[i].onclick = btn_onclick;
}
}
getObj('txt').focus();
getObj('txt').value = '0';
}
function btn_onclick()
{
var txt = getObj('txt');
showText(this.value);
}
function keyDown(evt)
{
evt = evt || window.event;
switch(evt.keyCode)
{
case 13:
showText('等于');
evt.returnValue = false;
break;
case 27:
showText('清空');
evt.returnValue = false;
break;
case 107:
showText('+');
evt.returnValue = false;
break;
case 109:
showText('-');
evt.returnValue = false;
break;
case 106:
showText('*');
evt.returnValue = false;
break;
case 111:
showText('/');
evt.returnValue = false;
break;
case 110:
showText('.');
evt.returnValue = false;
break;
default:
if(txt.value == '0')
{
txt.value = '';
}
break;
}
}
var value = 0;
var op = '';
function showText(str)
{
var spanOp = getObj('spanOp');
if('0123456789.'.indexOf(str) != -1)
{
if(txt.value == '0')
{
txt.value = '';
}
txt.value += str;
return;
}
if(str == '+/-')
{
if(txt.value.indexOf('-') == 0)
{
txt.value = txt.value.substr(1);
}
else
{
txt.value = '-' + txt.value;
}
return;
}
if('+-*/'.indexOf(str) != -1)
{
if(txt.value == '0' && str == '/')
{
alert('除零错误！');
return;
}
eval('value ' + op + '= ' + txt.value);
txt.value = '0';
op = str;
spanOp.innerHTML = op;
return;
}
if(str == '等于' || str == '=')
{
if(op != '')
{
eval('value ' + op + '= ' + txt.value);
op = '';
spanOp.innerHTML = '';
}
txt.value = value;
}
if(str == '清空')
{
txt.value = '0';
value = 0;
op = '';
spanOp.innerHTML = '';
}
}
// ]]></script>
<div>
<table>
<tbody>
<tr>
<td colspan="2"><input id="txt" style="font-size: 23px; font-weight: bold; color: blue; text-align: right; ime-mode: disabled; width: 255px;" onkeydown="keyDown(event);" type="text" /> <span id="spanOp"> </span></td>
</tr>
<tr id="trCalc">
<td class="tdBtn">
<input type="button" value="7" />
<input type="button" value="8" />
<input type="button" value="9" />
<input type="button" value="+" /><br />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="-" /><br />
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="*" /><br />
<input type="button" value="0" />
<input type="button" value="+/-" />
<input type="button" value="." />
<input type="button" value="/" />
</td>
<td class="tdExtBtn">
<input type="button" value="清空" /><br />
<input type="button" value="等于" />
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
pageLoad();
</script>
</body>
</html>
相关推荐
在JavaScript计算器项目中，CSS可以用来设置计算器的外观，包括按钮的大小、颜色、边框、间距，以及显示屏的样式等。通过选择器（如ID选择器、类选择器）和盒模型属性（如margin、padding、border），可以精确地调整...
在这个特定的项目中，“Extjs 计算器 javascript计算器”是利用ExtJS的XTemplate功能创建的一个模拟Windows简单计算器的Web应用。XTemplate是ExtJS提供的一种模板引擎，用于动态渲染数据到HTML元素中，使得我们可以...
JavaScript计算器代码是一个基础的编程项目，它展示了如何使用JavaScript实现一个简单的计算器功能。在这个项目中，我们主要会涉及以下几个JavaScript编程知识点： 1. **DOM操作**：JavaScript与HTML交互的关键在于...
html编写网页使用计算器 语言：javascript
JavaScript计算器源代码是一种基于Web的计算工具，使用JavaScript编程语言实现。JavaScript是一种广泛应用于客户端浏览器的脚本语言，它能够动态地更新网页内容，提供交互性的用户体验。在本例中，我们将深入探讨...
采用Javascript写成，可跨平台运行。无需WEB服务器，可以直接在浏览器上运行，支持小数运算。
JavaScript计算器是一种常见的网页交互元素，它允许用户在浏览器中执行基本的数学运算，如加、减、乘、除和取余。在这个例子中，我们看到一个简单的JavaScript实现，包括两个输入框（num1和num2）用于输入数字，以及...
HTML+JavaScript计算器是一种基于网页的计算工具，利用HTML（超文本标记语言）构建用户界面，JavaScript处理用户交互和计算逻辑。在这个项目中，HTML用于创建计算器的布局和按钮，而JavaScript则赋予这些按钮功能，...
【CSS+JavaScript计算器实例】是一种基于网页的交互式计算工具，它利用了两种核心技术：层叠样式表（CSS）和JavaScript。CSS主要负责计算器的视觉设计，包括布局、颜色、字体等元素，使得计算器界面美观易用。而...
项目：带有源代码的JavaScript 计算器 这个 javascript 计算器项目是一个简单的 HTML5、CSS 和 JavaScript 项目。在这里，计算器的功能与现实生活中的简单计算器相同。该项目用于解决数字的数学计算。您可以在此...
JavaScript计算器是一种交互式的网页应用程序，它使用JavaScript编程语言来实现基本的数学运算功能。这个项目是为初学者设计的，旨在帮助他们更好地理解和实践JavaScript语言，特别是DOM操作、事件处理和函数等方面...
JavaScript计算器源代码学习是Web开发中的一个基础但重要的实践项目，它可以帮助开发者深入理解JavaScript语言的基本语法、事件处理以及DOM操作。在这个项目中，我们将探讨以下几个关键知识点： 1. **HTML结构**：`...