当前位置：文档之家 › Javascript计算器

Javascript计算器

  • 格式：doc
  • 大小：35.50 KB
  • 文档页数：5

下载文档原格式

  / 5

合集下载

Javascript个人所得税计算公式

Javascript个人所得税计算公式

本文由我司收集整编，推荐下载，如有疑问，请与我司联系Javascript 个人所得税计算公式!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”!-- saved from url=(0045)ctaxnews/temp/jsq/gssds.htm -- HTML HEAD TITLE 个人所得税计算器/TITLE META http-equiv=Content-type content=“text/html; charset=gb2312”META content=, name=keywords META content=此页面的说明name=description STYLE type=text/css TABLE { BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: medium none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING- TOP: 0px; BORDER-BOTTOM: medium none BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: medium none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING- TOP: 0px; BORDER-BOTTOM: medium noneIMG { BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: medium none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING- TOP: 0px; BORDER-BOTTOM: medium noneFORM { BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: medium none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING- TOP: 0px; BORDER-BOTTOM: medium none FONT-SIZE: 12px FONT-SIZE: 12px FONT-SIZE: 12pxSELECT { FONT-SIZE: 12pxINPUT { FONT-SIZE: 12pxTEXTAREA { FONT-SIZE: 12pxSELECT { BORDER-RIGHT: #49b8e3 1px solid; BORDER-TOP: #49b8e3 1px solid; BORDER-LEFT: #49b8e3 1px solid; BORDER- BOTTOM: #49b8e3 1px solid; BACKGROUND-COLOR: #e2f4ffINPUT { BORDER- RIGHT: #49b8e3 1px solid; BORDER-TOP: #49b8e3 1px solid; BORDER-LEFT: #49b8e3 1px solid; BORDER-BOTTOM: #49b8e3 1px solid; BACKGROUND-COLOR: #e2f4ffTEXTAREA { BORDER-RIGHT: #49b8e3 1px solid; BORDER-TOP: #49b8e3。

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();}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

htmljs实现简单的计算器代码(加减乘除)

htmljs实现简单的计算器代码(加减乘除)

下面小编就为大家带来一篇 html+js 实现简单的计算器代码 (加减乘除 ) 。

小编觉得挺不错的，现在就分享给大家，也给大家做个参考。

html+js 实现简单的计算器代码(加减乘除 )&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;table&gt;&nbsp; &lt;tr&gt;&nbsp; &nbsp;&lt;td&gt;&lt;input type="button"value="add" &nbsp;onclick="setOp('+', 'add');"/&gt;&lt;/td&gt;&nbsp; &nbsp;&lt;td&gt;&lt;input type="button"value="miner"onclick="setOp('-', 'miner');"/&gt;&lt;/td&gt;&nbsp; &nbsp;&lt;td&gt;&lt;input type="button"value="times"onclick="setOp('*', 'times');"/&gt;&lt;/td&gt;&nbsp; &nbsp;&lt;td&gt;&lt;input type="button"value="divide"onclick="setOp('/', 'divide');"/&gt;&lt;/td&gt;&nbsp; &lt;/tr&gt;&lt;/table&gt;&lt;table id="tb_calc" style="display:none;"&gt;&nbsp; &nbsp;&lt;tr&gt;&nbsp; &nbsp; &lt;td&gt; &lt;input id="x" type="text" style="width:100px" value="" name="x" /&gt;&lt;/td&gt;&nbsp; &nbsp; &lt;td&gt; &lt;lable id="op" name="op"&gt;&lt;/lable&gt; &lt;/td&gt;&nbsp; &nbsp; &lt;td&gt; &lt;input id="y" type="text" style="width:100px"value="" name="y" /&gt; &lt;/td&gt;&nbsp; &nbsp; &lt;td&gt; &lt;input id="opTips" type="button" value="" onclick="calc();"/&gt; &lt;/td&gt;&nbsp; &nbsp; &lt;td&gt; &lt;lable id="z" name="z"&gt;&lt;/lable&gt; &lt;/td&gt;&nbsp; &lt;/tr&gt;&lt;/table&gt;&lt;script type="application/javascript"&gt;&nbsp; function setOp(op, opTips)&nbsp; {&nbsp; &nbsp; var tb=document.getElementById("tb_calc");&nbsp; &nbsp; tb.style.display = "none";&nbsp; &nbsp; document.getElementById("x").value = "";&nbsp;&nbsp; &nbsp; document.getElementById("y").value = "";&nbsp;&nbsp; &nbsp; document.getElementById("z").innerText = "";&nbsp;&nbsp; &nbsp; document.getElementById("op").innerText = op;&nbsp; &nbsp; document.getElementById("opTips").value = opTips;&nbsp; &nbsp; tb.style.display = "block"; &nbsp; }&nbsp; function calc()&nbsp; {&nbsp; &nbsp; var x = parseInt(document.getElementById("x").value);&nbsp;&nbsp; &nbsp; var y = parseInt(document.getElementById("y").value);&nbsp; &nbsp; var op = document.getElementById("op").innerText; &nbsp;&nbsp; var z = "";&nbsp; &nbsp; switch(op)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; case '+':&nbsp; &nbsp; &nbsp; &nbsp; z = x + y;&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case '-':&nbsp; &nbsp; &nbsp; &nbsp; z = x - y;&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case '*': ;&nbsp; &nbsp; &nbsp; &nbsp; z = x * y;&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case '/': ;&nbsp; &nbsp; &nbsp; &nbsp; z = x / y;&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; z = '';&nbsp; &nbsp; }&nbsp; &nbsp; console.log(x, op, y, '=', z);&nbsp; &nbsp; document.getElementById("z").innerText = z;&nbsp; }&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;以上这篇 html+js 实现简单的计算器代码 (加减乘除 ) 就是小编分享给大家的全部内容了，希望能给大家一个参考。

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制作计算器5的阶乘的结果：源代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title> 计算器</title><script type="text/jabascript">var x;var y;var num;var flag;function chushihua(){x="start";y="start";num=0;flag=false;}function qingkong(){jisuan.input.value="0";x="start";y="start";}function addNum(i){if(flag==true)//是运算符{jisuan.input.value=i;flag=false;}else{if(jisuan.input.value=="0"){jisuan.input.value=i;}elsejisuan.input.value+=i;//不是第一个数}}function caozuo(x){flag=true;if(y=="start"){num=jisuan.input.value;y=x;}else{count();y=x;}}function count(){if(y!="start"){switch(y){case "+":num=parseFloat(num)+parseFloat(jisuan.input.value);break;case "-": num=parseFloat(num)-parseFloat(jisuan.input.value);break;case "*":num=parseFloat(num)*parseFloat(jisuan.input.value);break;case "/":num=parseFloat(num)/parseFloat(jisuan.input.value);break;}jisuan.input.value=num;flag=true;}flag="false";}function hanshu(fun){switch(fun){case "sin":jisuan.input.value=Math.sin(jisuan.input.value);break;case "cos":jisuan.input.value=Math.cos(jisuan.input.value);break;case "tan":jisuan.input.value=Math.tan(jisuan.input.value);break;case "asin":jisuan.input.value=Math.asin(jisuan.input.value);break;case "acos":jisuan.input.value=Math.acos(jisuan.input.value);break;case "atan":jisuan.input.value=Math.atan(jisuan.input.value);break;case "log":jisuan.input.value=Math.log(jisuan.input.value);break;case "ln":jisuan.input.value=Math.ln(jisuan.input.value);break;case "sqrt":jisuan.input.value=Math.sqrt(jisuan.input.value);break;case "1/x":jisuan.input.value=1/jisuan.input.value;break;case "%":jisuan.input.value=jisuan.input.value*0.01;break;}}function jiecheng(i){var num =jisuan.input.value;var sum = 1;for(var i = 1; i <= num; i++){sum *= i;}jisuan.input.value=sum;}function tuige(){jisuan.input.value = jisuan.input.value.substring(0,jisuan.input.value.length-1)jisuan.input.title = jisuan.input.value.substring(jisuan.input.title.length-1) }</script><style type="text/css">#按钮{width:55px;height:35px;color:blue;font-size:18px;}</style></head><body onload="chushihua()"><script src="6.js" language="javascript"></script><form name="jisuan"><table border="1" cellspacing=6 ><tr><td colspan="5" align=center><input type="text" size="43" value="0" name="input" style="height:25px;color:blue;font-weight:bold"</td></tr><tr><td><input type="button" value="7" onclick="addNum(7)" id=按钮></td><td><input type="button" value="8" onclick="addNum(8)" id=按钮></td><td><input type="button" value="9" onclick="addNum(9)" id=按钮></td><td><input type="button" value="退格" onclick="tuige()" id=按钮></td><td><input type="button" value="清空" onclick="qingkong()" id=按钮></td></tr><tr><td><input type="button" value="4" onclick="addNum(4)" id=按钮></td><td><input type="button" value="5" onclick="addNum(5)" id=按钮></td><td><input type="button" value="6" onclick="addNum(6)" id=按钮></td><td><input type="button" value="PI" onclick="jisuan.input.value=Math.PI" id=按钮></td><td><input type="button" value="E" onclick="jisuan.input.value=Math.E" id=按钮></td></tr><tr><td><input type="button" value="1" onclick="addNum(1)" id=按钮></td><td><input type="button" value="2" onclick="addNum(2)" id=按钮></td><td><input type="button" value="3" onclick="addNum(3)" id=按钮></td><td><input type="button" value="+" onclick="caozuo('+')" id=按钮></td><td><input type="button" value="-" onclick="caozuo('-')" id=按钮></td></tr><tr><td><input type="button" value="0" onclick="addNum('0')" id=按钮></td><td><input type="button" value="·" onclick="addNum('.')" id=按钮></td><td><input type="button" value="n!" onclick="jiecheng()" id=按钮></td><td><input type="button" value="*" onclick="caozuo('*')" id=按钮></td><td><input type="button" value="/" onclick="caozuo('/')" id=按钮></td></tr><tr><td><input type="button" value="sin" onclick="hanshu('sin')" id=按钮></td><td><input type="button" value="cos" onclick="hanshu('cos')" id=按钮></td><td><input type="button" value="tan" onclick="hanshu('tan')" id=按钮></td><td><input type="button" value="(" onclick="caozuo('(')" id=按钮></td><td><input type="button" value=")" onclick="caozuo(')')" id=按钮></td></tr><tr><td><input type="button" value="asin" onclick="hanshu('asin')" id=按钮></td><td><input type="button" value="acos" onclick="hanshu('acos')" id=按钮></td><td><input type="button" value="atan" onclick="hanshu('atan')" id=按钮></td><td><input type="button" value="1/x" onclick="hanshu('1/x')"id=按钮></td><td><input type="button" value="%" onclick="hanshu('%')" id=按钮></td></tr><tr><td><input type="button" value="log" onclick="hanshu('log')" id=按钮></td><td><input type="button" value="ln" onclick="hanshu('ln')" id=按钮></td><td><input type="button" value="sqrt" onclick="hanshu('sqrt')" id=按钮></td><td colspan="2"><input type="button" value="=" onclick="caozuo('=')"style="width:120px;height:35px;"></td></tr></table></form></body></html>五、总结在我刚开始用JavaScript写程序的时候，感觉很不习惯，因为它以前学习的C语言有些相似，但具体又不一样，语法要求不是那么严格。

简易计算器小程序使用微信小程序开发工具和JavaScript开发

简易计算器小程序使用微信小程序开发工具和JavaScript开发微信小程序是一种基于微信平台的轻量级应用程序，可以在微信中使用。

它具有开发简便、使用方便、功能丰富等特点，在各行各业都得到了广泛的应用。

本文将介绍如何使用微信小程序开发工具和JavaScript开发一个简易计算器小程序。

一、准备工作在开始开发之前，我们需要准备一些基本的工具和环境。

首先，下载并安装微信小程序开发工具，该工具提供了一个可视化的界面，方便我们进行小程序的开发和调试。

其次，我们需要熟悉JavaScript语言的基本语法和特性，因为小程序的逻辑部分主要使用JavaScript来实现。

二、创建小程序项目打开微信小程序开发工具，点击新建项目，填写项目名称、项目目录和AppID等信息。

点击确定后，工具会自动生成一个基本的小程序项目结构。

三、编写界面在小程序项目的根目录下，找到和页面相关的文件夹。

新建一个名为"calculator"的文件夹，用于存放计算器页面的相关文件。

在该文件夹下新建三个文件：calculator.wxml、calculator.wxss、calculator.js，分别用于编写页面的结构、样式和逻辑。

在calculator.wxml文件中，我们可以使用一些基本的标签来构建计算器的界面，例如view、text、button等。

使用这些标签，我们可以创建一个包含数字键盘和运算符键的界面。

在calculator.wxss文件中，我们可以设置各个标签的样式，使界面看起来更加美观。

可以设置按钮的背景色、边框样式等。

四、编写逻辑在calculator.js文件中，我们需要编写计算器的逻辑代码。

首先，我们需要定义一些变量来保存计算器的状态。

比如，一个变量用于保存用户输入的表达式，一个变量用于保存计算结果等。

然后，我们可以通过监听用户的点击事件来获取用户输入的数字和运算符，并更新表达式变量的值。

接下来，我们需要编写一个计算函数，用于根据用户输入的表达式计算结果。

javascript数学函数

javascript数学函数JavaScript提供了许多内置的数学函数。

以下是一些例子：
1. Math.abs(x)：返回x的绝对值。

2. Math.acos(x)：返回x的反余弦值（以弧度为单位）。

3. Math.asin(x)：返回x的反正弦值（以弧度为单位）。

4. Math.atan(x)：返回x的反正切值（以弧度为单位）。

5. Math.ceil(x)：返回大于或等于x的最小整数。

6. Math.cos(x)：返回x的余弦值（以弧度为单位）。

7. Math.exp(x)：返回e的x次幂。

8. Math.floor(x)：返回小于或等于x的最大整数。

9. Math.log(x)：返回x的自然对数。

10. Math.max(...args)：返回传入的零个或多个参数中的最大值。

11. Math.min(...args)：返回传入的零个或多个参数中的最小值。

12. Math.pow(x, y)：返回x的y次幂。

13. Math.random()：返回一个介于0（包括）和1（不包括）之间的随机数。

14. Math.round(x)：返回x的四舍五入值。

15. Math.sin(x)：返回x的正弦值（以弧度为单位）。

16. Math.sqrt(x)：返回x的平方根。

17. Math.tan(x)：返回x的正切值（以弧度为单位）。

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;});```在以上代码中，我们定义了四个函数来处理加、减、乘、除四则运算。

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()`函数将结果输出到屏幕上。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Insert title here</title><script type="text/javascript">var FKeyPad=document.KeyPad;var Accum=0;var FlagNewNum=false;var PendingOp="";function NumPressed(Num){var num=document.getElementById("ReadOut").value;if(FlagNewNum){num=Num;FlagNewNum=false;}else{if(num=="0")num=Num;elsenum+=Num;}document.getElementById("ReadOut").value=num;}function Operation(Op){//alert(Op);var num=document.getElementById("ReadOut").value;if(FlagNewNum&&PendingOp!="=");else{FlagNewNum=true;if('+'==PendingOp)Accum+=parseFloat(num);else if('-'==PendingOp)Accum-=parseFloat(num);else if('/'==PendingOp)Accum/=parseFloat(num);else if('*'==PendingOp)Accum*=parseFloat(num);elseAccum=parseFloat(num);document.getElementById("ReadOut").value=Accum;PendingOp=Op;}}function Decimal(){var curReadOut=document.getElementById("ReadOut").value;;if(FlagNewNum){curReadOut= "0.";FlagNewNum=false;}else{if(curReadOut.indexOf(".")==-1)curReadOut+=".";}document.getElementById("ReadOut").value=curReadOut;}function ClearEntry(){document.getElementById("ReadOut").value="0";FlagNewNum=true;}function Clear(){Accum=0;PendingOp="";ClearEntry();}function Neg(){document.getElementById("ReadOut").value=parseFloat(document.getElementById("ReadO ut").value)*-1;}function Percent(){document.getElementById("ReadOut").value=parseFloat(document.getElementById("ReadO ut").value)*0.01;}</script></head><body><form action="#" ><table id="KeyPad" border="1"><tr><td colspan="3" align="center"><input id="ReadOut" type="text" size="24" value="0"/></td><td></td><td><input name="btnClear" type="button" value="C" onclick="Clear()"/><td><input name="btnClearEntry" type="button" value="CE" onclick="ClearEntry()"/></td></tr><tr><td><input name="btnSeven" type="button" value="7" onclick="NumPressed(7)"/></td><td><input name="btnEight" type="button" value="8" onclick="NumPressed(8)"/></td><td><input name="btnNine" type="button" value="9" onclick="NumPressed(9)"/></td><td></td><td><input name="btnNeg" type="button" value="+/-" onclick="Neg()"/></td><td><input name="btnPercent" type="button" value="%" onclick="Percent()"/></td></tr><tr><td><input name="btnFour" type="button" value="4" onclick="NumPressed(4)"/></td><td><input name="btnFive" type="button" value="5" onclick="NumPressed(5)"/></td><td><input name="btnSix" type="button" value="6" onclick="NumPressed(6)"/></td><td></td><td align="center"><input name="btnPlus" type="button" value="+" onclick="Operation('+')"/><td align="center"><input name="btnMinus" type="button" value="-" onclick="Operation('-')"/></td></tr><tr><td><input name="btnOne" type="button" value="1" onclick="NumPressed(1)"/></td><td><input name="btnTwo" type="button" value="2" onclick="NumPressed(2)"/></td><td><input name="btnThree" type="button" value="3" onclick="NumPressed(3)"/></td><td></td><td align="center"><input name="btnMultiply" type="button" value="*" onclick="Operation('*')"/></td><td align="center"><input name="btnDivide" type="button" value="/" onclick="Operation('/')"/></td></tr><tr><td><input name="btnZero" type="button" value="0" onclick="NumPressed(0)"/></td><td><input name="btnDecimal" type="button" value="." onclick="Decimal()"/></td><td colspan="3"></td><td><input name="btnEquals" type="button" value="=" onclick="Operation('=')"/></td></tr></table> </form></body></html>。