当前位置：文档之家 › 网站建设如何用js实现简单计算器？

网站建设如何用js实现简单计算器？

  • 格式：doc
  • 大小：56.00 KB
  • 文档页数：2

下载文档原格式

  / 2

合集下载

javascript代码实现简易计算器

javascript代码实现简易计算器

javascript代码实现简易计算器本⽂实例为⼤家分享了javascript实现简易计算器的具体代码，供⼤家参考，具体内容如下编辑了⼏个⼩时研发了⼀个简易好理解的计算器。

不停改Bug，终于改好了。

这是样式这是Css部分<style>#box {background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);width: 500px;height: 420px;margin: auto;margin-top: 200px;position: relative;}.reckon {width: 280px;height: 200px;background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);;position: absolute;top: 100px;left: 100px;border: 5px solid #2a2b2c}#input1 {background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);border: none;width: 220px;height: 8px;float: right;margin-top: 10px;margin-right: 20px;outline: none;padding: 10px}ul li {float: left;list-style: none;margin: 4px 2px;border-radius: 3px;background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);box-shadow: 2px 2px #ccc;color: #fff;font-weight: "楷体";width: 50px;height: 30px;text-align: center;line-height: 30px;}ul {margin-top: 5px;}ul li:hover {opacity: 0.7;}</style>这是HTML部分<div id="box"><div class="reckon" id="reckon"><input type="text" id="input1"><ul><li class="num">7</li><li class="num">8</li><li class="num">9</li><li class="opcr">+</li><li class="num">4</li><li class="num">5</li><li class="num">6</li><li class="opcr">- </li><li class="num">1</li><li class="num">2</li><li class="num">3</li><li class="opcr">*</li><li class="num">0</li><li id="returnZero">C</li><li id="resule">=</li><li class="opcr">/</li></ul></div></div>/* 定义两个标签来存放符号跟第⼀个值*/<input type="text" id="text1" style="display:none"><input type="text" id="per" style="display:none">html部分的话就是吧所有数字定义为⼀个class名字，把所有运算符号定义为⼀个class 以及定义两个input来存放运算符<script>lis = document.querySelectorAll("#box ul .num")//获取所有的数字opcr = document.querySelectorAll("#box ul .opcr")//获取运算符for (var i = 0; i < lis.length; i++) { //遍历所有的数字lis[i].onclick = function () {input1.value += parseInt(this.innerHTML)//点击input1显⽰}}//遍历所有的运算符for (let i = 0; i < opcr.length; i++) {opcr[i].onclick = function () {if (text1.value == "") {//当存放第⼀个值为空时候text1.value = input1.value//存放第⼀个值input1.value = "" //input框⾥的值为空per.value = this.innerHTML; //存放符号的值为空} else {text1.value = eval(text1.value + per.value + input1.value)//不是空的时候计算per.value = this.innerHTML;//存放符号的值为点击的值input1.value = ""//input框⾥的值为空}}}//等于resule.onclick = function () {input1.value = eval(text1.value + per.value + input1.value)//计算⾥⾯的值 per.value = "" //清空存放per的值text1.value = ""//input框⾥的值为空}//点击清空所有returnZero.onclick = function () {input1.value = ""per.value = ""text1.value = ""}</script>完整部分<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"><title>简易计算器</title><style>#box {background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); width: 500px;height: 420px;margin: auto;margin-top: 200px;position: relative;}.reckon {width: 280px;height: 200px;background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); ;position: absolute;top: 100px;left: 100px;border: 5px solid #2a2b2c}#input1 {background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);border: none;width: 220px;height: 8px;float: right;margin-top: 10px;margin-right: 20px;outline: none;padding: 10px}ul li {float: left;list-style: none;margin: 4px 2px;border-radius: 3px;background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); box-shadow: 2px 2px #ccc;color: #fff;font-weight: "楷体";width: 50px;height: 30px;text-align: center;line-height: 30px;}ul {margin-top: 5px;}opacity: 0.7;}</style></head><body><div id="box"><div class="reckon" id="reckon"><input type="text" id="input1"><ul><li class="num">7</li><li class="num">8</li><li class="num">9</li><li class="opcr">+</li><li class="num">4</li><li class="num">5</li><li class="num">6</li><li class="opcr">- </li><li class="num">1</li><li class="num">2</li><li class="num">3</li><li class="opcr">*</li><li class="num">0</li><li id="returnZero">C</li><li id="resule">=</li><li class="opcr">/</li></ul></div></div><input type="text" id="text1" style="display:block"><input type="text" id="per" style="display:block"><script>lis = document.querySelectorAll("#box ul .num")//获取所有的数字opcr = document.querySelectorAll("#box ul .opcr")//获取+——*/for (var i = 0; i < lis.length; i++) { //遍历所有的数字lis[i].onclick = function () {input1.value += parseInt(this.innerHTML)//点击input1显⽰}}//遍历所有的+——*/for (let i = 0; i < opcr.length; i++) {opcr[i].onclick = function () {if (text1.value == "") {//当存放第⼀个值为空时候text1.value = input1.value//存放第⼀个值input1.value = "" //input框⾥的值为空per.value = this.innerHTML; //存放符号的值为空} else {text1.value = eval(text1.value + per.value + input1.value)//不是空的时候计算值 per.value = this.innerHTML;//存放符号的值为点击的值input1.value = ""//input框⾥的值为空}}}//等于resule.onclick = function () {input1.value = eval(text1.value + per.value + input1.value)//计算⾥⾯的值per.value = "" //清空存放per的值text1.value = ""//input框⾥的值为空}//点击清空所有returnZero.onclick = function () {input1.value = ""per.value = ""text1.value = ""}</script></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

JS实现简易计算器的7种方法

JS实现简易计算器的7种方法

JS实现简易计算器的7种⽅法先放图（好吧⽐较挫）⽅法⼀：最容易版<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {background-color: #eee;}#calculator {margin: 100px 0 0 150px;}</style></head><body><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" onclick="addHandler();" /><input type="button" value="-" onclick="subtractHandler();" /><input type="button" value="×" onclick="multiplyHandler();" /><input type="button" value="÷" onclick="divideHandler();" /></p></div><script>// 获取元素var calculator = document.querySelector('#calculator');var formerInput = calculator.querySelector('.formerInput');var laterInput = calculator.querySelector('.laterInput');var sign = calculator.querySelector('.sign');var resultOutput = calculator.querySelector('.resultOutput');// 加function addHandler() {sign.innerHTML = '+';resultOutput.innerHTML = +formerInput.value + +laterInput.value;}// 减function subtractHandler() {sign.innerHTML = '-';resultOutput.innerHTML = formerInput.value - laterInput.value;}// 乘function multiplyHandler() {sign.innerHTML = '×';resultOutput.innerHTML = formerInput.value * laterInput.value;}// 除function divideHandler() {sign.innerHTML = '÷';resultOutput.innerHTML = formerInput.value / laterInput.value;}</script></body></html>⽅法⼆：结构和⾏为分离<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title>#calculator {margin: 100px 0 0 150px;}</style></head><body><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" onclick="addHandler();" /><input type="button" value="-" onclick="subtractHandler();" /><input type="button" value="×" onclick="multiplyHandler();" /><input type="button" value="÷" onclick="divideHandler();" /></p></div><script>// 获取元素var calculator = document.querySelector('#calculator');var formerInput = calculator.querySelector('.formerInput');var laterInput = calculator.querySelector('.laterInput');var sign = calculator.querySelector('.sign');var resultOutput = calculator.querySelector('.resultOutput');var btns = calculator.querySelectorAll('.btn');// 绑定事件// +btns[0].onclick = addHandler;// -btns[1].onclick = subtractHandler;// ×btns[2].onclick = multiplyHandler;// ÷btns[3].onclick = divideHandler;// 加function addHandler() {sign.innerHTML = '+';resultOutput.innerHTML = +formerInput.value + +laterInput.value; }// 减function subtractHandler() {sign.innerHTML = '-';resultOutput.innerHTML = formerInput.value - laterInput.value;}// 乘function multiplyHandler() {sign.innerHTML = '×';resultOutput.innerHTML = formerInput.value * laterInput.value;}// 除function divideHandler() {sign.innerHTML = '÷';resultOutput.innerHTML = formerInput.value / laterInput.value;}</script></body></html>⽅法三：循环绑定事件<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {background-color: #eee;}#calculator {margin: 100px 0 0 150px;<!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" onclick="addHandler();" /><input type="button" value="-" onclick="subtractHandler();" /><input type="button" value="×" onclick="multiplyHandler();" /><input type="button" value="÷" onclick="divideHandler();" /></p></div><script>// 获取元素var calculator = document.querySelector('#calculator');var formerInput = calculator.querySelector('.formerInput');var laterInput = calculator.querySelector('.laterInput');var sign = calculator.querySelector('.sign');var resultOutput = calculator.querySelector('.resultOutput');var btns = calculator.querySelectorAll('.btn');// 绑定事件for (var i = 0; i < btns.length; i++) {btns[i].onclick = function () {switch (this.title) {case 'add':addHandler();break;case 'subtract':subtractHandler();break;case 'multiply':multiplyHandler();break;case 'divide':divideHandler();break;}};}// 加function addHandler() {sign.innerHTML = '+';resultOutput.innerHTML = +formerInput.value + +laterInput.value; }// 减function subtractHandler() {sign.innerHTML = '-';resultOutput.innerHTML = formerInput.value - laterInput.value;}// 乘function multiplyHandler() {sign.innerHTML = '×';resultOutput.innerHTML = formerInput.value * laterInput.value;}// 除function divideHandler() {sign.innerHTML = '÷';resultOutput.innerHTML = formerInput.value / laterInput.value;}</script></body></html>⽅法四：提取函数<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {margin: 100px 0 0 150px;}</style></head><body><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" class="btn" title="add" /><input type="button" value="-" class="btn" title="subtract" /> <input type="button" value="×" class="btn" title="multiply" /> <input type="button" value="÷" class="btn" title="divide" /> </p></div><script>// 获取元素var calculator = document.querySelector('#calculator');var formerInput = calculator.querySelector('.formerInput');var laterInput = calculator.querySelector('.laterInput');var sign = calculator.querySelector('.sign');var resultOutput = calculator.querySelector('.resultOutput');var btns = calculator.querySelectorAll('.btn');// 绑定事件each(btns, function (index, elem ) {elem.onclick = function () {switch (this.title) {case 'add':addHandler();break;case 'subtract':subtractHandler();break;case 'multiply':multiplyHandler();break;case 'divide':divideHandler();break;}};});// 遍历function each(array, fn) {for (var i = 0; i < array.length; i++) {fn(i, array[i]);}}// 更新符号function updateSign(symbol) {sign.innerHTML = symbol;}// 加法function add(num1, num2) {return +num1 + +num2;}// 减法function subtract(num1, num2) {return num1 - num2;}// 乘法function multiply(num1, num2) {return num1 * num2;}// 除法function divide(num1, num2) {return num1 / num2;}// 输出结果}// 加function addHandler() {// sign.innerHTML = '+';updateSign('+');outputResult(add(formerInput.value, laterInput.value));}// 减function subtractHandler() {updateSign('-');outputResult(subtract(formerInput.value, laterInput.value)); }// 乘function multiplyHandler() {updateSign('×');outputResult(multiply(formerInput.value, laterInput.value)); }// 除function divideHandler() {updateSign('÷');outputResult(divide(formerInput.value, laterInput.value)); }</script></body></html>⽅法五：管理代码(找到组织)<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {background-color: #eee;}#calculator {margin: 100px 0 0 150px;}</style></head><body><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" class="btn" title="add" /><input type="button" value="-" class="btn" title="subtract" /> <input type="button" value="×" class="btn" title="multiply" /> <input type="button" value="÷" class="btn" title="divide" /> </p></div><script>// 获取元素var wrapElem = document.querySelector('#calculator');var calculatorElem = {formerInput: wrapElem.querySelector('.formerInput'),laterInput: wrapElem.querySelector('.laterInput'),sign: wrapElem.querySelector('.sign'),resultOutput: wrapElem.querySelector('.resultOutput'), btns: wrapElem.querySelectorAll('.btn')};// 绑定事件each(calculatorElem.btns, function (index, elem ) {elem.onclick = function () {switch (this.title) {case 'add':addHandler();break;case 'subtract':multiplyHandler();break;case 'divide':divideHandler();break;}};});// 遍历function each(array, fn) {for (var i = 0; i < array.length; i++) {fn(i, array[i]);}}// 更新符号function updateSign(symbol) {calculatorElem.sign.innerHTML = symbol;}var operation = {add: function(num1, num2) {return +num1 + +num2;},subtract: function(num1, num2) {return num1 - num2;},multiply: function(num1, num2) {return num1 * num2;},divide: function(num1, num2) {return num1 / num2;}};// 输出结果function outputResult(result) {calculatorElem.resultOutput.innerHTML = result;}// 加function addHandler() {// sign.innerHTML = '+';updateSign('+');outputResult(operation.add(calculatorElem.formerInput.value, terInput.value));}// 减function subtractHandler() {updateSign('-');outputResult(operation.subtract(calculatorElem.formerInput.value, terInput.value)); }// 乘function multiplyHandler() {updateSign('×');outputResult(operation.multiply(calculatorElem.formerInput.value, terInput.value)); }// 除function divideHandler() {updateSign('÷');outputResult(operation.divide(calculatorElem.formerInput.value, terInput.value)); }</script></body></html>⽅法六：OCP开放--封闭原则<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {background-color: #eee;}#calculator {margin: 100px 0 0 150px;}</style></head><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" class="btn" title="add" /><input type="button" value="-" class="btn" title="subtract" /><input type="button" value="×" class="btn" title="multiply" /><input type="button" value="÷" class="btn" title="divide" /><input type="button" value="%" class="btn" title="mod" /><input type="button" value="^" class="btn" title="power" /><!-- <input type="button" value="1/x" class="btn" title="invert" /> --></p></div><script>// 获取元素var wrapElem = document.querySelector('#calculator');var calculatorElem = {formerInput: wrapElem.querySelector('.formerInput'),laterInput: wrapElem.querySelector('.laterInput'),sign: wrapElem.querySelector('.sign'),resultOutput: wrapElem.querySelector('.resultOutput'),btns: wrapElem.querySelectorAll('.btn')};// 绑定事件each(calculatorElem.btns, function (index, elem ) {elem.onclick = function () {updateSign(this.value);outputResult(operate(this.title, calculatorElem.formerInput.value, terInput.value)); };});// 遍历function each(array, fn) {for (var i = 0; i < array.length; i++) {fn(i, array[i]);}}// 更新符号function updateSign(symbol) {calculatorElem.sign.innerHTML = symbol;}// 运算function operate(name, num1, num2) {if (!operation[name]) throw new Error('不存在名为' + name + '的运算⽅法！');return operation[name](num1, num2);}var operation = {add: function(num1, num2) {return +num1 + +num2;},subtract: function(num1, num2) {return num1 - num2;},multiply: function(num1, num2) {return num1 * num2;},divide: function(num1, num2) {return num1 / num2;},addOperation: function (name, fn) {if (!this[name]) {this[name] = fn;}return this;}};operation.addOperation('mod', function (num1, num2) {return num1 % num2;}).addOperation('power', function (base, power) {return Math.pow(base, power);function outputResult(result) {calculatorElem.resultOutput.innerHTML = result;}</script></body></html>⽅法七：模块化<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>简易计算器</title><style>body {background-color: #eee;}#calculator {margin: 100px 0 0 150px;}</style></head><body><!-- 简易计算器 --><div id="calculator"><p><input type="text" class="formerInput" value="1" /><span class="sign">+</span><input type="text" class="laterInput" value="1" /><span>=</span><span class="resultOutput">2</span></p><p><input type="button" value="+" class="btn" title="add" /><input type="button" value="-" class="btn" title="subtract" /><input type="button" value="×" class="btn" title="multiply" /><input type="button" value="÷" class="btn" title="divide" /><input type="button" value="%" class="btn" title="mod" /><input type="button" value="^" class="btn" title="power" /><input type="button" value="1/x" class="btn" title="invert" /></p></div><script>(function () {// 获取元素var wrapElem = document.querySelector('#calculator');var calculatorElem = {formerInput: wrapElem.querySelector('.formerInput'),laterInput: wrapElem.querySelector('.laterInput'),sign: wrapElem.querySelector('.sign'),resultOutput: wrapElem.querySelector('.resultOutput'),btns: wrapElem.querySelectorAll('.btn')};// 绑定事件each(calculatorElem.btns, function (index, elem ) {elem.onclick = function () {updateSign(this.value);outputResult(operate(this.title, calculatorElem.formerInput.value, terInput.value)); };});// 遍历function each(array, fn) {for (var i = 0; i < array.length; i++) {fn(i, array[i]);}}// 更新符号function updateSign(symbol) {calculatorElem.sign.innerHTML = symbol;}// 运算var operate = (function () {subtract: function(num1, num2) {return num1 - num2;},multiply: function(num1, num2) {return num1 * num2;},divide: function(num1, num2) {return num1 / num2;},addOperation: function (name, fn) {if (!operation[name]) {operation[name] = fn;}return operation;}};function operate(name) {if (!operation[name]) throw new Error('不存在名为' + name + '的运算⽅法！');return operation[name].apply(operation, [].slice.call(arguments, 1, arguments.length)); }operate.addOperation = operation.addOperation;return operate;})();operate.addOperation('mod', function (num1, num2) {return num1 % num2;}).addOperation('power', function (base, power) {return Math.pow(base, power);}).addOperation('invert', function (num) {return 1 / num;});// 输出结果function outputResult(result) {calculatorElem.resultOutput.innerHTML = result;}})();</script></body></html>。

javascript应用实例

javascript应用实例

javascript应用实例JavaScript应用实例：制作一个简单的计算器JavaScript是一种广泛应用于网页开发的脚本语言，它可以为网页添加动态效果和交互性。

在本文中，我们将介绍如何使用JavaScript 制作一个简单的计算器。

我们需要在HTML文件中创建一个表单，其中包含数字和运算符按钮以及一个显示结果的文本框。

代码如下：```<form><input type="text" id="result" readonly><br><input type="button" value="1" onclick="addNumber(1)"><input type="button" value="2" onclick="addNumber(2)"><input type="button" value="3" onclick="addNumber(3)"><input type="button" value="+" onclick="addOperator('+')"><br><input type="button" value="4" onclick="addNumber(4)"><input type="button" value="5" onclick="addNumber(5)"><input type="button" value="6" onclick="addNumber(6)"><input type="button" value="-" onclick="addOperator('-')"><br><input type="button" value="7" onclick="addNumber(7)"><input type="button" value="8" onclick="addNumber(8)"><input type="button" value="9" onclick="addNumber(9)"><input type="button" value="*" onclick="addOperator('*')"><br><input type="button" value="0" onclick="addNumber(0)"><input type="button" value="C" onclick="clearResult()"><input type="button" value="=" onclick="calculate()"><input type="button" value="/" onclick="addOperator('/')"></form>```在这个表单中，我们使用了四个数字按钮、四个运算符按钮和一个清除按钮。

JavaScript实现简单的四则运算计算器完整实例

JavaScript实现简单的四则运算计算器完整实例

JavaScript实现简单的四则运算计算器完整实例本⽂实例讲述了JavaScript实现简单的四则运算计算器。

分享给⼤家供⼤家参考，具体如下：运⾏效果图如下：完整实例代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>computer</title><script>function compute(){str1=Number(document.getElementById("txt1").value);str2=Number(document.getElementById("txt2").value);comp=document.getElementById("select").value;var result;switch(comp) {case "+":comp=str1+str2;break;case "-":comp=str1-str2;break;case "*":comp=str1*str2;break;case "/":if(str2==0){alert("除数不能为0！");comp='';}else{comp=str1/str2;}break;}document.getElementById("result").value=comp;}</script></head><body><input type="text" id="txt1"/><select name="method" id="select"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" id="txt2"/><input type="button" id="b1" value="等于" onclick="compute()" /><input type="text" id="result"/></body></html>PS：这⾥再为⼤家推荐⼏款计算⼯具供⼤家进⼀步参考借鉴：更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。

信息技术作业使用JavaScript实现一个简单的计算器程序

信息技术作业使用JavaScript实现一个简单的计算器程序

信息技术作业使用JavaScript实现一个简单的计算器程序使用JavaScript实现一个简单的计算器程序JavaScript是一种广泛用于网页开发的脚本语言，可以方便地与HTML结合使用。

在本篇文章中，我们将使用JavaScript编写一个简单的计算器程序。

该程序将具备基本的加减乘除功能，以及清零和回退操作。

程序实现的核心是通过JavaScript的事件监听机制，监听用户的点击事件，并根据点击按钮的不同进行相应的处理。

下面是具体的实现步骤：1. 页面布局首先，我们需要在HTML中搭建计算器的基本界面。

可以使用HTML的表格元素来实现计算器的按钮布局，如下所示：```html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单计算器</title><script src="calculator.js"></script></head><body><table><tr><td colspan="4"><input type="text" id="result" readonly></td> </tr><tr><td><button onclick="appendNumber(7)">7</button></td><td><button onclick="appendNumber(8)">8</button></td><td><button onclick="appendNumber(9)">9</button></td><td><button onclick="appendOperator('+')">+</button></td> </tr><tr><td><button onclick="appendNumber(4)">4</button></td><td><button onclick="appendNumber(5)">5</button></td><td><button onclick="appendNumber(6)">6</button></td><td><button onclick="appendOperator('-')">-</button></td></tr><tr><td><button onclick="appendNumber(1)">1</button></td> <td><button onclick="appendNumber(2)">2</button></td> <td><button onclick="appendNumber(3)">3</button></td> <td><button onclick="appendOperator('*')">*</button></td> </tr><tr><td><button onclick="appendNumber(0)">0</button></td> <td><button onclick="appendNumber('.')">.</button></td> <td><button onclick="calculate()">=</button></td><td><button onclick="appendOperator('/')">/</button></td> </tr><tr><td colspan="4"><button onclick="clearResult()">清零</button></td></tr><tr><td colspan="4"><button onclick="backspace()">回退</button></td></tr></table></body></html>```在上面的代码中，我们使用`<input>`元素来显示计算结果，使用`<button>`元素来作为按钮，通过调用相应的JavaScript函数来执行对应的操作。

js中简单计算器的代码

js中简单计算器的代码

js中简单计算器的代码JS中实现一个简单的计算器并不困难，我们只需利用基本的数学运算符和JavaScript的语法即可。

下面是一个实现加、减、乘、除四则运算的计算器的JavaScript代码示例：```javascript// 获取计算器的元素var calculator = document.getElementById('calculator'); // 获取数字、运算符和结果显示区域的元素var num1 = document.getElementById('num1');var num2 = document.getElementById('num2');var operator = document.getElementById('operator');var result = document.getElementById('result');// 给运算符按钮添加事件处理函数var addButton = document.getElementById('add');addButton.addEventListener('click', function() {var n1 = parseFloat(num1.value);var n2 = parseFloat(num2.value);result.innerHTML = n1 + n2;});var subtractButton =document.getElementById('subtract');subtractButton.addEventListener('click', function() {var n1 = parseFloat(num1.value);var n2 = parseFloat(num2.value);result.innerHTML = n1 - n2;});var multiplyButton =document.getElementById('multiply');multiplyButton.addEventListener('click', function() { var n1 = parseFloat(num1.value);var n2 = parseFloat(num2.value);result.innerHTML = n1 * n2;});var divideButton = document.getElementById('divide'); divideButton.addEventListener('click', function() {var n1 = parseFloat(num1.value);var n2 = parseFloat(num2.value);result.innerHTML = n1 / n2;});```在以上代码中，我们定义了四个函数来处理加、减、乘、除四则运算。

基于JavaScript实现简易计算器

基于JavaScript实现简易计算器

基于JavaScript实现简易计算器本⽂实例为⼤家分享了JavaScript实现简易计算器的具体代码，供⼤家参考，具体内容如下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>计算器</title><style>.op {margin: 50px auto;width: 300px;height: 300px;border: 1px solid orange;background-color: lightskyblue;border-radius: 50px;}input {width: 210px;height: 30px;border-radius: 5px;}button {width: 30px;height: 30px;border-radius: 10px;}</style></head><body><div class="op"><h2 align="center">计算器</h2><form name="calculator"><table align="center"><tr><td>num1:</td><td><input type="text" name="num1"></td></tr><tr><td>num2:</td><td><input type="text" name="num2"></td></tr><tr><td colspan="2">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button type="button">+</button>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button type="button">-</button>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button type="button">*</button>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button type="button">/</button></td></tr><tr><td>结果：</td><td><input type="text" name="result" disabled></td></tr></table></form></div><script>//得到标签名下的所有元素对象，返回⼀个数组let buttonArr = document.getElementsByTagName("button");for (let but of buttonArr) {but.addEventListener('click', function () {let operator = this.innerHTML;count(operator);});}function count(operator) {//得到form为calculator中name为num1的输⼊值let num1 = parseFloat(document.calculator.num1.value);let num2 = parseFloat(document.calculator.num2.value);let result = '';switch (operator) {case '+':result = num1 + num2;break;case '-':result = num1 - num2;break;case '*':result = num1 * num2;break;case '/':if (num2 == 0) {alert("除数不能为零");return;}result = num1 / num2;break;}//将结果赋值于属性名name为result的input框document.calculator.result.value = result;}</script></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

js中简单计算器的代码

js中简单计算器的代码

js中简单计算器的代码在JavaScript中，我们可以使用简单的语法来编写一个基本的计算器。

计算器可以执行加法、减法、乘法和除法等数学运算操作。

为了编写这个计算器程序，我们需要创建三个主要的函数，分别是获取输入、执行计算和输出结果。

首先定义一个由用户输入的数字和运算符组成的表达式，然后解析表达式，并在最终屏幕上显示计算结果。

下面是一个简单的计算器程序示例，可以执行加法、减法、乘法和除法四种基本运算：```jsfunction getInputValue() {var x = parseFloat(document.getElementById("input1").value); var y = parseFloat(document.getElementById("input2").value); var op = document.getElementById("operator").value;return [x, y, op];}function calculate() {var result;var [x,y,op] = getInputValue();if (op === "+") {result = x + y;} else if (op === "-") {result = x - y;} else if (op === "*") {result = x * y;} else if (op === "/") {result = x / y;}return result;}function displayResult() {var result = calculate();document.getElementById("result").innerHTML = result;}```这个计算器程序中，`getInputValue()`函数获取用户输入的数值和运算符，`calculate()`函数执行数学运算并返回计算结果，`displayResult()`函数将结果输出到屏幕上。

JavaScript实现简单的计算器功能

JavaScript实现简单的计算器功能

JavaScript实现简单的计算器功能本⽂实例为⼤家分享了JavaScript实现简单计算器功能的具体代码，供⼤家参考，具体内容如下具体要求如下：实现代码：<html><head><meta charset="utf-8"><title>计算器</title><script>function myck(type){var num1 = document.getElementById("num1");var num2 = document.getElementById("num2");if(type==1){// 计算操作var result = parseInt(num1.value) + parseInt(num2.value);alert(result);document.getElementById("resultDiv").innerText ="最终计算结果："+ result;}else if(type==2){var result = parseInt(num1.value) - parseInt(num2.value);alert(result);document.getElementById("resultDiv").innerText ="最终计算结果："+ result;}else if(type==3){var result = parseInt(num1.value) * parseInt(num2.value);alert(result);document.getElementById("resultDiv").innerText ="最终计算结果："+ result;}else if(type==4){if(confirm("是否正确清空？")){// 清空num1.value = "";num2.value = "";document.getElementById("resultDiv").innerText="";}}}</script></head><body><div style="margin-top: 100px;margin-left: 500px;"><span style="font-size: 60px;">计算器</span></div><div><div class="innerDiv" style="margin-left: 490px;">数&nbsp;&nbsp;字1：<input id="num1" type="number" placeholder="请输⼊数字1"></div></div><div><div class="innerDiv" style="margin-left:490px;">数&nbsp;&nbsp;字2：<input id="num2" type="number" placeholder="请输⼊数字2"></div></div><div><div style="margin-left: 500px;" class="innerDiv"><input type="button" onclick="myck(1)" value="相&nbsp;&nbsp;加"><input type="button" onclick="myck(2)" value="相&nbsp;&nbsp;减"><input type="button" onclick="myck(3)" value="相&nbsp;&nbsp;乘"><input type="button" onclick="myck(4)" value="清&nbsp;&nbsp;空"></div></div><div id="resultDiv"></div></body><style>.innerDiv{margin-left: 420px;margin-top: 20px;}</style></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

js案例大全

js案例大全

js案例大全JavaScript（简称JS）是一种高级的、解释型的编程语言，它主要用于在网页上实现动态交互效果。

在网页开发中，JavaScript扮演着非常重要的角色，它可以帮助我们实现各种各样的功能和效果。

在本文中，我将为大家介绍一些常见的JavaScript案例，希望能够对大家的学习和工作有所帮助。

首先，我们来看一个简单的JavaScript案例，实现一个简单的计算器。

在这个案例中，我们可以使用JavaScript来编写一个简单的计算器，用户可以在网页上输入数字和运算符，然后点击“计算”按钮，就可以得到计算结果。

这个案例可以帮助我们了解如何使用JavaScript来处理用户的输入，并进行简单的数学运算。

接下来，我们可以看一个更加复杂的案例，实现一个图片轮播效果。

在这个案例中，我们可以使用JavaScript和CSS来实现一个图片轮播效果，用户可以在网页上点击“上一张”和“下一张”按钮来切换图片，也可以自动播放图片。

这个案例可以帮助我们了解如何使用JavaScript来操作DOM元素，以及如何结合CSS来实现动态效果。

除此之外，JavaScript还可以用来实现表单验证、动态加载数据、实现动画效果等等。

在网页开发中，JavaScript的应用非常广泛，它可以帮助我们实现各种各样的交互效果，让网页变得更加生动和有趣。

总的来说，JavaScript是一种非常强大的编程语言，它可以帮助我们实现各种各样的功能和效果。

通过学习和掌握JavaScript，我们可以为网页添加更多的交互效果，让用户体验变得更加丰富和多样化。

希望本文介绍的JavaScript案例能够对大家有所帮助，也希望大家能够在日常的网页开发中多多运用JavaScript，为用户带来更好的体验。

简单计算器的制作

简单计算器的制作

简单计算器的制作引言：计算器是一种用于进行基本数学运算的工具。

它通常具备加法、减法、乘法和除法的功能。

在本文中，我们将介绍如何制作一个简单的计算器，让用户能够输入两个数字并选择进行的运算。

该计算器将使用基本的HTML、CSS和JavaScript技术，以及一些计算逻辑来实现。

准备工作：在开始制作计算器之前，我们需要确保我们具备以下环境和资源：2. 基础的HTML、CSS和JavaScript知识。

3. 可以创建和保存HTML、CSS和JavaScript文件的文件夹。

4.一些布局和样式设计的想法。

步骤一：创建HTML文件步骤二：设计计算器布局1. 在 "calculator-container" `<div>` 内部，创建一个`<input>` 元素，并给它一个独立的id属性，例如 "input1"。

这个输入框将用于输入第一个数字。

2. 在 "calculator-container" `<div>` 内部，创建一个`<input>` 元素，并给它一个独立的id属性，例如 "input2"。

这个输入框将用于输入第二个数字。

3. 在 "calculator-container" `<div>` 内部，创建一个`<select>` 元素，并给它一个独立的id属性，例如 "operator"。

这个下拉菜单将用于选择运算符。

4. 在 "operator" `<select>` 内部，创建四个 `<option>` 元素，分别代表加法、减法、乘法和除法，这些元素的值分别为 "+"、"-"、"*"和"/"。

js简单计算器代码

js简单计算器代码

js简单计算器代码JavaScript是一种广泛应用于网页开发的编程语言，它具有强大的计算能力。

在本文中，我们将探讨如何使用JavaScript编写一个简单的计算器。

我们需要一个HTML页面来容纳我们的计算器。

在HTML文件中，我们可以使用<input>元素来创建用于输入数字和操作符的文本框，使用<button>元素来创建用于触发计算的按钮。

接下来，我们需要编写一些JavaScript代码来处理用户的输入并进行计算。

在编写JavaScript代码之前，我们需要先为每个按钮和文本框添加一个唯一的id属性，以便在代码中引用它们。

例如，我们可以为数字按钮添加id="digit1"，id="digit2"，依此类推；为操作符按钮添加id="add"，id="subtract"，以此类推；为文本框添加id="result"。

接下来，我们可以使用JavaScript的事件监听器来监听按钮的点击事件。

当用户点击数字按钮时，我们可以将对应的数字添加到文本框中；当用户点击操作符按钮时，我们可以将对应的操作符添加到文本框中。

此外，我们还可以添加一个“清除”按钮，当用户点击该按钮时，可以清空文本框中的内容。

在编写事件监听器的代码时，我们需要使用JavaScript的DOM （文档对象模型）操作来获取按钮和文本框的引用。

例如，我们可以使用document.getElementById()方法来获取按钮和文本框的引用，然后使用addEventListener()方法来为按钮添加点击事件的监听器。

当用户点击“计算”按钮时，我们需要编写代码来解析文本框中的内容，并进行相应的计算。

在JavaScript中，我们可以使用eval()函数来执行字符串形式的表达式。

例如，如果文本框中的内容为"2 + 3"，我们可以使用eval("2 + 3")来计算结果并将结果显示在文本框中。

简易计算器的实现(JSP)

简易计算器的实现(JSP)
用 JSP 编写的一个简易计算器
实现代码如下：
<%@ page contentType="text/html;charset=gb2312"%> <html>
<h1 align="center">简易计算器</h1> <hr width="600"> <head> <!--这是计算器的界面--> <!--控制 num1,num2 不能为空,同时也不能是字符串--> <script language="javascript">
//写一个函数验证用户是不是空提交 function checkNum() { //判断 num1,num2 是否为空 if(form1.numb1.value==""||form1.numb2.value=="") {
window.alert("您输入的值为空!"); return false; }
//计算 if(oper.equals("+")) {
//加 result=dnum1+dnum2; } else if(oper.equals("-")) { //减 result=dnum1-dnum2; } else if(oper.equals("×")) { //乘 result=dnum1*dnum2; } else { //除 result=dnum1/dnum2; } } %> <form name="form1" action="Calculator.jsp"> <p>请输入第一个数:<input type="text" name="numb1"></p> <p>请输入第二个数:<input type="text" name="numb2"></p> <p>请选择运算符： <select name="op"> <option value=+>+</option> <option value=->-</option> <option value=×>×</option> <option value=÷>÷</option> </select></p>

最新js-cal网页简易计算器

最新js-cal网页简易计算器

s-ca I网页简易计算口口JS-简易计算器—、要求：在网页中编程实现一个简单的计算器.它能提供加减乘除四则运算，它支持IE浏览器。

二、实验原理（简单步骤）利用Java Applet图形界面首先开始设计一个计算器的界面，定义计算器所需要的按钮并赋给其按钮名称，使得使用计算器时简单明了，清晰可见，操作轻松。

给各个按钮进行算法，利用鼠标点击事件，当鼠标点击某个按钮时就开始执行那个按钮所定义的算法，生成数据并显示。

除数字的输入为直接进行输入外，其他运算例如+、-、*、/、开平方等算法要求计算时通过内部较为复杂的运算将结果显示在显示屏上。

三、程序界面四、界面编码VDOCTYPE html PUBLIC U-//W3C//DTD XHTML 1.0 Tiansitional//EN U <html xmlns=”http :〃www. w3 .oig/1999/xlitml M><head><meta littp-equiv=n Content-Type n content=n text/htnil; cliaiset=gb2312,r /><title>简易计算器</title></head> <body><table width=n 33%M height 』193” boide"”〉<ti><td colspan=u 4H ><input type=H text n size=n 50M nanie=u iesult n id=n result H ></td> </ti> <ti><td widtli=H 24%n ><iiiput type=H button u value 』 1 onclick=H getNum(l)H x/td> <td width=u 23%n ><iiiput type=n button ,r value 』 2 onclick=H getNum(2)H x/td> <td widtli=H 26%n ><iiiput type=H button u value 』 3 onclick=H getNum(3)H x/td> <td widtli=H 27%n ><iiiput type=H button u value 』 + onclick="getNum('+,)"></td> </tI></table> <scnpt type=H text?javascnpt H language=n javascnpt n >〃判断是否清空 var clearContent=false; 〃获得数字fxmction getNum(num){ if(clearContent){〃如果已经有结果存在则将其清空 document.getElementById(u fesult n ).value=nn ; cleaiC ontent=false; }〃获取结果对象vai objresult=document.getElementById(u iesult u ); 〃实现数字连接<ti><td><iiiput type=H button H value 』<td><iiiput type=H button H value 』<td><iiiput type=H button Hvalue 』 <td><iiiput type=H button r, value=n</ti> <ti><td><iiiput type=H button H value 』 <td><iiiput type=H button H value 』 <td><iiiput type=H button H value=n <td><iiiput type=H button Hvalue 』</ti><ti> <td><iiiput type=H button Hvalue 』<td><iiiput type=H button H value 』 <td><iiiput type=H button H value 』<td><iiiput type=H button H value 』4 H onclick=H getNum(4)l!></td>5 ” onclick="getNuni(5)"></td>6 ” onclick="getNuni(6)"></td> -Monclick=H getNuni(L ，)nx/td> 7 n onclick=H getNum(7)l!></td>8 ” onclick="getNum(8)',x/td> 9 " onclick="getNum(9)H ></td> * ” onclick="getNum(,*,),'></tcl>0 ” onclick="getNuni(0)n></td> ."onclick="getNum(,.')',x/td>="onclick="getResult()H ></td> / 11onclick=H getNum(7,)H></td>objiesult.value+=num;}〃获取结果对象值fxmction getResult(){vai objresult2=document.getEiementById(n result H);〃为结果赋值objresult2.value=objresult2.value+,-H+eval(objiesult2.value); cleaiContent=tme; }</scnpt></bodv>J。

《JavaScript项目式实例教程》项目二 简单计算器 —— 判断结构

《JavaScript项目式实例教程》项目二 简单计算器 —— 判断结构

❖ JavaScript项目式实例教程
学习目标
➢ 熟悉变量和常量的概念和使用方法。 ➢ 熟悉基本数据类型的概念 ➢ 熟悉数据类型的转换。 ➢ 熟悉关系运算符、逻辑运算符、算术运算符的使用方法。 ➢ 熟悉判断结构的使用方法。 ➢ 熟悉几个内置函数的使用方法。
❖ JavaScript项目式实例教程
任务1 认识变量和字符串
document.write(num+"不是整数"); } </script>
❖ JavaScript项目式实例教程
任务4 判断奇偶数
打开页面， 弹出一个输入对话框，要求输入一个整数。如果输入的为奇数， 确认后打印信息，提示该数为奇数。如果输入的为偶数，确认后打印信息，提 示该数为偶数。如果输入的信息为以下情况中的一种，就视为不合法输入，提 示错误。 ① 输入的不是数字。 输入的是数字，但不是整数。 ③ 未做任何输入。
[语句块n+1]
❖ JavaScript项目式实例教程
【相关知识】
④ if语句的嵌套 if语句允许嵌套，嵌套时注意if与else的匹配，不要出现交叉嵌 套的现象。
❖ JavaScript项目式实例教程
【相关知识】
4.2、switch语句
switch(<变量或表达式>) {
case <数值1>： [语句块1] <break;>
❖ JavaScript项目式实例教程
任务2 输入对话框
打开页面，弹出一个输入对话框，要求输入姓名。输入确定后 再次弹出输入对话框，要求输入性别。输入确定后，在页面打 印刚刚输入的信息。
❖ JavaScript项目式实例教程
【相关知识】

JSP实现简单网页计算器

JSP实现简单网页计算器

JSP实现简单⽹页计算器本⽂实例为⼤家分享了JSP实现简单⽹页计算器的具体代码，供⼤家参考，具体内容如下⼀、构造⼀个简单的计算器，能够进⾏“+、—、*、/”运算（1）编写jsp页⾯，⽤户通过表单输⼊两个操作数和运算符，调⽤该页⾯⾃⾝处理该表单，通过调⽤SimpleCalculator类的实例实现运算逻辑，并显⽰运算结果。

（2）实现下边的jsp⽹页计算器：⼆、代码实现（1）jsp页⾯<%@page import="com.beans.SimpleCalculator"%><%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><!DOCTYPE html><html><head><meta charset="utf-8"><title>计算器</title></head><body><form action="" method="post">第⼀个数：<input type="text" value="" name="first" size="25px"/><br /><br />第⼆个数：<input type="text" value="" name="second" size="25px"/><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="+" name="operator" size="3"/> &nbsp;&nbsp;&nbsp;<input type="submit" value="-" name="operator" size="3"/> &nbsp;&nbsp;&nbsp;<input type="submit" value="*" name="operator" size="3"/> &nbsp;&nbsp;&nbsp;<input type="submit" value="/" name="operator" size="3"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="清除"/></form><br /><br /><%//获取表单中的数据进⾏运算String first = request.getParameter("first");//第⼀个数String second = request.getParameter("second");//第⼆个数String operator = request.getParameter("operator");//运算符String result = "" ;//运算结果//判断运算符if(operator.equals("+")) {result = String.valueOf((Integer.valueOf(first) + Integer.valueOf(second) ));}if(operator.equals("-")) {result = String.valueOf((Integer.valueOf(first) - Integer.valueOf(second) ));}if(operator.equals("*")) {result = String.valueOf((Integer.valueOf(first) * Integer.valueOf(second) ));}if(operator.equals("/")) {if(second.equals("0")) {result = "除数不能为0";}else {result = String.valueOf((double)(Integer.valueOf(first) / (double)Integer.valueOf(second) ));}}//定义⼀个计算器类SimpleCalculator simpleCalculator = new SimpleCalculator();simpleCalculator.setResult(result);if( !simpleCalculator.getResult().equals("") && simpleCalculator.getResult() != null){out.print("<h2 style= 'color: blue'>");out.print("计算结果："+first+operator+second+" = "+simpleCalculator.getResult());out.print("<h4>");}else{out.print("计算错误");}%><br /><br /></body></html>（2）SimpleCalculator类public class SimpleCalculator {//定义变量private String first;//第⼀个数private String second;//第⼆个数private String operator;//运算符private String result;//运算结果//定义set和get⽅法public String getFirst() {return first;}public void setFirst(String first) {this.first = first;}public String getSecond() {return second;}public void setSecond(String second) {this.second = second;}public String getOperator() {return operator;}public void setOperator(String operator) {this.operator = operator;}public String getResult() {return result;}public void setResult(String result) {this.result = result;}}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

JavaScript实现简单网页版计算器

JavaScript实现简单网页版计算器

JavaScript实现简单⽹页版计算器背景由于我⼜被分进了⼀个新的项⽬组，该项⽬需要⽤js，因为我没接触过，所以领导准备给我⼀周时间学习，没错，实现⼀个简单的⽀持四则混合运算的计算器就是作业，所以有了这篇⽂章故，这篇⽂章主要重点就不在html和css了，毕竟我也只是略懂⽪⽑，并未深究过实现效果最终展现的页⾯如下图，当⿏标点击按键时，按键会变⾊，可以进⾏四则混合运算上⾯⼀⾏显⽰计算式，当按下“=”时，显⽰计算结果⽤到的技术计算器的页⾯是使⽤html的table绘制的按键的⼤⼩，颜⾊，⿏标悬浮变⾊是⽤css设置的点击按键将按键上的值和计算结果显⽰在最上⾯⼀⾏、完成四则混合运算是⽤js做的实现思路这⾥我分了三个⽂件，⼀个.html ⼀个 .css ⼀个 .js1、先写了html和css，绘制出来⽹页展⽰的样⼦，此处不细说，有兴趣可以直接看代码2、然后⽤js的DOM事件，给不同类型的按钮加上点击事件，调⽤不同的js函数。

这⼀步我开始只是先写了⼀个函数定义，主要是为了先划分清楚逻辑，⽐如按某个按键应该实现哪些功能，显⽰什么效果等，后⾯对函数进⾏填充逻辑就不会乱掉3、最后去实现js函数，也就是完成四则混合运算，重点说⼀下是怎么实现四则混合运算并且让结果显⽰出来的上⾯显⽰算式和结果的时候，我定义了⼀个全局变量的数组，每次点击按键，就把点击的那个按键的值push到数组⾥，这样显⽰的时候就直接把数组丢过去。

这样做的还有⼀个原因是点击退格键的时候就pop⼀下，点击清空键的时候就直接赋个空数组给数组变量，操作起来会容易⼀些接着很重要的⼀步是计算表达式，⽐如说输⼊ 3 * 4.5 - 1= 这样的⼀个表达式，怎么去求值呢，我想到的⽅法是先把输⼊的数组变成变成中缀表达式，再由中缀表达式转成后缀表达式，然后再进⾏后缀表达式求值1. ⾸先通过上⾯的数组处理得到了这样的⼀个数组['3','*','4','.','5','-','1']2. 把这个数组转换成字符串变为这样 “3*4.5-1”3. 接着处理成操作符和数字分开的新的数组 ['3','*','4.5','-','1']4. 处理完之后就是利⽤栈来将中缀表达式变为后缀表达式5. 再利⽤栈对后缀表达式求值，并且将结果填在=之后由于4.5步是数据结构中栈应⽤的内容，不清楚的可以回顾⼀下数据结构，⾄此就全部完成具体实现代码如上，分析的已经够多了，所以这块就话不多说，直接上代码.html⽂件<!DOCTYPE html><html><head><title>calculator</title><link rel="stylesheet" href="calculator.css" ><script src="calculator.js"></script></head><body><div><table border="1"><thead><th colspan="4"><input type="text" id="result" disabled></th></thead><tbody><tr><td><button class="operate" onclick="showNumber(this)">(</button></td><td><button class="operate" onclick="showNumber(this)">)</button></td><td><button class="operate" onclick="clearOneResult()">←</button></td><td><button class="operate" onclick="clearResult()">C</button></td></tr><tr><td><button class="calculate" onclick="showNumber(this)">7</button></td><td><button class="calculate" onclick="showNumber(this)">8</button></td><td><button class="calculate" onclick="showNumber(this)">9</button></td><td><button class="operate" onclick="showNumber(this)">*</button></td></tr><tr><td><button class="calculate" onclick="showNumber(this)">4</button></td><td><button class="calculate" onclick="showNumber(this)">5</button></td><td><button class="calculate" onclick="showNumber(this)">6</button></td><td><button class="operate" onclick="showNumber(this)">-</button></td></tr><tr><td><button class="calculate" onclick="showNumber(this)">1</button></td><td><button class="calculate" onclick="showNumber(this)">2</button></td><td><button class="calculate" onclick="showNumber(this)">3</button></td><td><button class="operate" onclick="showNumber(this)">+</button></td></tr><tr><td><button class="calculate" onclick="showNumber(this)">0</button></td><td><button class="calculate" onclick="showNumber(this)">.</button></td><td><button class="operate" onclick="showNumber(this)">/</button></td> <td><button class="operate" onclick="showAnswer()">=</button></td></tr></tbody></table></div></body></html>.css⽂件table{margin: 20px;padding: 1px;}th,input{height: 120px;width: 410px;background-color:rgb(233, 232, 232);text-align: right;font-size: 40px;}button{height: 100px;width: 100px;padding: 0px;font-size: 30px;}th,input,td,button{border: 0px;}.calculate{background-color: rgb(231, 231, 235);}.operate{color: coral;}button:hover{background-color: rgb(147, 241, 253);}.js⽂件var result = new Array();var ops = "+-*/";function arrToStr(arr) {var strResult = "";for (var i = 0; i < arr.length; i++) {strResult += arr[i];}return strResult;}function showResult() {document.getElementById("result").value = arrToStr(result);}function showNumber(id) {var val = id.innerHTML;result.push(val);showResult();}function showAnswer() {var answer = "";var str = arrToStr(result);var midExpre = strToExpress(str);var suffixExpre = midToSuffix(midExpre);answer = suffixValue(suffixExpre);//console.log(midExpre);//console.log(suffixExpre);document.getElementById("result").value = str + "=" + answer;}function clearResult() {result = [];showResult();}function clearOneResult() {result.pop();showResult();}function strToExpress(str) {var textArr = str.split('');var newTextArr = [];var calTextArr = [];for (var i = 0; i < str.length; i++) {if (ops.indexOf(str[i]) != -1 ) {newTextArr.push("|", str[i], "|");}else if (str[i] == '('){newTextArr.push(str[i], "|");}else if (str[i] == ')'){newTextArr.push("|", str[i]);}else {newTextArr.push(textArr[i]);}}calTextArr = newTextArr.join('').split('|');return calTextArr;}function midToSuffix(midExpre) {var opStack = [];var suffixExpre = [];for (var i = 0; i < midExpre.length; i++) {if (ops.indexOf(midExpre[i]) != -1 || midExpre[i] == '(' || midExpre[i] == ')' ) {if (midExpre[i] == '(' || opStack[opStack.length - 1] == '(') {opStack.push(midExpre[i]);}else if (midExpre[i] == ')') {do {suffixExpre.push(opStack.pop());} while (opStack[opStack.length - 1] != '(');opStack.pop();}else if (opStack.length == 0 || Priority(midExpre[i]) > Priority(opStack[opStack.length - 1])) { opStack.push(midExpre[i]);}else {do {suffixExpre.push(opStack.pop());} while (opStack.length > 0 && Priority(midExpre[i]) <= Priority(opStack[opStack.length - 1])); opStack.push(midExpre[i]);}}else {suffixExpre.push(midExpre[i]);}}while (opStack.length > 0) {suffixExpre.push(opStack.pop());}return suffixExpre;}function Priority(op) {var opPri = 0;switch (op) {case "+":opPri = 1;break;case "-":opPri = 1;break;case "*":opPri = 2;break;case "/":opPri = 2;break;}return opPri;}function suffixValue(suffixExpre) {var calStack = [];console.log(suffixExpre);for (var i = 0; i < suffixExpre.length; i++) {if (ops.indexOf(suffixExpre[i]) != -1) {var opRight = Number(calStack.pop());var opLeft = Number(calStack.pop());var tmpResult = 0;switch (suffixExpre[i]) {case '+':tmpResult = opLeft + opRight;break;case '-':tmpResult = opLeft - opRight;break;case '*':tmpResult = opLeft * opRight;break;case '/':tmpResult = opLeft / opRight;break;}calStack.push(tmpResult);}else {calStack.push(suffixExpre[i]);}console.log(calStack);}return calStack.pop();}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

第一个jsp代码实现简单计算器

第一个jsp代码实现简单计算器

第⼀个jsp代码实现简单计算器a．新建mycal.Jsp,把简单计算机的框架写出来：<form action="myresult.jsp">请输⼊第⼀个数：<input type="text" name="num1"><br><select name="flag"><option value=+>+</option><option value=+>-</option><option value=+>*</option><option value=+>/</option></select>请输⼊第⼆个数：<input type="text" name="num2"><br><input type="submit" value="计算"></form><br><hr><!-- 这⾥输出计算的结果 -->计算结果:<%= result %><!-- 表达式语法 --></body>b.新建myresul.jsp，把简单算法写进去：<body><%//接收第⼀个数String s_num1=request.getParameter("num1");//接收第⼆个数String s_num2=request.getParameter("num2");//接收预算符号String flag=request.getParameter("flag");int num1=0;int num2=0;int result=0;//java中 String--intnum1=Integer.parseInt(s_num1);num2=Integer.parseInt(s_num2);//计算if(flag.equals("+")){result=num1+num2;}else if (flag.equals("-")){result=num1-num2;}else if (flag.equals("*")){result=num1*num2;}else{result=num1/num2;}//输出结果out.print("结果是："+result)：%>c.这样运⾏的结果是没有问题的，如果更简化计算操作则需要将两个.jsp⽂件合并：<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%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%>"><title>My JSP 'ssss.jsp' starting page</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"><!-- 在jsp中添加js代码，防⽌⽤户空提交 --><script language="javascript">function checkNum(){//alert("shaji");//alert(form.num1.value);//判断num1，是不是空的if(form.num1.value==""){window.alert("num1,不能为空haha");}//判断num1，是不是⼀个数if(Math.round(form.num1.value)!=form.num1.value){window.alert("num1,不是⼀个数");}}</script></head><h1>我的计算器</h1><!-- 这是计算机的界⾯ --><body><%int result=0;//接收第⼀个数if(request.getParameter("num1")!=""){String s_num1=request.getParameter("num1");//接收第⼆个数String s_num2=request.getParameter("num2");//接收预算符号String flag=request.getParameter("flag");int num1=0;int num2=0;//int result=0;//java中 String--intif(s_num1!=null){num1=Integer.parseInt(s_num1);}if(s_num2!=null){num2=Integer.parseInt(s_num2);}//计算if(flag!=null){if(flag.equals("+")){result=num1+num2;}else if (flag.equals("-")){result=num1-num2;}else if (flag.equals("*")){result=num1*num2;}else{result=num1/num2;}//输出结果out.print("结果是："+result);}}%><form name="form" action="ssss.jsp">请输⼊第⼀个数：<input type="text" name="num1"><br><select name="flag"><option value=+>+</option><option value=->-</option><option value=*>*</option><option value=/>/</option></select>请输⼊第⼆个数：<input type="text" name="num2"><br> <input type="submit" value="计算" onclick="checkNum()" > </form><br><hr><!-- 这⾥输出计算的结果 -->计算结果:<%=result %><!-- 表达式语法 --></body></html>。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
济南建站公司：
如何用 js 实现简单计算器？
用 js 来实现一个简单计算器的功能，其实很简单，下面来介绍一下： <style> *{ padding:0; margin:0; } #aa{ width:200px; height:50px; line-height:50px; border: #CCC 1px solid; border-radius:4px; margin-left:10px; text -align:right;} ul{ width:200px;margin-left:10px;} ul#list li{ list-style:none; float:left;border:#CCC 1px s olid; width:25px; height:25px; border-radius:3px; marginright:6px; margin-top:5px; cursor:pointer; text-align:cen ter; line-height:25px;} </style> </head> <body> <div id="aa"></div> <ul id="list"> <li onclick="bb(this)">1</li> <li onclick="bb(this)">2</li> <li onclick="bb(this)">3</li> <li onclick="bb(this)">4</li> <li onclick="bb(this)">5</li> <li onclick="bb(this)">6</li> <li onclick="bb(this)">7</li> <li onclick="bb(this)">8</li> <li onclick="bb(this)">9</li> <li onclick="bb(this)">0</li> <li onclick="bb(this)">+</li> <li onclick="bb(this)">-</li> <li onclick="bb(this)">*</li> <li onclick="bb(this)">/</li> <li onclick="ss()">=</li> <li onclick="ii()">c</li> </ul> <script> var t=document.getElementById('aa');
这里用到的知识点是 innerHTML 与 eval()。innerHTMl 意思是获取 HTML 里面的元素,eval()的意思是求值。这里的等号与归零要分别执行函数，等号就用 到了 eavl()来求值；而归零的函数为空，相信都明白吧。
按照上面的步骤一个简单的计算器就实现了，当然还有很多其他的方法，这 里是小编自己的一种方法。
济南建站公司：
function bb(cc) { t.innerHTML=t.innerHTML+cc.innerHTML; } function ss(Байду номын сангаас { t.innerHTML=eval(t.innerHTML); } function ii() { t.innerHTML=''; } </script> 根据上述代码所示，每一个数字元素都要执行 bb 函数。当然除去归零与等 号。

相关主题