最近才学JS,做了个简单的网页计算器，除了js部分属性的使用，还接触了下能触发键盘的event事件，呵呵，觉得挺有意义的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 计算器 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
var result = "";
var view ;
var count = 1;
var equal;
function addNum(num){
view = document.getElementById("view");
equal = document.getElementById("equal");
if(count % 2 == 0){
result = "";
view.setAttribute("value","0");
count = 1;
}
result = result+""+num;
view.setAttribute("value",result);
equal.focus();
}
function getResult(){
if(view!=null){
result = result+" = "+eval(result);
view.setAttribute("value",result);
count++;
}
}
//触发键盘上的enter键，在火狐浏览器下不能触发键盘按钮，遗憾。
function onkeypress()
{
if ( event.keyCode=='13' )
{
getResult();
}
}
//-->
</SCRIPT>
<style>
input {
height:30px;
width:60px;
}
</style>
</HEAD>
<BODY>
<table align="center" width="30%" style="border-left:2px solid #000;border-top:2px solid #000;border-right:2px solid #000;border-bottom:2px solid #000;">
<tr>
<td colspan="6" bgcolor="#000099" height="30px" align="center">
<font color="#ffffff"><b>计算器</b></font>
</td>
<tr>
<tr>
<td colspan="4">
<input id="view" size="60" style="width:460px;text-align:right;" value="0"/>
</td>
<td >
<input id="equal" type="button" value="=" onclick="getResult();"/>
</td>
<tr>
<tr>
<td>
<input id="1" type="button" value="1" onclick="addNum(1);"/>
</td>
<td>
<input id="2" type="button" value="2" onclick="addNum(2);"/>
</td>
<td>
<input id="3" type="button" value="3" onclick="addNum(3);"/>
</td>
<td>
<input id="4" type="button" value="4" onclick="addNum(4);"/>
</td>
<td>
<input id="+" type="button" value="+" onclick="addNum('+');"/>
</td>
<tr><tr>
<td>
<input id="5" type="button" value="5" onclick="addNum(5);"/>
</td>
<td>
<input id="6" type="button" value="6" onclick="addNum(6);"/>
</td>
<td>
<input id="7" type="button" value="7" onclick="addNum(7);"/>
</td>
<td>
<input id="8" type="button" value="8" onclick="addNum(8);"/>
</td>
<td>
<input id="-" type="button" value="-" onclick="addNum('-');"/>
</td>
<tr><tr>
<td>
<input id="9" type="button" value="9" onclick="addNum(9);"/>
</td>
<td>
<input id="0" type="button" value="0" onclick="addNum(0);"/>
</td>
<td>
<input id="dot" type="button" value="." onclick="addNum('.');"/>
</td>
<td>
<input id="/" type="button" value="/" onclick="addNum('/');"/>
</td>
<td>
<input id="*" type="button" value="*" onclick="addNum('*');"/>
</td>
<tr>
</table>
</BODY>
</HTML>
分享到：
相关推荐
【标题】"基于jQuery/JS的简易网页计算器"揭示了这个项目的核心——使用JavaScript和jQuery技术来实现一个基本的在线计算功能。JavaScript是一种在客户端浏览器上运行的脚本语言，常用于网页交互和动态效果的实现，...
使用js + html 实现的简单的网页计算器，可以实现加、减、乘、除复杂运算，二进制、八进制、十六进制转换、sin、cos、tan三角函数运算、acos、atan、asin反三角函数运算、开平方、log、随机数生成、指数运算、四舍五...
学习这个简易网页计算器项目，你可以了解到Web前端开发的基本流程，包括如何用HTML构建页面结构，用JavaScript处理交互逻辑，以及用CSS美化界面。此外，你还可以深入研究如何优化用户体验，如添加错误处理机制，支持...
标题中的“扁平风格加减乘除网页计算器js代码”指的是一个使用JavaScript实现的轻量级计算器应用，设计上采用了现代流行的扁平化设计风格，适用于网页和移动设备。这款计算器能够执行基本的数学运算，包括加法、减法...
html编写网页使用计算器 语言：javascript
网页计算器是一种基于HTML和JavaScript实现的交互式工具，它允许用户在浏览器中执行简单的数学运算。这个源码可能包含HTML文件、CSS样式表以及JavaScript脚本，这些元素共同构成了一个功能完备的计算器界面和计算...
在这个案例中，"HTML5实现网页计算器"是一个利用HTML5、CSS3和JavaScript技术创建的交互式网页应用。这个计算器不仅具备基本的计算功能，还特别支持括号运算，这意味着它可以处理复杂的数学表达式。此外，它还具有对...
本项目"基于JavaScript脚本开发的网页计算器"旨在实现一个基本的网页计算器，提供与标准桌面计算器类似的功能，如加、减、乘、除等基本运算。 在JavaScript中，我们可以利用DOM（Document Object Model）来操作HTML...
【标题】"js简洁实用的网页计算器代码"指的是一个基于JavaScript实现的网页计算器程序，它提供了基本的数学计算功能，并且设计简洁、易于使用。在网页开发中，这样的计算器可以作为一个交互元素，增强用户在网站上的...
本文将详细介绍一个简单的HTML网页计算器的实现方法。此计算器能够完成基本的数学运算，包括加法、减法、乘法和除法。该计算器的实现涉及到了HTML用于构建界面、JavaScript用于处理逻辑两大部分。接下来我们将对这个...
HTML（HyperText Markup Language）是用于创建网页的标准标记语言，它是网页开发的基础，可以与CSS和JavaScript一起使用，以实现视觉和交互效果。本案例是一个简单的HTML计算器的实现，旨在帮助初学者理解HTML的基本...
在这个“蓝色简洁的网页计算器js代码”项目中，我们看到开发者使用JavaScript语言构建了一个功能齐全且设计简洁的计算器。JavaScript是前端开发的重要语言，它使得网页具有动态交互性。 首先，`index.html`是网页的...
在本项目中，“html+css+js实现简易计算器.zip”是一个包含HTML、CSS和JavaScript代码的压缩包，用于创建一个简单的在线计算器应用。这个计算器能够执行基本的数学运算，如加、减、乘、除，为初学者展示了前端开发中...
在这个“Html+CSS+JS网页计算器”项目中，我们将探讨如何使用这三种语言来设计一个功能完备的在线计算器。 首先，HTML（HyperText Markup Language）是网页内容的结构框架。在创建网页计算器时，我们需要定义各种...
一款简单好看的html5网页计算器代码，精美的html5 css3计算器样式特效。 js代码 [removed] function s(v) { document.getElementById('res').value = v } function a(v) { document.getElementById('res...
网页版简易计算器是一种基于HTML、CSS和JavaScript技术构建的在线计算工具，主要目的是提供一个轻量级的界面，用户可以通过浏览器进行基本的数学运算。在这个项目中，HTML用于定义页面结构，CSS负责样式设计，而...
JavaScript网页计算器是基于Web浏览器的一种交互式计算工具，利用JavaScript编程语言实现，可以在网页上进行基本的数学运算。本文将详细介绍如何使用JavaScript构建一个具备显示当前时间、清零、加减乘除取模运算...
在IT行业中，JavaScript（js）和HTML是构建Web应用程序的基础技术。当提到“计算器代码 js + html”，我们指的是使用这两种语言来创建一个交互式的在线计算工具。在这个特定的例子中，我们有三个计算器：房贷计算器...
HTML简易计算器源代码.zip是一个包含一个简单HTML计算器的项目，主要使用了逆波兰表达式算法来处理计算逻辑，同时结合HTML、CSS和JavaScript技术来构建用户界面和交互功能。这个计算器的设计灵感来源于MIUI计算器，...
在线网页计算器是一种方便用户在浏览器上执行简单或复杂计算的工具，无需安装任何软件，只需通过互联网连接即可使用。本文将深入探讨一个特别设计的"支持键盘输入的在线网页计算器"，它包含了防止被非法下载的安全...