<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script type="text/javascript">
function setNewNum(num){
var input = document.getElementById("input").getAttribute("value");
if(num == "c"){
input = "";
}else if(num == "del"){
input = input.slice(0,input.length-1);
}else{
input = input+num;
}
document.getElementById("input").setAttribute("value", input);
}
function getResult(){
var input = document.getElementById("input").getAttribute("value");
var re,r;
var reg = /\+|-|\*|\\/;
r = input.match(reg);
var a = input.split(r);
var first = Number(a[0]);
var second = Number(a[1]);
var result;
var sw = String(r);
switch(sw){
case "-":
result = first-second;
break;
case "+":
result = first+second;
break;
case "*":
result = first*second;
break;
case "\\":
result = first/second;
break;
default:
alert("addd");
}
document.getElementById("input").setAttribute("value", result);
}
</script>
<title>myCal</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
.style1{
width: 40;
color: blue;
}
.style2{
text-align: right;
}
</style>
</head>
<body>
<center>
<form action="MyCal.jsp" method="post">
<input id="input" class="style2" name="input" type="text" value="" readonly="readonly"><br/>
<input class="style1" name="c" type="button" value="c" onclick="setNewNum('c')"><input class="style1" name="del" type="button" value="del" onclick="setNewNum('del')"><input class="style1" name="chu" type="button" value="/" onclick="setNewNum('\\')"><input class="style1" name="cheng" type="button" value="*" onclick="setNewNum('*')"><br/>
<input class="style1" name="btn1" type="button" value="1" onclick="setNewNum(1)"><input class="style1" name="btn2" type="button" value="2" onclick="setNewNum(2)"><input class="style1" name="btn3" type="button" value="3" onclick="setNewNum(3)"><input class="style1" name="jian" type="button" value="-" onclick="setNewNum('-')"><br/>
<input class="style1" name="btn4" type="button" value="4" onclick="setNewNum(4)"><input class="style1" name="btn5" type="button" value="5" onclick="setNewNum(5)"><input class="style1" name="btn6" type="button" value="6" onclick="setNewNum(6)"><input class="style1" name="jia" type="button" value="+" onclick="setNewNum('+')"><br/>
<input class="style1" name="btn7" type="button" value="7" onclick="setNewNum(7)"><input class="style1" name="btn8" type="button" value="8" onclick="setNewNum(8)"><input class="style1" name="btn9" type="button" value="9" onclick="setNewNum(9)"><input class="style1" name="equal" type="button" value="=" onclick="getResult()"><br/>
</form>
</center>
</body>
</html>
非常简单的一个js计算器的小例子，只用到了js+html+css，所以功能很局限，只能简单的一次四则运算，还不支持异常判断！
闲话不多说，贴出代码供大家赏评！
相关推荐
标题中的“自己做的简单计算器例子”表明这是一个个人开发的计算器程序，可能是为了学习编程或理解计算逻辑而创建的。这个计算器可能包含基本的数学运算，如加、减、乘、除，也可能包括其他功能，如求平方根、百分比...
function Calculate(){ this.numclick=function(str){ if(contents=="0"&&str!="."){ contents=""; } if(contents!=""){ dd=contents.indexOf(".");... var qq=document.getElementById("show").value;...
在这个特定的例子中，我们有三个计算器：房贷计算器、公积金计算器和车贷计算器。这些工具通常用于帮助用户估算他们的贷款负担和还款计划。 首先，让我们深入了解一下JavaScript。JavaScript是一种轻量级的解释型...
在这个例子中，当用户点击“+”按钮时，JavaScript会获取当前显示屏上的数值（num1），然后清空显示屏，等待用户输入第二个数字。当用户按下回车键时，会获取新的输入值（num2）并执行加法运算，结果会显示在显示屏...
Bootstrap的JS组件通常包括模态框（Modal）、下拉菜单（Dropdown）、轮播图（Carousel）等，但在这个简单的计算器实例中，主要依赖的是HTML和CSS，以及一些基本的JavaScript交互。 总结来说，“响应式的网页简单版...
### JS网页版计算器的简单实现 #### 一、概述 本文档将详细介绍一个简单的JS网页版计算器的实现方法。此计算器能够完成基本的数学运算，包括加法、减法、乘法、除法以及数字输入等功能。对于学习前端开发尤其是...
总结，这个“js写的简单计算器”项目涉及到JavaScript的基础语法、数据类型、函数定义、事件监听、DOM操作以及错误处理等核心概念。通过实践这个项目，开发者可以巩固对JavaScript的理解，提升Web前端开发技能。
根据给定的文件信息，我们可以总结出以下关于“js实现网页计算器”的相关知识点： ### 1. HTML结构设计 在创建网页计算器时，HTML用于构建页面的基本结构。在这个例子中，我们看到`<html>`、`<head>`、`<body>`等...
`js`目录包含了JavaScript源码，可能是计算器的逻辑部分。而`.scss`文件需要经过编译才能被浏览器理解，这通常通过构建工具如Webpack或Gulp完成，它们会将`.scss`转换成`.css`并与其他资源打包在一起。 9. **index...
JavaScript文件（cal.js）将包含所有计算器的逻辑，包括按钮点击事件的处理、数字输入、运算符处理、结果显示等功能。在JavaScript中，可以通过添加事件监听器来响应用户的点击操作，而不是直接在HTML元素上写入`...
总结来说，这个Vuex的官方计算器例子通过增加表单组件，展示了如何在Vue.js应用中有效地管理表单数据和进行业务处理。通过学习这个例子，开发者可以更深入地理解Vuex的工作原理，提高在实际项目中的应用能力。同时，...
这种计算器通常由HTML、CSS和JavaScript（JS）这三种核心技术构建，其中HTML负责页面结构，CSS负责样式设计，而JavaScript则处理用户交互和计算逻辑。 在HTML部分，网页版计算器通常会包含多个按钮，每个按钮代表一...
这个计算器通常包括加、减、乘、除等基本功能，对于初学者来说，这是一个很好的实践项目，能够帮助他们理解和掌握JavaScript的基本语法和事件处理。 首先，我们来看HTML部分。HTML（HyperText Markup Language）是...
JavaScript计算器是一种常见的网页交互元素，它允许用户在浏览器中执行基本的数学运算，如加、减、乘、除和取余。在这个例子中，我们看到一个简单的JavaScript实现，包括两个输入框（num1和num2）用于输入数字，以及...
在“Jquery做的一个简单的计算器例子”中，我们可以了解到如何使用jQuery实现一个基本的计算功能。** 首先，jQuery的核心在于其选择器机制，它允许我们通过CSS样式选择器快速准确地选取DOM元素。例如，在创建计算器...
3. **JavaScript文件**：计算器的核心逻辑通常在JS文件（如`index.js`）中实现。这里会包含计算功能的函数，比如加减乘除、清除输入、存储历史记录等功能。事件监听器会调用这些函数，根据用户的操作更新显示结果。 ...
总的来说，这个"最nb的网页版多级计算器，纯Javascript"项目展示了JavaScript在网页开发中的强大功能，包括用户交互、逻辑处理、数学运算和界面更新等方面。它不仅是一个实用的工具，也是学习JavaScript和计算原理的...
**原生态JS计算器HTML+CSS+JS** ...这个简单的原生态JS计算器项目是学习前端开发基础和实践JavaScript逻辑的好例子。通过这个项目，你可以深入理解网页技术的工作原理，并为更复杂的交互式应用打下坚实的基础。
在高仿苹果计算器的例子中，它会列出所有页面的路径，使得小程序能够正确地导航到各个计算功能页面。此外，还可以通过配置主题色、导航栏样式等，来模仿苹果计算器的视觉效果。 3. **app.wxss**：这代表小程序的...
table { border-color:#0000FF; } tr { width:200px; height:30px; border-color:#0099FF; } td { text-align:center; height:100%; background-color:#CCFFCC; } input { width:50px;...}