使用js,css,html做的web版的计算器

合集下载

html简易计算机代码

html简易计算机代码HTML简易计算机代码HTML是一种标记语言，可以用来创建网页。

除了网页的基本结构和样式，HTML还可以用来创建简单的计算机代码。

下面是一些常见的HTML计算机代码：1. 加法加法可以用HTML的表单元素来实现。

例如，下面的代码可以让用户输入两个数字，然后计算它们的和：```<form><label for="num1">第一个数字：</label><input type="number" id="num1" name="num1"><br><label for="num2">第二个数字：</label><input type="number" id="num2" name="num2"><br><input type="button" value="计算" onclick="alert(parseInt(document.getElementById('num1').val ue) + parseInt(document.getElementById('num2').value))"></form>```2. 减法减法也可以用HTML的表单元素来实现。

例如，下面的代码可以让用户输入两个数字，然后计算它们的差：```<form><label for="num1">第一个数字：</label><input type="number" id="num1" name="num1"><br><label for="num2">第二个数字：</label><input type="number" id="num2" name="num2"><br><input type="button" value="计算" onclick="alert(parseInt(document.getElementById('num1').val ue) - parseInt(document.getElementById('num2').value))"></form>```3. 乘法乘法可以用HTML的表单元素和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();}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

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" /></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>。

简单计算机html代码

当涉及到简单计算器的HTML代码时，以下是一个基本的示例：<!DOCTYPE html><html><head><title>简单计算器</title><script>function calculate() {var num1 = parseFloat(document.getElementById('num1').value);var num2 = parseFloat(document.getElementById('num2').value);if (isNaN(num1) || isNaN(num2)) {document.getElementById('result').value = '请输入有效的数字';return;}var operator = document.getElementById('operator').value;var result;switch (operator) {case '+':result = num1 + num2;break;case '-':result = num1 - num2;break;case '*':result = num1 * num2;break;case '/':result = num1 / num2;break;default:result = '无效的运算符';}document.getElementById('result').value = result;}</script></head><body><h1>简单计算器</h1><label for="num1">数字1：</label><input type="text" id="num1"><br><label for="num2">数字2：</label><input type="text" id="num2"><br><label for="operator">运算符：</label><select id="operator"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><br><button onclick="calculate()">计算</button><br><label for="result">结果：</label><input type="text" id="result" disabled></body></html>上述代码创建了一个简单的计算器界面，用户可以输入两个数字，选择运算符，然后点击"计算"按钮执行计算操作。

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>```在这个表单中，我们使用了四个数字按钮、四个运算符按钮和一个清除按钮。

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

web开发练习题

web开发练习题Web开发是目前互联网时代的一个重要领域，掌握Web开发技术对于从事互联网相关工作的人来说至关重要。

为了帮助初学者熟悉和提升自己的Web开发能力，以下是一些适合练习的Web开发题目。

题目一：HTML基础1. 创建一个HTML页面，包含一个标题和一个段落，并设置页面的背景颜色为浅蓝色。

2. 在HTML页面中插入一张图片，并设置宽度和高度。

3. 创建一个HTML表格，包含四行四列，并设置表格边框颜色。

题目二：CSS样式1. 创建一个CSS文件，在HTML页面中引入该CSS文件，并设置段落的字体颜色和字体大小。

2. 使用CSS创建一个带有动画效果的按钮，鼠标悬停在按钮上时，按钮的颜色和大小要发生变化。

题目三：JavaScript交互1. 创建一个JavaScript脚本，在HTML页面中引入该脚本，并实现一个计算器功能，能够进行基本的数学运算。

2. 使用JavaScript编写一个表单验证的功能，确保用户输入的内容符合要求。

题目四：数据库操作1. 基于MySQL数据库，创建一个包含用户信息的表格，包括用户名、密码和邮箱地址。

2. 使用PHP编写一个注册页面，将用户输入的信息插入到数据库中。

题目五：服务器端开发1. 使用Node.js创建一个简单的Web服务器，能够监听并处理客户端的请求，并返回响应。

2. 为Web服务器添加一个路由功能，根据不同的URL路径返回不同的内容。

题目六：响应式设计1. 创建一个响应式的网页，能够适应不同屏幕尺寸的设备，并做到页面的内容和布局自动调整。

通过完成以上练习题，你将能够巩固和拓展自己的Web开发技能。

同时，可以进一步挑战更复杂的练习题，不断提升自己的能力。

祝你在Web开发的学习和实践中取得好成果！。

网页计算器

网页计算器网页计算器的出现给我们的生活带来了极大的便利。

它可以帮助我们快速进行数字计算，并且能够处理更复杂的数学问题。

在没有网页计算器之前，我们需要依靠手动计算或借助传统计算器来完成这些任务。

然而，随着科技的进步，网页计算器已经成为了计算手段的一种重要选择。

首先，网页计算器的出现节省了我们大量的时间和精力。

以前，我们需要拿出传统计算器或者计算软件，然后输入数字，进行各种计算。

而现在，只需打开一个网页，网页计算器就出现在我们面前了。

我们只需在网页上输入数据，点击计算按钮，就能够立即得到计算结果。

这样便捷又高效的计算方式，大大地提升了我们的工作效率。

其次，网页计算器的功能越来越强大。

现如今的网页计算器不仅可以进行简单的加减乘除运算，还能处理各种复杂的数学问题。

比如，我们可以使用网页计算器计算复杂的方程式、解决几何问题、进行统计分析等等。

这些功能的增加，使得网页计算器成为了学习、工作和生活中的得力助手。

此外，网页计算器还具备了一些便利的特性。

比如，它可以保存我们的计算记录，方便我们回顾和参考。

它还可以将计算结果进行分享，让我们可以方便地与他人交流和合作。

另外，网页计算器还会自动检测并纠正我们可能输入的错误，避免了错误计算带来的麻烦。

这些特性的存在使得网页计算器成为了一个功能强大又易于使用的工具。

然而，虽然网页计算器的出现给我们带来了很多便利，但也有一些问题需要我们关注和解决。

首先，网页计算器的准确性是一个重要的问题。

由于计算过程是由计算机程序来完成的，而程序中的错误是难免的。

如果网页计算器出现了错误，那么计算结果就会产生误差。

因此，在使用网页计算器时，我们需要保持警惕，对计算结果进行核对和验证。

此外，我们还要警惕网络安全问题。

网页计算器需要我们输入一些敏感的数据，比如银行卡号和密码等。

如果计算器的网页存在安全漏洞，那么这些敏感信息就有可能被黑客窃取。

因此，我们要选择正规的、有信誉的网页计算器来保护我们的个人信息安全。

计算器制作方法

计算器制作方法制作计算器的方法有很多种，下面我将介绍一种简单的方法。

1.设计计算器的界面：首先，你需要决定计算器的外观和布局。

可以在纸上或者电脑上绘制你理想中的计算器样式，包括数字键、操作键、显示屏等。

考虑布局的合理性，使得用户可以方便地按键和查看结果。

2.编写HTML和CSS代码：使用HTML和CSS语言创建计算器的界面。

HTML用来构建网页结构，CSS用来对界面进行样式设计，如字体、颜色、大小等。

根据设计好的样式，编写HTML和CSS代码，将计算器的界面布局和样式实现出来。

3.添加JavaScript代码：编写JavaScript代码实现计算器的功能。

JavaScript是一种脚本语言，可以在网页中添加交互和动态效果。

根据计算器的功能需求，编写JavaScript代码实现数字输入、运算操作、结果显示等功能。

你可以使用JavaScript的计算功能和条件判断语句来实现计算器的基本功能。

4.进行测试和调试：完成代码编写后，进行测试和调试。

确保计算器能够正确地接收用户输入、执行运算操作，并且能够正确地显示结果。

测试过程中需要注意输入的边界情况和错误处理，确保计算器的稳定性和可靠性。

5.部署和发布：当计算器的功能完备且稳定后，可以将它部署到服务器或者上传到网页空间，供用户访问和使用。

你可以使用云服务提供商提供的服务器或者自己搭建服务器，将计算器的页面文件和相关资源上传到服务器上。

然后，用户可以通过浏览器访问你的计算器网页并使用它进行计算。

以上就是制作计算器的简单方法。

当然，如果你希望计算器功能更加复杂和完备，可以继续学习和探索相关技术，例如使用JavaScript的高级功能、添加动画效果等。

希望对你有所帮助！。

js+html实现简易网页计算器

js+html实现简易⽹页计算器前⾔很早之前就想⽤js写⼀个简单的计算器，今天这个⼼愿算是完成了，作为⽤js做的第⼀个⼩项⽬，挣扎了⼀下午，代码其实挺简单的，⽆奈本⼈太菜了，代码⼗分钟，bug半⼩时；图⽚展⽰其实第⼀张图才是我想做的计算器，但是最上⾯⼀⾏的功能⽆法实现，并且第⼀张是⽤grid布局写的，添加js不⽅便，于是我⼜写了第⼆张图的界⾯这个计算器的主要特点就是可以在屏幕上显⽰出⽤户想要计算的整个表达式，然后直接计算出结果，⽽不需要每进⾏⼀次加减乘除的运算都要按等于号；功能与界⾯是仿照的vivo⼿机⾃带的计算器，由于我⽤的就是vivo⼿机；html 部分1、第⼀张图⽚<div class="container"><input type="button" id="screen"><input type="button" id="mc" value="mc"><div id="m1"> m+</div><div id="m-"> m-</div><div id="mr"> mr</div><div id="ac">AC </div><div id="delete"><-</div><div id="bracket"> +/-</div><div id="chu"> ÷</div><div id="num7">7</div><div id="num8">8</div><div id="num9">9</div><div id="num4">4</div><div id="num5">5</div><div id="num6">6</div><div id="num1">1</div><div id="num2">2</div><div id="num3">3</div><div id="cheng">×</div><div id="num0">0</div><div id="spot">.</div><div id="add">+</div><div id="minus">-</div><div id="equal">=</div></div>2、第⼆张图⽚<body><table><tr><td colspan="4"><input class="screen" type="text" disabled /></td></tr><tr><td><input class="but_ac but" type="button" value="AC" style="color: orange"></td><td><input class="but_ac but" type="button" value="<—" style="color: orange"></td><td><input class="but" type="button" value="+/-"></td><td><input class="but" type="button" value="/"></td></tr><tr><td><input class="but" type="button" value="7"></td><td><input class="but" type="button" value="8"></td><td><input class="but" type="button" value="9"></td><td><input class="but" type="button" value="*"></td></tr><tr><td><input class="but" type="button" value="4"></td><td><input class="but" type="button" value="5"></td><td><input class="but" type="button" value="6"></td><td><input class="but" type="button" value="-"></td></tr><tr><td><input class="but" type="button" value="1"></td><td><input class="but" type="button" value="2"></td><td><input class="but" type="button" value="3"></td><td><input class="but" type="button" value="+"></td></tr><tr><td colspan="2"><input class="but" type="button" value="0" style="width: 180px"></td><td><input class="but" type="button" value="."></td><td><input class="but" type="button" value="=" style="background-color:orange ;color:white"></td></tr></table></body>html部分就是简单的⽤table写的，在单元格内嵌套按钮，为了和⼿机上的界⾯更像，AC、<-、=这三个按钮单独设置了字体颜⾊和背景颜⾊；eval函数在计算表达式的时候，只能识别乘号和除号只能识别*和/，⽽不是数学上的×和÷，因此，按钮修改了⼀下，下⾯的代码在⽹页打开之后，和上⾯的图⽚两个按钮有所不同；css部分第⼀张图⽚的.container{display: grid;width: 350px;height: 550px;grid-template-columns:repeat(4,25%); grid-template-rows:repeat(8,12.5%); background-color:lightgray;margin-top: 50px;text-align: center;line-height: 68.75px;font-size: 1.5em;}#screen{grid-column: 1/5;grid-row: 1/3;background-color: black;}#mc{grid-column: 1/2;grid-row: 3/4;border:solid 1px gray;border-left: 0px;font-size: 1.1em;background-color:lightgray;}#m1{grid-column: 2/3;grid-row: 3/4;border:solid 1px gray;border-left: 0px;}#m-{grid-column:3/4;grid-row: 3/4;border:solid 1px gray;border-left: 0px;}#mr{grid-column: 4/5;grid-row: 3/4;border:solid 1px gray;border-right: 0px;border-left: 0px;}#ac{grid-column:1/2;grid-row: 4/5;border:solid 1px gray;border-left: 0px;color: orange;border-top: 0px;}#delete{grid-column:2/3;grid-row: 4/5;border:solid 1px gray;border-left: 0px;color: orange;border-top: 0px;}#bracket{grid-column:3/4;grid-row: 4/5;border:solid 1px gray;border-left: 0px;border-top: 0px;}#chu{grid-column:4/5;grid-row: 4/5;border:solid 1px gray;border-left: 0px;border-top: 0px;border-right: 0px;}#num7{grid-column:1/2;grid-row: 5/6;border:solid 1px gray;border-left: 0px;}#num8{grid-column:2/3;grid-row: 5/6;border:solid 1px gray; border-left: 0px;border-top: 0px;}#num9{grid-column:3/4;grid-row: 5/6;border:solid 1px gray; border-left: 0px;border-top: 0px;}#cheng{grid-column:4/5;grid-row: 5/6;border:solid 1px gray; border-left: 0px;border-top: 0px;border-right: 0px;}#num4{grid-column:1/2;grid-row: 6/7;border:solid 1px gray; border-left: 0px;border-top: 0px;}#num5{grid-column:2/3;grid-row: 6/7;border:solid 1px gray; border-left: 0px;border-top: 0px;}#num6{grid-column:3/4;grid-row: 6/7;border:solid 1px gray; border-left: 0px;border-top: 0px;}#minus{grid-column:4/5;grid-row: 6/7;border:solid 1px gray; border-left: 0px;border-top: 0px;border-right: 0px;}#num1{grid-column:1/2;grid-row: 7/8;border:solid 1px gray; border-left: 0px;border-top: 0px;}#num2{grid-column:2/3;grid-row: 7/8;border:solid 1px gray; border-left: 0px;border-top: 0px;}#num3{grid-column:3/4;grid-row: 7/8;border:solid 1px gray; border-left: 0px;border-top: 0px;}#add{grid-column:4/5;grid-row: 7/8;border:solid 1px gray; border-left: 0px;border-top: 0px;border-right: 0px;}#num0{grid-row: 8/9;border:solid 1px gray;border-left: 0px;border-top: 0px;}#spot{ grid-column:3/4;grid-row: 8/9;border:solid 1px gray;border-left: 0px;border-top: 0px;}#equal{grid-column:4/5;grid-row: 8/9;border:solid 1px gray;border-left: 0px;border-top: 0px;border-right: 0px;color: white;background-color: orange;}第⼆张图⽚的<style type="text/css">table{margin:0 auto; //使整个计算器的界⾯位于⽹页中央}.but_ac{width: 80px;height: 60px;background-color : lightgray; //设置按钮的背景颜⾊为浅灰⾊font-size: 1.2em; //设置字体⼤⼩}.but{width: 80px;height: 60px;background-color : lightgray;font-size: 1.2em;}.screen{width: 350px;height: 70px;font-size: 1.5em;color: white;background-color: black;text-align:right; //使⽤户输⼊的表达数从屏幕的右边开始显⽰}</style>js部分思路获取⽤户所点击的按钮上的元素将获取的元素显⽰在屏幕上调⽤eval函数计算表达式的结果整体就是⽤⼀连串的if else语句判断你所点击的按钮，然后作出回应代码<script type="text/javascript">window.onload=function(){var num=document.getElementsByClassName("but"); //num数组存放元素对象var scr=document.getElementsByClassName("screen")[0]; //获取屏幕对象for(var i=0;i<num.length;i++) //通过for循环为每个按钮添加onclick事件{num[i].onclick=function(){if(this.value=="AC"){ //如果点击AC，则清空屏幕scr.value="";}else if( this.value=="+/-"){ //如果点击“+/-”按钮有两种情况//第⼀种情况，如果此时屏幕为空，则什么也不显⽰if(scr.value==""){scr.value="";}//如果屏幕不为空，就判断最后两个元素是不是运算符加数字的结构else if(isNaN(scr.value.charAt(scr.value.length- 1))==false&&isNaN(scr.value.charAt(scr.value.length-2))==true) {//给最后⼀个数字加括号并变为负数}}//当屏幕不为空时，判断点击的是不是退格键else if (this.value=="<—"&&this.value!=""){//将最后⼀个元素截掉scr.value=scr.value.substr(0,scr.value.length-1);}//当屏幕为空时判断是否点击的是⼩数点else if(scr.value==""&&this.value=="."){scr.value="0.";}//当点击等于号时，⽤eval函数计算表达式的结果并显⽰到屏幕上else if(this.value=="="){scr.value=eval(scr.value);}//当屏幕为空时，点击+、-、*、/时不做反应else if(scr.value==""&&(this.value=="+"||this.value=="-"||this.value=="*"||this.value=="/")) {scr.value=="";}else{scr.value+=this.value;}}}}</script>完整代码<!DOCTYPE html><html><head><title>jsss</title><style type="text/css">table{margin:0 auto;}.but_ac{width: 80px;height: 60px;background-color : lightgray;font-size: 1.2em;}.but{width: 80px;height: 60px;background-color : lightgray;font-size: 1.2em;}.screen{width: 350px;height: 70px;font-size: 1.5em;color: white;background-color: black;text-align:right;}</style><script type="text/javascript">window.onload=function(){var result;var str=[];var num=document.getElementsByClassName("but");var scr=document.getElementsByClassName("screen")[0];for(var i=0;i<num.length;i++){num[i].onclick=function(){if(this.value=="AC"){scr.value="";}else if( this.value=="+/-"){if(scr.value==""){scr.value="";else if(isNaN(scr.value.charAt(scr.value.length-1))==false&&isNaN(scr.value.charAt(scr.value.length-2))==true) {scr.value=scr.value.substr(0,scr.value.length-1)+"("+"-"+scr.value.charAt(scr.value.length-1)+")";}}else if (this.value=="<—"&&this.value!=""){scr.value=scr.value.substr(0,scr.value.length-1);}else if(scr.value==""&&this.value=="."){scr.value="0.";}else if(this.value=="="){scr.value=eval(scr.value);}else if(scr.value==""&&(this.value=="+"||this.value=="-"||this.value=="*"||this.value=="/")){scr.value=="";}else{scr.value+=this.value;}}}}</script></head><body><table><tr><td colspan="4"><input class="screen" type="text" disabled /></td></tr><tr><td><input class="but_ac but" type="button" value="AC" style="color: orange"></td><td><input class="but_ac but" type="button" value="<—" style="color: orange"></td><td><input class="but" type="button" value="+/-"></td><td><input class="but" type="button" value="/"></td></tr><tr><td><input class="but" type="button" value="7"></td><td><input class="but" type="button" value="8"></td><td><input class="but" type="button" value="9"></td><td><input class="but" type="button" value="*"></td></tr><tr><td><input class="but" type="button" value="4"></td><td><input class="but" type="button" value="5"></td><td><input class="but" type="button" value="6"></td><td><input class="but" type="button" value="-"></td></tr><tr><td><input class="but" type="button" value="1"></td><td><input class="but" type="button" value="2"></td><td><input class="but" type="button" value="3"></td><td><input class="but" type="button" value="+"></td></tr><tr><td colspan="2"><input class="but" type="button" value="0" style="width: 180px"></td><td><input class="but" type="button" value="."></td><td><input class="but" type="button" value="=" style="background-color:orange ;color:white"></td></tr></table></body></html>。

简单计算器的制作

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

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

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

该计算器将使用基本的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>` 元素，分别代表加法、减法、乘法和除法，这些元素的值分别为 "+"、"-"、"*"和"/"。

html+js实现简单的计算器代码（加减乘除）

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

HTML写网页计算器

HTML写网页计算器第一种：<!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=gb2312" /><title>无标题文档</title><script language="javascript">function jsq(fh){var num1,num2;num1=parseFloat(document.form1.text1.value);num2=parseFloat(document.form1.text2.value);if(fh=="+")document.form1.text3.value=num1+num2;if(fh=="-")document.form1.text3.value=num1-num2;if(fh=="*")document.form1.text3.value=num1*num2;if(fh=="/")if(num2!=0){document.form1.text3.value=num1/num2;}else{alert ("除数不能为零!")}}</script></head><body><form id="form1" name="form1" method="post" action=""><label><input name="text1" type="text" id="text1" /></label><p><label><input name="text2" type="text" id="text2" /></label></p><p><label><input name="Button1" type="Button" id="Button1" value="+" onClick="jsq('+')"><input name="Button2" type="Button" id="Button2" value="-" onClick="jsq('-')"/><input name="Button3" type="Button" id="Button3" value="*" onClick="jsq('*')"/><input name="Button4" type="Button" id="Button4" value="/" onClick="jsq('/')"/></label></p><p><label><input name="text3" type="text" id="text3" /></label></p></form></body></html>第二种：<html><head><META http-equiv="Content-Type" content="text/html; charset=gb2312"><title>简易计算器</title><style type="text/css">body{background-color:pink;}table{border-left:1 #FFFFFF solid;border-top:1 #FFFFFF solid;}.input1{border-right: #FFFFFF 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid;border-bottom: #FFFFFF 1px solid;width:180px;background-color:#FFFFFF;text-align:right;}input{border-right: #000000 1px solid; BORDER-TOP: #ffffff 1px solid; border-left: #ffffff 1px solid; color: #000080; border-bottom: #000000 1px solid; background-COLOR: #d8d8d0;width:40px;height:20px;}td{border-bottom:#FFFFFF 1 solid;border-right:#FFFFFF 1 solid;height:25px;}</style><script language="javascript">var total=0; //全局变量total,累计输入var FlagNew = false; //是否是新的操作数（输入的第二个数）var Opp = ""; //运算符变量function clearall(){total=0;document.myform.number.value=0;//清除结果}function enternumber(Num){ //数字按钮单击调用的函数，Num表示输入的数字if (FlagNew) { //判断输入的是否新的操作数document.myform.number.value = Num;FlagNew = false;}else {if (document.myform.number.value== "0")document.myform.number.value= Num;elsedocument.myform.number.value+= Num; //记录输入的操作数}}function Operation (Op) { //“加减乘除”按钮单击调用的函数，Op代表运算符号var Num1=document.myform.number.value;if (FlagNew && Opp != "=");{FlagNew = true;// 根据运算符进行运算if ( '+' == Opp)total +=parseFloat(Num1);else if ( '-' == Opp)total -=parseFloat(Num1);else if ( '/' == Opp)total /=parseFloat(Num1);else if ( '*' == Opp)total *=parseFloat(Num1);else{total =parseFloat(Num1); }document.myform.number.value= total; //结果文本框累计数字Opp = Op;}}</script></head><body><h3 align="center">简易计算器</h1><table width="180" border="0" cellspacing="0" cellpadding="3"align="center"> <form action="" method="post" name="myform"><tr><td colspan="4"><input name="number" type="text" class="input1" value="0"></td></tr><tr><td><input name="number7" type="button" value="7" onClick="enternumber(7)"> </td><td><input name="number8" type="button" value="8" onClick="enternumber(8)"> </td><td><input name="number9" type="button" value="9" onClick="enternumber(9)"> </td><td><input name="number+" type="button" value="+" onClick="Operation('+')"> </td></tr><tr><td><input name="number4" type="button" value="4" onClick="enternumber(4)"> </td><td><input name="number5" type="button" value="5" onClick="enternumber(5)"> </td><td><input name="number6" type="button" value="6" onClick="enternumber(6)"> </td><td><input name="number-" type="button" value="-" onClick="Operation('-')"></td></tr><tr><td><input name="number1" type="button" value="1" onClick="enternumber(1)"> </td><td><input name="number2" type="button" value="2" onClick="enternumber(2)"> </td><td><input name="number3" type="button" value="3" onClick="enternumber(3)"> </td><td><input name="number*" type="button" value="*" onClick="Operation('*')"> </td></tr><tr><td><input name="number0" type="button" value="0" onClick="enternumber(0)"> </td><td><input name="numberC" type="button" value="C" onClick="clearall();"> </td><td><input name="number=" type="button" value="=" onClick="Operation('=')"> </td><td><input name="number/" type="button" value="/" onClick="Operation('/')"> </td></form></table></body></html>第三种：<!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=gb2312" /><title>html写计算器</title><script language="javascript">function jsq(form){var num1,num2,fh;num1=parseFloat(document.form1.text1.value);num2=parseFloat(document.form1.text2.value);fh=document.form1.fh.value;if(fh==1){document.form1.text3.value=num1+num2;}else if(fh==2)document.form1.text3.value=num1-num2;else if(fh==3)document.form1.text3.value=num1*num2;else if(fh==4)if(num2!=0){document.form1.text3.value=num1/num2;}else{alert ("除数不能为零!")}}</script></head><body><form id="form1" name="form1"><label><input type="text" name="text1" /></label><label><select id="select1" name="fh"><option value="1">+</option><option value="2">-</option><option value="3">*</option><option value="4">/</option></select></label><label><input type="text" name="text2" /></label><label><input type="button" name="btn" value="=" onclick="jsq(form1)"/> </label><label><input type="text" name="text3" /></label></form></body></html>。

JS实现计算器带三角函数根号

JS实现计算器带三角函数根号以下是一个使用JavaScript实现的计算器代码，它包含了三角函数、开方等功能。

总字数超过1200字，但是实际代码量并不多，请自行补充。

```javascript//获取页面元素const display = document.getElementById("display");const buttons = document.getElementsByClassName("btn");//绑定按钮事件for (let i = 0; i < buttons.length; i++)buttons[i].addEventListener("click", buttonClick);//按钮点击事件处理函数function buttonClick(event)const buttonValue = event.target.innerHTML;if (buttonValue === "=")calculate(;} else if (buttonValue === "C")clear(;} else if (buttonValue === "√")squareRoot(;} else if (buttonValue === "sin")sine(;} else if (buttonValue === "cos")cosine(;} elseappendValue(buttonValue);}//向显示屏追加内容function appendValue(value)display.value += value;//清空显示屏function cleadisplay.value = "";//计算结果function calculattryconst result = eval(display.value); // 使用eval计算表达式display.value = result.toFixed(4); // 结果四舍五入保留4位小数} catch (error)display.value = "Error";}//计算平方根function squareRootryconst result = Math.sqrt(eval(display.value));display.value = result.toFixed(4);} catch (error)display.value = "Error";}//计算正弦值function sintryconst result = Math.sin(eval(display.value) * (Math.PI / 180)); // 将角度转换为弧度display.value = result.toFixed(4);} catch (error)display.value = "Error";}//计算余弦值function cosintryconst result = Math.cos(eval(display.value) * (Math.PI / 180)); // 将角度转换为弧度display.value = result.toFixed(4);} catch (error)display.value = "Error";}```HTML部分：```html<!DOCTYPE html><html><head><title>Calculator</title><link rel="stylesheet" type="text/css" href="style.css"> </head><body><div id="calculator"><input type="text" id="display" readonly> <div id="buttons"><div class="row"><button class="btn">7</button><button class="btn">8</button><button class="btn">9</button><button class="btn">/</button></div><div class="row"><button class="btn">4</button><button class="btn">5</button><button class="btn">6</button><button class="btn">*</button></div><div class="row"><button class="btn">1</button><button class="btn">2</button><button class="btn">3</button><button class="btn">-</button></div><div class="row"><button class="btn">0</button><button class="btn">.</button><button class="btn">+</button><button class="btn">=</button></div><div class="row"><button class="btn">C</button><button class="btn">√</button> <button class="btn">sin</button> <button class="btn">cos</button> </div></div></div><script src="script.js"></script> </body></html>```CSS部分：```css#calculatorwidth: 200px;margin: 0 auto;padding: 20px;#displaywidth: 100%;margin-bottom: 10px;padding: 5px;font-size: 20px;.rowdisplay: flex;.buttonflex: 1;margin-right: 5px;padding: 10px;font-size: 16px;```请注意，这只是一个简单的示例，实际的计算器功能可能更加复杂，需要根据具体需求进行适当的修改和扩展。

网页计算器--JS代码

网页计算器的界面：该计算其代码如下：<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head id="Head1" runat="server"><title>网页计算器</title></head><script type="text/javascript">var t;t = self.setInterval("ShowTime()", 10);var Exp = "";function ShowTime() {var Today = new Date(); //这条语句要放在该函数内，而不能作为全局变量hours = Today.getHours(); minutes = Today.getMinutes(); second = Today.getSeconds();if (hours < 10) hours = "0" + hoursif (minutes < 10) minutes = "0" + minutesif (second < 10) second = "0" + seconddocument.all.time.value = hours + ":" + minutes + ":" + second;}function MyFun() {alert(Exp);}//获取光标在ID为obj控件的位置，返回下标function getPos(obj) {obj.focus();var s = document.selection.createRange();s.setEndPoint("StartToStart", obj.createTextRange())return s.text.length;}//设置光标位置的函数function setCursor(ctrl, pos){if(ctrl.setSelectionRange){ctrl.focus();ctrl.setSelectionRange(pos,pos);}else if (ctrl.createTextRange){var range = ctrl.createTextRange();range.collapse(true);range.moveEnd('character', pos);range.moveStart('character', pos);range.select();}}//删除表达式中的元素function Delete() {var Len = document.all.In.value.length;Exp = document.all.In.value;var Arr = Exp.split("");var pos = getPos(In);Arr.splice(pos - 1, 1, "");var toStr = "";for(var j = 0; j < Arr.length; ++j)toStr += Arr[j];Exp = toStr;Arr = toStr.split("");document.all.In.value = toStr;setCursor(In,pos - 1);}//清除表达式function Clearn() {document.all.In.value = "";}function addParentheses(strObj) {var Temp = strObj;var Arr = Temp.split("");for (var i = 0; i < Arr.length; ++i) {if (Arr[i] == "s" || Arr[i] == "c" || Arr[i] == "t" || Arr[i] == "√"){if (Arr[i + 1] != "("){Arr.splice(i, 1, Arr[i] + "(");var toStr = "";for(var j = 0; j < Arr.length; ++j)toStr += Arr[j];Arr = toStr.split("");var Index = i + 2;if (Arr[Index] != "s" && Arr[Index] != "c" && Arr[Index] != "t" && Arr[Index] != "√"){var Bol = true;while (Bol) {if (Arr[Index + 1] == "+" || Arr[Index + 1] == "-" || Arr[Index + 1] == "*" || Arr[Index + 1] == "/" || Arr.length <= (Index + 1)){Arr.splice(Index, 1, Arr[Index] + ")");var toStr = "";for(var l = 0; l < Arr.length; ++l)toStr += Arr[l];Arr = toStr.split("");Bol = false;}++Index;}var S = "";for(var k = 0; k < Arr.length; ++k)S += Arr[k];S = Arr.toString();}//如果参数是函数else{var val = 0;var Bol = true;var hasPar = false;while (Bol){if (Arr[Index + 1] == "("){hasPar = true;val++;}if (Arr[Index + 1] == ")")--val;//没有括号的情况if (((Arr[Index + 1] == "+" || Arr[Index + 1] == "-" || Arr[Index + 1] == "*" || Arr[Index + 1] == "/") && !hasPar) || (Index + 1) >= Arr.length){Arr.splice(Index, 1, Arr[Index] + ")");var toStr = "";for(var j = 0; j < Arr.length; ++j)toStr += Arr[j];Arr = toStr.split("");Bol = false;}//有括号的情况if (val == 0 && hasPar){Arr.splice(Index + 1, 1,Arr[Index + 1] + ")");var toStr = "";for(var j = 0; j < Arr.length; ++j)toStr += Arr[j];Arr = toStr.split("");Bol = false;}++Index;}}}}var Str = "";for (var m = 0; m < Arr.length; ++m)Str += Arr[m];Exp = Str;}}//在表达式中添加表达式元素function addElement(Ele) {var Arr = new Array();Exp = document.all.In.value;var Index = getPos(In);if (Index >= Exp.length) {Exp += Ele;}else {Arr = Exp.split("");var Cha = Arr[Index];Arr.splice(Index, 1, Ele + Cha);var Str = "";for (var i = 0; i < Arr.length; ++i)Str += Arr[i];Exp = Str;}document.all.In.value = Exp;setCursor(In,Index + Ele.length);}function Input1() {addElement("1");}function Input2() {addElement("2");}function Input3() {addElement("3");}function Input4() {addElement("4");}function Input5() {addElement("5");}function Input6() {addElement("6");}function Input7() {addElement("7");}function Input8() {addElement("8");}function Input9() {addElement("9");}function Input0() {addElement("0");}function InputDot() {addElement(".");}function InputSin() {addElement("sin");}function InputCos() {addElement("cos");}function InputTan() {addElement("tan");}function InputSqtr() {addElement("√");}function InputAdd() {addElement("+");}function InputMin() {addElement("-");}function InputMult() {addElement("*");}function InputDiv() {addElement("/");}function InputPI() {addElement("3.141592"); }function InputLPar() {addElement("(");}function InputRPar() {addElement(")");}function InputLn() {addElement("ln");}function InputLog() {addElement("log");}function InputEql() {Exp = document.all.In.value;var Str = "";Str = Exp.replace(/sin/g, "s");Str = Str.replace(/cos/g, "c");Str = Str.replace(/tan/g, "t");addParentheses(Str);Exp = Exp.replace(/t/g, "Math.tan");Exp = Exp.replace(/s/g, "Math.sin");Exp = Exp.replace(/c/g, "Math.cos");Exp = Exp.replace(/√/g, "Math.sqrt");var result = eval(Exp);document.all.Restlt.value = result;}</script><body ><table border="8" bgcolor="rgb(50,200,100)" align= "center" cellspacing="0" cellpadding="0", width="250pt"><tr><td><label id = "Lab" ></label> 计算器</td></tr></table><table border="1" bgcolor="rgb(50,200,100)" align= "center" cellspacing="0" cellpadding="0", width="250pt"><tr><td><input id = "In" type = "text" style="width:160px" /></td><td><input id = "bs" type = "button" value = "Backspace" style="width:75px" onclick = "Delete();"/></td></tr></table><table border="1" bgcolor="rgb(50,200,100)" align= "center" cellspacing="0" cellpadding="0", width="250pt"><tr><td><input id = "Restlt" type = "text" style="width:110px" /></td><td><input id = "Clearn" type = "button" value = "Clearn" style="width:60px" onclick = "Clearn();" /></td><td><input id = "time" type = "text" style="width:60px" /></td></tr></table><table border="5" bgcolor="rgb(50,200,100)" align= "center" cellspacing="0" cellpadding="0", width="250pt"><tr><td><input type = "button" id = "N1" style="width:50px" value = "1" onclick = "Input1();"/></td><td><input type = "button" id = "N2" style="width:50px" value = "2" onclick = "Input2();" /></td><td><input type = "button" id = "N3" style="width:50px" value = "3" onclick = "Input3();" /></td><td><input type = "button" id = "Add" style="width:40px" value = "+" onclick ="InputAdd();" /></td><td><input type = "button" id = "Sub" style="width:40px" value = "-" onclick = "InputMin();"/></td></tr><tr><td><input type = "button" id = "N4" style="width:50px" value = "4" onclick = "Input4();"/></td><td><input type = "button" id = "N5" style="width:50px" value = "5" onclick = "Input5();" /></td><td><input type = "button" id = "N6" style="width:50px" value = "6" onclick = "Input6();" /></td><td><input type = "button" id = "Times" style="width:40px" value = "*" onclick = "InputMult();" /></td><td><input type = "button" id = "Divd" style="width:40px" value = "/" onclick = "InputDiv();" /></td></tr><tr><td><input type = "button" id = "N7" style="width:50px" value = "7" onclick = "Input7();"/></td><td><input type = "button" id = "N8" style="width:50px" value = "8" onclick = "Input8();" /></td><td><input type = "button" id = "N9" style="width:50px" value = "9" onclick = "Input9();" /></td><td><input type = "button" id = "Sqt" style="width:40px" value = "√" onclick = "InputSqtr();" /></td><td><input type = "button" id = "sin" style="width:40px" value = "sin" onclick = "InputSin();" /></td></tr><tr><td><input type = "button" id = "N0" style="width:50px" value = "0" onclick = "Input0();"/></td><td><input type = "button" id = "Dot" style="width:50px" value = "." onclick = "InputDot();" /></td><td><input type = "button" id = "Eql" style="width:50px" value = "=" onclick = "InputEql();" /></td><td><input type = "button" id = "cos" style="width:40px" value = "cos" onclick = "InputCos();" /></td><td><input type = "button" id = "tan" style="width:40px" value = "tan" onclick = "InputTan();" /></td></tr><tr><td><input type = "button" id = "PI" style="width:50px" value = "π" onclick = "InputPI();"/></td><td><input type = "button" id = "L_Par" style="width:50px" value = "(" onclick = "InputLPar();" /></td><td><input type = "button" id = "R_Par" style="width:50px" value = ")" onclick = "InputRPar();" /></td><td><input type = "button" id = "Ln" style="width:40px" value = "ln" onclick = "InputLn();" /></td><td><input type = "button" id = "Log" style="width:40px" value = "log" onclick = "InputLog();" /></td></tr></table><input id = "Input" type = "button" value = "click" onclick = "MyFun();" /> <form id="form1" runat="server"><div></div></form></body></html>。

简易计算器代码

Vue.js实现的计算器功能完整示例

Vue.js实现的计算器功能完整⽰例本⽂实例讲述了Vue.js实现的计算器功能。

分享给⼤家供⼤家参考，具体如下：1. HTML部分代码<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" type="text/css" href="css/css.css" rel="external nofollow" ><script type="text/javascript" src="https:///vue/2.5.16/vue.min.js"></script><meta charset="UTF-8"><title>my-calculator</title></head><body><div id="calculator"><input-box v-bind:input-show="inputShow"></input-box><btn-list><div @click="clearValue()" class=" btn-30 btn-radius color-red clear-marginleft">C</div><div class=" btn-30 btn-radius color-blue">+/-</div><div @click="inputValue('%')" class=" btn-30 btn-radius color-blue">%</div><div @click="backValue()" class=" btn-70 btn-radius color-red font-14">←</div><div @click="inputValue('7')" class=" btn-30 btn-radius clear-marginleft">7</div><div @click="inputValue('8')" class=" btn-30 btn-radius">8</div><div @click="inputValue('9')" class=" btn-30 btn-radius">9</div><div @click="squareValue()" class=" btn-30 btn-radius color-blue font-14">×²</div><div @click="radicalValue()" class=" btn-30 btn-radius color-blue font-12">√</div><div @click="inputValue('4')" class=" btn-30 btn-radius clear-marginleft">4</div><div @click="inputValue('5')" class=" btn-30 btn-radius">5</div><div @click="inputValue('6')" class=" btn-30 btn-radius">6</div><div @click="inputValue('×')" class=" btn-30 btn-radius color-blue font-14">×</div><div @click="inputValue('÷')" class=" btn-30 btn-radius color-blue font-12">÷</div><div @click="inputValue('1')" class=" btn-30 btn-radius clear-marginleft">1</div><div @click="inputValue('2')" class=" btn-30 btn-radius">2</div><div @click="inputValue('3')" class=" btn-30 btn-radius">3</div><div @click="inputValue('+')" class=" btn-30 btn-radius color-blue font-14">+</div><div @click="inputValue('-')" class=" btn-30 btn-radius color-blue font-14">-</div><div @click="inputValue('0')" class=" btn-70 btn-radius clear-marginleft">0</div><div @click="inputValue('.')" class=" btn-30 btn-radius">.</div><div @click="calValue()" class=" btn-70 btn-radius color-red font-14">=</div></btn-list></div><script>var calculator = new Vue({el:'#calculator',data:{inputShow:{value:'0'}},components:{'input-box':{props:['inputShow'],computed: {value:function () {return this.inputShow.value}},template:'<input id="input-box" type="text" size="21" maxlength="21" v-model="value" readonly="readonly">'},'btn-list':{template:'<div id="btn-list"><slot></slot></div>'}},methods:{inputValue(param){if(Object.prototype.toString.call(this.inputShow.value) == "[object Number]"){ //判断输⼊框内容是否为数字类型this.inputShow.value = "0"; //数字类型说明是上个计算结果,清空内容}var str ='' + this.inputShow.value; //输⼊内容时,将输⼊框内容转为字符串类型var len = str.length;var arr = ["+","-","×","÷"];var num = (''+parseFloat(str.split('').reverse().join(''))).split('').reverse().join(''); //parseInt(str.split('').reverse().join('')))是获取输⼊框内最后⼀串数字,再反转回来 ,num为输⼊框内最后⼀串数字 var nlen = num.length;if((num!= '0' && param != '.')|| (param == '.'&& num.indexOf(".")==-1)){ //输⼊框内最后⼀串数字不为0时拼接字符串if(arr.indexOf(str.charAt(len-1)) != -1 && arr.indexOf(param) != -1){ //若⼀开始输⼊内容为运算符,输⼊⽆效return;}this.inputShow.value += param; //拼接输⼊内容}else{arr.push("%");if(param == '.'){ //若num中已有⼩数点,输⼊内容为⼩数点,视为⽆效return;}else if(!(arr.indexOf(param) != -1)){ //判断输⼊框内最后⼀个字符不为运算符this.inputShow.value =str.substring(0,str.length-nlen) + param; //输⼊框内最后⼀串数字为0时,删除0拼接}}},clearValue(){ //清空输⼊框内容this.inputShow.value = '0';},calValue(){ //计算结果var str = this.inputShow.value;str = str.replace('×','*').replace('÷','/').replace('%','*0.01'); //替换运算符try{this.inputShow.value = eval(str); //若⽤户输⼊内容不符合运算规则,不计算}catch(error){return;}},squareValue(){ //平⽅计算var str = this.inputShow.value;this.inputShow.value = Math.pow(eval(str),2)},radicalValue(){ //开根号计算var str = this.inputShow.value;this.inputShow.value = Math.sqrt(eval(str));},backValue(){ //删除键,删除单个字符var str = this.inputShow.value;if(str.length == 1){this.inputShow.value = "0";}else{this.inputShow.value = str.slice(0,str.length-1);}},/*oppositeValue(){ //正负号取值var str = this.inputShow.value;var num = (''+parseInt(str.split('').reverse().join(''))).split('').reverse().join(''); //获取输⼊框内最后遗传数字var nlen = num.length;debugger;if(!isNaN( parseInt(str.charAt(str.length-1))) && num != 0){ //当输⼊框末位字符为数字且最后⼀串数字不为0时,取正负this.inputShow.value = str.substring(0,str.length-nlen)+`(-${num})`;}}*/}})</script></body></html>2. CSS部分代码@charset "utf-8";body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input{margin:0;padding:0;-webkit-text-size-adjust:none}h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}body>div{margin:0 auto}div{text-align:left}a img{border:0}body{color:#333;text-align:center;font:12px "微软雅⿊";}ul, ol, li{list-style-type:none;vertical-align:0}a{outline-style:none;color:#535353;text-decoration:none}a:hover{color:#D40000;text-decoration:none}.clear{height:0;overflow:hidden;clear:both}/* calculator */#calculator{width:200px;height:245px;padding:10px;border:1px solid #e5e5e5;background:#f8f8f8;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;box-shadow:0px 0px 10px #f2f2f2;-moz-box-shadow:0px 0px 10px #f2f2f2;-webkit-box-shadow:0 #calculator #input-box{margin:0;width:187px;padding:9px 5px;height:14px;border:1px solid #e5e5e5;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;background:#FFF;text-align:right;line-height:14px;font-size:12px;font-family:Verdana, Geneva #calculator #btn-list{width:200px;overflow:hidden;}#calculator #btn-list .btn-radius{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;border:1px solid #e5e5e5;background:-webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#ebebeb));background:-moz-linear-gradient(top, #f7f7f7,#ebebeb);filter #calculator #btn-list .btn-radius:active{background:#ffffff;}#calculator #btn-list .clear-marginleft{margin-left:0;}#calculator #btn-list .font-14{font-size:14px;}#calculator #btn-list .color-red{color:#ff5050}#calculator #btn-list .color-blue{color:#00b4ff}#calculator #btn-list .btn-30{width:29px;height:29px;}#calculator #btn-list .btn-70{width:70px;height:29px;}4. 使⽤时记得改下css路径,在html中引⼊vue5. 博主技术有限,正负号部分功能还有问题待完善.计算器还有⼀些未知的⼩Bug,感兴趣的读者可以在这个基础上进⾏扩展。

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

} } function anSqrt() {
var objresult = document.getElementById("result"); xshi = Number(objresult.value); var stri=xshi+""; if (anEqueal) {
if (xshi >= 0) { xshi = Math.sqrt(xshi); objresult.value = xshi + ""; str=str.substr(0,str.length-stri.length)+objresult.value;
}
function getResult() { var objresult = document.getElementById("result"); objresult.value =eval(str); str=objresult.value; anEqueal=true;
}
function anBfh() { var objresult = document.getElementById("result"); xshi = Number(objresult.value); var stri=xshi+""; if (anFh) { var s=str.substr(0,str.length-stri.length-1); var re=eval(s); var res=Number(re); xshi = res * xshi / 100; objresult.value = xshi + "";
}
function anCE() { var objresult = document.getElementById("result"); str = str.substr(0,str.length-objresult.value.length); objresult.value = "0."; anFh = false; anEqueal = false; clearFlag = true;
<style type="text/css"> body {
width: 320px; height: 280px; margin: auto; margin-top: 100px; } table.cxtable { width: 100%; background-color: #ABCDEF; border-collapse: collapse; } table.cxtable tr td input.cl { border: 2px; width: 314px; height: 30px; font-size: 20px; font-weight: lighter; } .color { color: red; } .bott1 { width: 102.25px; height: 35px; } .bott2 { width: 60px; height: 45px; } </style>
} else { if (xshi >= 0) { xshi = Math.sqrt(xshi); result = xshi; objresult.value = xshi + ""; str=str.substr(0,str.length-stri.length)+objresult.value; } else { objresult.value = "函数输入无效"; }
function getNum(num) { var objresult = document.getElementById("result"); if (clearFlag) { objresult.value = ""; clearFlag = false; } if(typeof num=='string'&&num!='.'){ clearFlag = true; str=str+num; anFh = true; }else{ str1=objresult.value; str1 += num; str=str+num; objresult.value = str1; }
function anC() { var objresult = document.getElementById("result"); objresult.value = "0."; str = ""; str1 = ""; anFh = false; anEqueal = false; clearFlag = true;
<form action="#" method="get">
<table class="cxtable">
<tr><td><input type="text" name="result" id="result" class="cl"
value="0."/></td></tr>
<tr><td><input type="button" name="Backspace" value="Backspace"
}
function anBackspace() { var objresult = document.getElementById("result"); xshi = Number(objresult.value); var stri=xshi+""; if (xshi < 1 && xshi > 0) { var s = objresult.value; objresult.value = s.substr(0, s.length - 1); str = str.substr(0,str.length-stri.length)+objresult.value; } else { if(xshi>9||xshi<-9){ var str0 = xshi / 10 + ""; xshi = parseInt(str0); objresult.value = xshi + "";
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>
<head> <title>jsq.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3" /> <meta http-equiv="description" content="this is my page" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript">
var anEqueal = false; var anFh = false; var xshi = 0; var result = 0; var str = ""; var str1 = ""; var clearFlag = true;
str=str.substr(0,str.length-stri.length)+objresult.value; }else{
var str0 = xshi / 10 + ""; xshi = parseInt(str0); objresult.value = xshi + ""; str.substr(0,str.length-stri.length)+objresult.value; objresult.value = "0."; clearFlag = true; }
onclick="anBackspace()" class="bott1 color" />
<input type="button" name="CE" value="CE" onclick="anCE()"
class="bott1 color" />
<input type="button" name="C" value="C" onclick="anC()"
str = str.substr(0,str.length-stri.length)+objresult.value; } else {