HTML代码：
<!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>
<link href="CSS/Calculator.css" rel="stylesheet" type="text/css" />
<script>
var flag=0;
var first="";
var t="";
function clearresult(){
document.getElementById("result").value="0.";
first="";
document.getElementById("+").disabled=false;
document.getElementById("-").disabled=false;
document.getElementById("*").disabled=false;
document.getElementById("/").disabled=false;
t="";
first="";
flag="";
}
function backspace(){
if(t==""){
return null;
}else{
var m=document.getElementById("result").value;
var m1=m.substring(0,m.length-1);
document.getElementById("result").value=m1;
t=m1;
}
}
function resultNum(){
var second=parseFloat(document.getElementById("result").value);
switch(flag){
case 0:document.getElementById("result").value="0.";
break;
case 1:document.getElementById("result").value=first+second;
break;
case 2:document.getElementById("result").value=first-second;
break;
case 3:document.getElementById("result").value=first*second;
break;
case 4:document.getElementById("result").value=first/second;
break;
case 5:document.getElementById("result").value=first%second;
break;
}
first="";
t=document.getElementById("result").value;
flag=0;
document.getElementById("+").disabled=false;
document.getElementById("-").disabled=false;
document.getElementById("*").disabled=false;
document.getElementById("/").disabled=false;
document.getElementById("%").disabled=false;
}
function getNum(event){
var tt=document.getElementById(event.id).value;
t=t+tt;
document.getElementById("result").value=t;
}
function cal(event){
var sign=document.getElementById(event.id).value;
if(t==""){
return null;
}else{
if(sign=="+"){
flag=1;
}else if(sign=="-"){
flag=2;
}else if(sign=="*"){
flag=3;
}else if(sign=="/"){
flag=4;
}else if(sign=="%"){
flag=5;
}
first=parseFloat(document.getElementById("result").value);
document.getElementById("result").value="";
t="";
document.getElementById("+").disabled=true;
document.getElementById("-").disabled=true;
document.getElementById("*").disabled=true;
document.getElementById("/").disabled=true;
document.getElementById("/").disabled=true;
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="300" height="250" border="1" background="Images/1.png" align="center">
<tr>
<td height="52" colspan="3"><input name="result" type="text" id="result" value="0." disabled="true"/></td>
<td width="80"><input type="button" value="C" onclick="backspace();" id="C" class="btn"/></td>
<td width="80"><input type="button" value="CE" onclick="clearresult();" id="CE" class="btn"/></td>
</tr>
<tr>
<td width="80"><input type="button" value="1" onclick="getNum(this)" id="1" class="btn"/></td>
<td width="80"><input type="button" value="2" onclick="getNum(this)" id="2" class="btn"/></td>
<td width="80"><input type="button" value="3" onclick="getNum(this)" id="3" class="btn"/></td>
<td width="80" height="80"><input type="button" value="+/-" onclick="cal(this)" id="+/-" class="btn"/></td>
<td width="80" height="80"><input type="button" value="%" onclick="cal(this)" id="%" class="btn"/></td>
</tr>
<tr>
<td width="80"><input type="button" value="4" onclick="getNum(this)" id="4" class="btn"/></td>
<td width="80"><input type="button" value="5" onclick="getNum(this)" id="5" class="btn"/></td>
<td width="80"><input type="button" value="6" onclick="getNum(this)" id="6" class="btn"/></td>
<td width="80" height="80"><input type="button" value="+" onclick="cal(this)" id="+" class="btn"/></td>
<td width="80" height="80"><input type="button" value="-" onclick="cal(this)" id="-" class="btn"/></td>
</tr>
<tr>
<td width="80"><input type="button" value="7" onclick="getNum(this)" id="7" class="btn"/></td>
<td width="80"><input type="button" value="8" onclick="getNum(this)" id="8" class="btn"/></td>
<td width="80"><input type="button" value="9" onclick="getNum(this)" id="9" class="btn"/></td>
<td width="80" height="80"><input type="button" value="*" onclick="cal(this)" id="*" class="btn"/></td>
<td width="80" height="80"><input type="button" value="/" onclick="cal(this)" id="/" class="btn"/></td>
</tr>
<tr >
<td width="80"><input type="button" value="0" onclick="getNum(this)" id="0" class="btn"/></td>
<td width="80"><input type="button" value="." onclick="getNum(this)" id="." class="btn"/></td>
<td width="80"></td>
<td colspan="2" width="80" height="80" align="center"><input type="button" value="=" onclick="resultNum()" id="btn1" name="btn1" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Css代码：
@charset "utf-8";
/* CSS Document */
.btn{width:80px;
height:80px;
font-size: 30px;
color:#03F;
opacity:0.6;
}
.btn:hover{background-color:#0F0;}
#btn1{width:100%;
height:100%;
font-size:30px;
opacity:0.6;
}
.btn1:hover{background-color:#0F0;}
#result{width:100%;
height:100%;
font-size:30px;
opacity:0.6;}
#result:hover{background-color:#0F0;}
第一次学习Js一开始就让我们做一个计算器——头疼，经过参考网上各种代码方法，做了一个简单的计算器，仅供交流。
相关推荐
简易计算器，利用html+js实现，通过浏览器客户端进行编译实现，弹出窗口，进行选择计算。
在这个场景中，我们讨论的是使用JavaScript实现一个简单的计算器功能。这个功能通常包括基本的算术运算，如加、减、乘、除，以及可能的括号支持和清零操作。 首先，我们需要在HTML文件中创建计算器的用户界面。这...
js实现简易计算器功能
在实现计算器功能时，会用到JavaScript的数学运算符，如`+`（加）、`-`（减）、`*`（乘）、`/`（除）。例如，两个数相加的表达式是： ```javascript let result = num1 + num2; ``` 为了实现连续运算，我们可能...
模拟实现计算器功能，全js实现，功能强大！可以实现计算器的所以功能！
在JavaScript实现简单计算器的...以上就是使用JavaScript实现简单计算器的主要步骤和知识点。通过这个项目，你不仅能熟悉JavaScript的基本语法，还能深入理解DOM操作和事件处理，同时锻炼了问题解决和逻辑思维能力。
JavaScript是实现计算器功能的核心。在这个例子中，可以看到几个关键函数： - `setfocus()`：当页面加载完毕后，此函数可能用于将焦点设置到结果输入框，方便用户立即开始输入。 - `checkkey()`：此函数可能用于检测...
通过构建二叉表达式树并利用后序遍历来计算表达式的值，可以高效且准确地实现简易计算器的功能。此外，通过合理的设计与编码，还可以增加更多的特性，如支持更多类型的运算符、增强错误处理能力等。这种实现方式不仅...
在本主题中，我们将探讨如何使用Dreamweaver（DW）这个前端开发工具，结合JavaScript语言，来实现一个基本的计算器功能。Dreamweaver是Adobe公司出品的一款强大的Web设计和开发工具，它支持代码编辑、可视化设计以及...
本项目的目标是使用原生JavaScript实现一个简单的在线计算器。 #### 二、技术选型与实现原理 **1. 技术选型：** - **HTML:** 用于构建页面结构。 - **CSS:** 用于美化页面样式。 - **JavaScript:** 用于实现...
本主题聚焦于如何使用JavaScript实现一个具有时间功能的网页计算器。以下将详细阐述实现这个功能所需的关键知识点： 1. **HTML结构**： 首先，我们需要创建一个HTML页面来展示计算器的界面。这通常包括数字按钮、...
在开发Web应用时，后端接口的构建是关键一环，尤其对于实现一个简单的计算器功能。本主题聚焦于使用“一般参数传递方式”来创建一个能够处理加、减、乘、除运算的后端接口。这里我们将深入探讨如何实现这个功能，并...
在本教程中，我们将探讨如何使用JavaScript实现一个简易计算器，涵盖基本的四则运算、小数点、回退、清零等核心功能。这个项目旨在帮助开发者熟练掌握JavaScript编程技巧，包括事件处理、异常处理以及页面元素交互。...
在本示例中，我们将探讨如何使用Vue.js框架来实现一个简单的计算器功能。Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。以下是实现这个计算器的关键步骤和知识点： 1. **HTML布局**： HTML部分是...
利用VS2010实现的一个简易计算器，实现了计算器的基本功能
在这个项目中，我们将探讨如何使用 jQuery 来实现一个简易计算器，这将涉及到以下几个核心知识点： 1. **jQuery 选择器与 DOM 操作**：在创建计算器时，我们需要获取用户界面中的按钮元素，如数字、运算符等。...
6. **测试和优化**：运行项目，确保计算器功能正常。可以考虑添加错误检查，如除数为零的情况，以及优化用户体验，如按键反馈和清除输入功能。 完成以上步骤后，我们就成功地用Vue.js构建了一个简易计算器。这个...
使用 JavaScript 编写的科学计算器（附源代码） 项目：使用 JavaScript 编写的科学计算器（附源代码） 科学计算器是 HTML5、CSS 和 JavaScript 中的一个简单项目。该项目用于解决数字的数学计算。您可以在此项目...
标题中的“一个用JS做的简易计算器”表明这是一个使用JavaScript编程语言实现的基本计算器应用。JavaScript，通常简称为JS，是Web开发中广泛使用的客户端脚本语言，用于为网页添加交互性功能。在这个案例中，开发者...