这使用HTML中的js写的网页版计算器这是设计内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.STYLE{
text-align:center;
}
</style>
<script>
var initData="";
var num1=0;
var num2=0;
var lastop="";//保存最后一个操作符
//获取数字
function getNum(num){
initData+=num;
showData(initData);
}
//获得操作符
function getOp(op){
lastop=op;
//保存第一个数num1=0-parseFloat(initData);
num1=parseFloat(initData);//转换并保存
//重新初始化
initData=""
}
function getBt(){
initData=0-parseFloat(initData);
showData(initData);
}
//获得结果
function getResult(){
//第一个数num1,已保存
//第二个数
num2=parseFloat(initData);
//符号lastop
//计算
var result=calc(num1,num2,lastop);
//显示结果
showData(result);
}
//计算方法
function calc(num1,num2,op){
var result=0;
switch(op){
case'+':result=num1 + num2;break;
case'-':result=num1 - num2;break;
case'*':result=num1 * num2;break;
case'/':if(num2==0) return;
else result=num1 / num2;break;
case'%':result=num1%num2;break;
}
return result;
}
function butClear(){
initData="";
num1=0;
lastop="";
num2=0;
result=0;
showData(0);
}
function retu(){
initData="";
num1=0;
lastop="";
num2=0;
result=0;
showData(0);
}
function butCe(){
var c=initData.substring(0,initData.length-1);
initData=(c);
showData(c);
}
//显示数据的方法
function showData(data){
document.getElementById("result").value=data;
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="369" height="195" border="1" bgcolor="#FFCCFF">
<tr>
<td colspan="3" class="STYLE">
<input type="text" name="result" id="result" value=""/>
</td>
<td width="65" class="STYLE">
<input type="button" name="but1" id="but1" value=" C " onclick="butClear()"/>
</td>
<td width="73" class="STYLE">
<input type="button" name="but2" id="but2" value=" CE " onclick="butCe()"/>
</td>
</tr>
<tr>
<td width="67" class="STYLE">
<input type="button" name="but3" id="but3" value=" 7 "onclick="getNum('7')" />
</td>
<td width="66" class="STYLE">
<input type="button" name="but4" id="but4" value=" 8 "onclick="getNum('8')"/>
</td>
<td width="64" class="STYLE">
<input type="button" name="but5" id="but5" value=" 9 "onclick="getNum('9')"/>
</td>
<td class="STYLE">
<input type="button" name="but6" id="but6" value="+/-" onclick="getBt()"/>
</td>
<td class="STYLE">
<input type="button" name="but7" id="but7" value=" % " onclick="getOp('%')"/>
</td>
</tr>
<tr>
<td class="STYLE">
<input type="button" name="but8" id="but8" value=" 4 " onclick="getNum('4')"/>
</td>
<td class="STYLE">
<input type="button" name="but9" id="but9" value=" 5 "onclick="getNum('5')"/>
</td>
<td class="STYLE">
<input type="button" name="but10" id="but10" value=" 6 "onclick="getNum('6')"/>
</td>
<td class="STYLE">
<input type="button" name="but11" id="but11" value=" + " onclick="getOp('+')"/>
</td>
<td class="STYLE">
<input type="button" name="but12" id="but12" value=" - " onclick="getOp('-')"/>
</td>
</tr>
<tr>
<td class="STYLE">
<input type="button" name="but13" id="but13" value=" 1 " onclick="getNum('1')" />
</td>
<td class="STYLE">
<input type="button" name="but14" id="but14" value=" 2 " onclick="getNum('2')"/>
</td>
<td class="STYLE">
<input type="button" name="but15"id="but15" value=" 3 " onclick="getNum('3')"/>
</td>
<td class="STYLE">
<input type="button" name="but16" id="but16" value=" * " onclick="getOp('*')" />
</td>
<td class="STYLE">
<input type="button" name="but17" id="but17" value=" / " onclick="getOp('/')"/>
</td>
</tr>
<tr>
<td class="STYLE">
<input type="button" name="but18" id="but18" value=" 0 "onclick="getNum('0')"/>
</td>
<td class="STYLE">
<input type="button" name="but19" id="but19" value=" . " onclick="getNum('.')"/>
</td>
<td> </td>
<td class="STYLE">
<input type="button" name="but20" id="but20" value=" = " onclick="getResult()"/>
</td>
<td class="STYLE">
<input type="button" name="but21" id="but21" value="返回" onclick="retu()" />
</td>
</tr>
</table>
</form>
</body>
</html>
分享到：
相关推荐
【标题】"基于jQuery/JS的简易网页计算器"揭示了这个项目的核心——使用JavaScript和jQuery技术来实现一个基本的在线计算功能。JavaScript是一种在客户端浏览器上运行的脚本语言，常用于网页交互和动态效果的实现，...
使用ts开发网页计算器，实现自动计算，及界面的自动绘制，依赖库如下： 1. browserify 为网页浏览器提供模块加载环境。 2. lite-server 提供简易的web服务，自动将项目中的内容发布到web服务器中，启动时自动打开...
使用js + html 实现的简单的网页计算器，可以实现加、减、乘、除复杂运算，二进制、八进制、十六进制转换、sin、cos、tan三角函数运算、acos、atan、asin反三角函数运算、开平方、log、随机数生成、指数运算、四舍五...
简单网页计算器 数字1: 数字2: <option value="add">+ <option value="subtract">- * <option value="divide">/ 计算 ``` 接下来，我们转向`calculator.php`文件，这是整个计算器的核心。在...
本项目"基于JavaScript脚本开发的网页计算器"旨在实现一个基本的网页计算器，提供与标准桌面计算器类似的功能，如加、减、乘、除等基本运算。 在JavaScript中，我们可以利用DOM（Document Object Model）来操作HTML...
在线网页计算器是一种方便用户在浏览器上执行简单或复杂计算的工具，无需安装任何软件，只需通过互联网连接即可使用。本文将深入探讨一个特别设计的"支持键盘输入的在线网页计算器"，它包含了防止被非法下载的安全...
网页计算器是基于DHTML（动态超文本标记语言）技术创建的一个在网页上实现的计算器程序。DHTML是一种将HTML、层叠样式表（CSS）和JavaScript结合起来实现动态效果的技术。它允许网页开发者创建动态的、交互性强的...
【标题】"js简洁实用的网页计算器代码"指的是一个基于JavaScript实现的网页计算器程序，它提供了基本的数学计算功能，并且设计简洁、易于使用。在网页开发中，这样的计算器可以作为一个交互元素，增强用户在网站上的...
在这个特定的项目中，“ASP.NET网页计算器”是一个基于该技术实现的简单在线计算器。这个计算器可能是一个基本的HTML界面，结合了JavaScript或jQuery进行前端交互，而后端则使用C#或VB.NET作为编程语言，通过ASP.NET...
**JSP网页计算器详解** JSP（JavaServer Pages）是一种基于Java的技术，用于创建动态、交互式的Web应用程序。它允许开发者将HTML代码与Java代码相结合，以生成动态内容。在这个"JSP网页计算器"项目中，我们将探讨...
下面我们将详细介绍如何创建这样一个网页计算器。 1. **HTML基础** HTML是网页内容的基础，用于定义页面结构。在这个计算器中，我们需要创建一个包含数字按钮、运算符按钮和显示区域的布局。可以使用`<input>`元素...
标题中的“扁平风格加减乘除网页计算器js代码”指的是一个使用JavaScript实现的轻量级计算器应用，设计上采用了现代流行的扁平化设计风格，适用于网页和移动设备。这款计算器能够执行基本的数学运算，包括加法、减法...
【标题】"Calculator【纯JavaScript实现的网页计算器】"是一个基于Web的项目，它使用JavaScript这一客户端脚本语言，为用户提供了类似传统桌面计算器的功能。这个项目的核心目标是利用JavaScript的强大功能，在网页...
转向网页计算器，我们可以利用ASP.NET框架，它允许开发者创建交互式的Web应用。在这种情况下，HTML、CSS和JavaScript用于构建用户界面，而C#则在服务器端处理请求和计算。我们可以使用ASP.NET的Web Forms或MVC...
本主题聚焦于如何使用JavaScript实现一个具有时间功能的网页计算器。以下将详细阐述实现这个功能所需的关键知识点： 1. **HTML结构**： 首先，我们需要创建一个HTML页面来展示计算器的界面。这通常包括数字按钮、...
在这个"使用struts1实现一个简单的网页计算器"的例子中，我们将深入理解Struts1的核心概念和工作流程。 首先，我们需要了解Struts1的基础架构。在MVC模式中，模型（Model）处理业务逻辑，视图（View）负责展示数据...
【基于Java和JSP的网页计算器】 网页计算器是一种利用网页技术实现基本数学运算的应用，它通常由HTML、CSS和JavaScript构建前端界面，而后端则通过Java和JSP处理用户输入的计算请求。在这个项目中，我们将深入探讨...