HTML网页版计算器

合集下载

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><head><title>登录页面</title><script src="js.js"></script><script type="text/javascript">function checkInputs(){var nameInput = document.getElementById("name");var nameValue = nameInput.value;if(nameValue==null || nameValue.replace(/\s+/g,"")==""){alert("对不起,您没有输入姓名!");nameInput.focus();return false;}var passwordInput1 = document.getElementById("password1");var passwordValue1 = passwordInput1.value;var passwordInput2 = document.getElementById("password2");var passwordValue2 = passwordInput2.value;if(passwordValue1==null || passwordValue1.replace(/\s+/g,"")==""){alert("对不起,您没有输入密码!");passwordInput1.focus();return false;}else if(passwordValue2!=passwordValue1){alert("对不起,您输入密码有误!");passwordInput2.focus();return false;}var emailInput = document.getElementById("email");var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;if(!myreg.test(emailInput.value)){alert('提示\n\n请输入有效的E_mail！');emailInput.focus();return false;}var sidInput = document.getElementById("sid");var iSum=0,info="";var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};if(sidInput.length!=15 && sidInput.length!=18)alert('提示\n\n请输入有效的身份证！');emailInput.focus();return false;if(!/\d{15}|(\d{17}(\d|x))$/i.test(sidInput))alert('提示\n\n请输入有效的身份证！');emailInput.focus();return false;sidInput=sidInput.replace(/x$/i,"a");if(aCity[parseInt(sidInput.substr(0,2))]==null)alert('提示\n\n请输入有效的身份证！');emailInput.focus();return false;if(sidInput.length==15){sidInput = sidInput.substr(0,6)+"19"+sidInput.substr(6,14);}sBirthday=sidInput.substr(6,4)+"-"+Number(sidInput.substr(10,2))+"-"+Number(sidInputr.substr( 12,2));var d=new Date(sBirthday.replace(/-/g,"/")) ;if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))alert('提示\n\n请输入有效的身份证！');emailInput.focus();return false;if(sidInput.length==18){for(var i = 17;i>=0;i--) iSum += (Math.pow(2,i) % 11) * parseInt(sidInput.charAt(17 - i),11) ;if(iSum%11!=1)alert('提示\n\n请输入有效的身份证！');emailInput.focus(); return false;}var cityInput = document.getElementById("citySelect");var cityValue = cityInput.value;if(cityValue=="xuanze"){alert('提示\n\n请选择你的籍贯！');cityInput.focus();return false;}return true;}</script></head><body style="background:#98FB98"><center><form id="form" action="jieguo.html" method="get" onSubmit="return checkInputs()"> <caption><font color="blue" size="5">用户注册</font></caption><br /><table border="0"><tr><th>姓名:</th><td><input type="text" id="name" name="name"/></td></tr><tr><th>密码:</th><td><input type="password" id="password1" name="password"/></td></tr><tr><th>确认密码:</th><td><input type="password" id="password2" name="password2"/></td></tr><tr><th>邮箱:</th><td><input type="text" id="email" name="email"/></td></tr><tr><th>身份证:</th><td><input type="text" id="sid" name="sid"/></td></tr><tr><tr><th>性别:</th><td><input type="radio" name="sex" value="male" /> 男<input type="radio" name="sex" value="female" /> 女</td></tr><tr><th>学历:</th><td><input type="radio" name="degree" value="dazhuan" />大专<input type="radio" name="degree" value="benke" /> 本科<input type="radio" name="degree" value="shuoshi" /> 硕士<input type="radio" name="degree" value="boshi" /> 博士</td></tr><tr><th>籍贯:</th><td><select name="city" id="citySelect"><option value="xz" selected="selected">--请选择--</option><option value="js">江苏</option><option value="zj">浙江</option><option value="gz">广州</option></select></td></tr><tr><tr><th rowspan="1">爱好:</th><td>篮球<input type="checkbox" name="basketball">乒乓球<input type="checkbox" name="pingpang">足球<input type="checkbox" name="football"><br/>看书<input type="checkbox" name="read">上网<input type="checkbox" name="online">玩游戏<input type="checkbox" name="game"></td></tr><tr><th>自我评价:</th><td><textarea rows="10" cols="30" s></textarea></td></tr><tr><td colspan="2" align="center"><input type="submit" value="登录"/> <input type="reset" value="取消"/></td></tr></table></form></center></body></html>结果页面<html><head><title>我的第一个html页面</title> </head><body><center>结果页面</center></body></html>。

HTML网页之计算器代码

HTML⽹页之计算器代码计算器⽹页效果显⽰：<script>function show(){var date = new Date(); //⽇期对象var now = "";now = date.getFullYear()+"年"; //读英⽂即可了now = now + (date.getMonth()+1)+"⽉"; //取⽉的时候取的是当前⽉-1假设想取当前⽉+1就能够了now = now + date.getDate()+"⽇";now = now + date.getHours()+"时";now = now + date.getMinutes()+"分";now = now + date.getSeconds()+"秒";document.getElementById("nowDiv").innerHTML = now; //div的html是now这个字符串setTimeout("show()",1000); //设置过1000毫秒就是1秒，调⽤show⽅法}</script><!DOCTYPE html><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><head><title>Calculator</title><!--将按键内容以字符串形式存储在⽂字框中当button为“=”时。

调⽤eval⽅法计算结果然后将结果输出⽂字框中--> <script type="text/javascript">var numresult;var str;function onclicknum(nums) {str = document.getElementById("nummessege");str.value = str.value + nums;}function onclickclear() {str = document.getElementById("nummessege");str.value = "";}function onclickresult() {str = document.getElementById("nummessege");numresult = eval(str.value);str.value = numresult;}</script><style type="text/css">img{position:absolute;left:1100px;top:100px;}</style></head><body> <!⽤来显⽰时间><h2 align=right><font color="#cc0033"><body onload="show()"> <div id="nowDiv"></div></font></h2></body><body bgcolor="#9900ff" ><a href="../index.html"><img border="0" src="./image/4.jpg" alt="主页⾯" title="返回主页⾯"></a><font color="red" size="6"><center>⽹络⼈VS灰鸽⼦⼯作室</center></font><p></p><table border="1" align="center" bgColor="#6633CC"style="height: 350px; width: 270px"><tr><td colspan="4"><input type="text" id="nummessege"style="height: 90px; width: 350px; font-size: 50px" /></td></tr><tr><td><input type="button" value="1" id="1" onclick="onclicknum(1)"style="height: 70px; width: 90px; font-size: 35px"></td><td><input type="button" value="2" id="2" onclick="onclicknum(2)"style="height: 70px; width: 90px; font-size: 35px"></td><td><input type="button" value="3" id="3" onclick="onclicknum(3)"style="height: 70px; width: 90px; font-size: 35px"></td><td><input type="button" value="+" id="add" onclick="onclicknum('+')"style="height: 70px; width: 90px; font-size: 35px"></td></tr><tr><td><input type="button" value="4" id="4" onclick="onclicknum(4)"style="height: 70px; width: 90px; font-size: 35px"></td><td><input type="button" value="5" id="5" onclick="onclicknum(5)"style="height: 70px; width: 90px; font-size: 35px"></td><td><input type="button" value="6" id="6" onclick="onclicknum(6)"style="height: 70px; width: 90px; font-size: 35px"></td><td><input type="button" value="-" id="sub" onclick="onclicknum('-')"style="height: 70px; width: 90px; font-size: 35px"></td></tr><tr><td><input type="button" value="7" id="7" onclick="onclicknum(7)"style="height: 70px; width: 90px; font-size: 35px"></td><td><input type="button" value="8" id="8" onclick="onclicknum(8)"style="height: 70px; width: 90px; font-size: 35px"></td><td><input type="button" value="9" id="9" onclick="onclicknum(9)"style="height: 70px; width: 90px; font-size: 35px"></td><td><input type="button" value="*" id="mul" onclick="onclicknum('*')"style="height: 70px; width: 90px; font-size: 35px"></td></tr><tr><td colspan="2"><input type="button" value="0" id="0" onclick="onclicknum(0)"style="height: 70px; width: 190px; font-size: 35px"></td><td><input type="button" value="." id="point" onclick="onclicknum('.')"style="height: 70px; width: 90px; font-size: 35px"></td><td><input type="button" value="/" id="division"onclick="onclicknum('/')"style="height: 70px; width: 90px; font-size: 35px"></td></tr><tr><td colspan="2"><input type="button" value="Del" id="clear"onclick="onclickclear()"style="height: 70px; width: 190px; font-size: 35px" /></td><td colspan="2"><input type="button" value="=" id="result"onclick="onclickresult()"style="height: 70px; width: 190px; font-size: 35px" /></td></tr></table><font size="5" color="ff99ff">Design by:<a target="_blank" href="/qq_21792169/article/details/50629515" >⽹络⼈VS灰鸽⼦</a> 2016-3-3                         &邮箱：linux_drv@</font><! 这⾥为了⽅便我就直接加⼊空格来布局了，这⾥能够使⽤style></body></html>。

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

网页版计算器

前面我已经在WIN32平台中用C语言实现了加减乘除四则运算的计算器，现在我把它移植到网页中，使用HTML+Javascript语言实现它。

一、需求：在网页中编程实现一个简单的计算器，它能提供加减乘除四则运算，它支持IE 浏览器或火狐浏览器。

二、界面原型三、界面编码<html><head><title>加减乘除四则运算器</title></head><body><input type="text" width="50" value="" id="result" ><br><input type="button" style="width:30" style="height:25" value="1" id="One" onclick="Bt1()" /> <input type="button" style="width:30" style="height:25" value="2" id="Two" onclick="Bt2()" /> <input type="button" style="width:30" style="height:25" value="3" id="Three" onclick="Bt3()" /> <input type="button" style="width:30" style="height:25" value="+" id="Add" onclick="BtAdd()" /><br><input type="button" style="width:30" style="height:25" value="4" id="Four" onclick="Bt4()" /> <input type="button" style="width:30" style="height:25" value="5" id="Five" onclick="Bt5()" /> <input type="button" style="width:30" style="height:25" value="6" id="Six" onclick="Bt6()" /><input type="button" style="width:30" style="height:25" value="-" id="Sub" onclick="BtSub()" /> <br><input type="button" style="width:30" style="height:25" value="7" id="Seven" onclick="Bt7()" /> <input type="button" style="width:30" style="height:25" value="8" id="Eight" onclick="Bt8()" /> <input type="button" style="width:30" style="height:25" value="9" id="Nine" onclick="Bt9()" /> <input type="button" style="width:30" style="height:25" value="*" id="Mud" onclick="BtMud()" /><br><input type="button" style="width:30" style="height:25" value="0" id="Zero" onclick="Bt0()" /> <input type="button" style="width:30" style="height:25" value="." id="Point" onclick="BtPoint()" /><input type="button" style="width:30" style="height:25" value="=" id="Equal" onclick="BtEqual()" /><input type="button" style="width:30" style="height:25" value="/" id="Div" onclick="BtDiv()" /><input type="button" style="width:68" style="height:25" value="CLEAR" id="Clean" onclick="BtClean()" /></body></html>四、功能部分编码<script language="javascript">var rlt = 0.0;var middle = 0.0;var flag = 0; //1:+ 2:- 3:* 4:/var equalflag = 1; //0:button equal not pressed 1:button equal pressedvar changeflag = 0;function Bt1(){var tmp = document.getElementById("result");if(changeflag == 0){if( parseFloat(tmp.value) != 0 || tmp.value.indexOf(".") > 0){tmp.value += "1";}else{tmp.value = "1";}}else{tmp.value = "1";changeflag = 0;}middle = parseFloat(tmp.value);}function Bt2(){var tmp = document.getElementById("result");if(changeflag == 0)if( parseFloat(tmp.value) != 0 || tmp.value.indexOf(".") > 0) {tmp.value += "2";}else{tmp.value = "2";}}else{tmp.value = "2";changeflag = 0;}middle = parseFloat(tmp.value);}function Bt3(){var tmp = document.getElementById("result");if(changeflag == 0){if( parseFloat(tmp.value) != 0 || tmp.value.indexOf(".") > 0) {tmp.value += "3";}else{tmp.value = "3";}}else{tmp.value = "3";changeflag = 0;}middle = parseFloat(tmp.value);}function Bt4()var tmp = document.getElementById("result");if(changeflag == 0){if( parseFloat(tmp.value) != 0 || tmp.value.indexOf(".") > 0) {tmp.value += "4";}else{tmp.value = "4";}}else{tmp.value = "4";changeflag = 0;}middle = parseFloat(tmp.value);}function Bt5(){var tmp = document.getElementById("result");if(changeflag == 0){if( parseFloat(tmp.value) != 0 || tmp.value.indexOf(".") > 0) {tmp.value += "5";}else{tmp.value = "5";}}else{tmp.value = "5";changeflag = 0;}middle = parseFloat(tmp.value);}function Bt6(){var tmp = document.getElementById("result");if(changeflag == 0){if( parseFloat(tmp.value) != 0 || tmp.value.indexOf(".") > 0) {tmp.value += "6";}else{tmp.value = "6";}}else{tmp.value = "6";changeflag = 0;}middle = parseFloat(tmp.value);}function Bt7(){var tmp = document.getElementById("result");if(changeflag == 0){if( parseFloat(tmp.value) != 0 || tmp.value.indexOf(".") > 0) {tmp.value += "7";}else{tmp.value = "7";}}else{tmp.value = "7";changeflag = 0;}middle = parseFloat(tmp.value);}function Bt8(){var tmp = document.getElementById("result");if(changeflag == 0){if( parseFloat(tmp.value) != 0 || tmp.value.indexOf(".") > 0) {tmp.value += "8";}else{tmp.value = "8";}}else{tmp.value = "8";changeflag = 0;}middle = parseFloat(tmp.value);}function Bt9(){var tmp = document.getElementById("result");if(changeflag == 0 ){if( parseFloat(tmp.value) != 0 || tmp.value.indexOf(".") > 0) {tmp.value += "9";}else{tmp.value = "9";}}else{tmp.value = "9";changeflag = 0;}middle = parseFloat(tmp.value);}function Bt0(){var tmp = document.getElementById("result");if(changeflag == 0){if(tmp.value.indexOf(".") > 0 || parseFloat(tmp.value) != 0) {tmp.value += "0";}else{tmp.value = "0";}}else{tmp.value = "0";changeflag = 0;}middle = parseFloat(tmp.value);}function BtPoint(){var tmp = document.getElementById("result");if( (tmp.value.indexOf(".") < 0) && (tmp.value.length > 0)) {tmp.value += ".";}}function BtAdd(){var tmp = document.getElementById("result");if(equalflag){rlt = parseFloat(middle);}else{switch(flag){case 1:rlt += parseFloat(middle);break;case 2:rlt -= parseFloat(middle);break;case 3:rlt *= parseFloat(middle);break;case 4:if( parseFloat(middle) != 0){rlt /= parseFloat(middle);}break;}}changeflag = 1;middle = 0.0;flag = 1;equalflag = 0;tmp.value = parseFloat(rlt);}function BtSub(){var tmp = document.getElementById("result"); if(equalflag)rlt = parseFloat(middle);}else{switch(flag){case 1:rlt += parseFloat(middle);break;case 2:rlt -= parseFloat(middle);break;case 3:rlt *= parseFloat(middle);break;case 4:if( parseFloat(middle) != 0){rlt /= parseFloat(middle);}break;}}changeflag = 1;middle = 0.0;flag = 2;equalflag = 0;tmp.value = parseFloat(rlt);}function BtMud(){var tmp = document.getElementById("result");if(equalflag){rlt = parseFloat(middle);}else{switch(flag)case 1:rlt += parseFloat(middle);break;case 2:rlt -= parseFloat(middle);break;case 3:rlt *= parseFloat(middle);break;case 4:if( parseFloat(middle) != 0){rlt /= parseFloat(middle);}break;}}changeflag = 1;middle = 0.0;flag = 3;equalflag = 0;tmp.value = parseFloat(rlt);}function BtDiv(){var tmp = document.getElementById("result");if(equalflag){rlt = parseFloat(middle);}else{switch(flag){case 1:rlt += parseFloat(middle);break;case 2:rlt -= parseFloat(middle);break;case 3:rlt *= parseFloat(middle);break;case 4:if( parseFloat(middle) != 0){rlt /= parseFloat(middle);}break;}}changeflag = 1;middle = 0.0;flag = 4;equalflag = 0;tmp.value = parseFloat(rlt);}function BtEqual(){var tmp = document.getElementById("result");switch(flag){case 1:rlt += parseFloat(middle);break;case 2:rlt -= parseFloat(middle);break;case 3:rlt *= parseFloat(middle);break;case 4:if( parseFloat(middle) != 0){rlt /= parseFloat(middle);}break;}changeflag = 1;middle = rlt;flag = 0;equalflag = 1;tmp.value = parseFloat(rlt);}function BtClean(){var tmp = document.getElementById("result");tmp.value = "";middle = 0.0;rlt = 0.0;flag = 0;equalflag = 1;changeflag = 1;}</script>将它们放到</head>之前，然后保存一个文件名xx.html五、测试使用IE浏览器或者火狐浏览器，把xx.html 打开，按事先编写好的测试用例进行测试。

php计算器加减乘除代码

php计算器加减乘除代码本文将为大家介绍 php 的计算器加减乘除代码。

随着互联网的日益普及，计算器成为了很多网站必备的功能之一。

而 php 作为一门服务器端脚本语言，拥有强大的计算能力，能够轻松实现基本的加减乘除运算。

首先，我们需要了解 php 中的基本运算符。

加法运算符表示为`+`，减法运算符表示为 `-`，乘法运算符表示为 `*`，除法运算符表示为 `/`。

接下来，我们可以实现一个简单的计算器，使其能够进行基本的加减乘除运算。

代码如下：```<?phpif(isset($_POST['submit'])){$num1 = $_POST['num1'];$num2 = $_POST['num2'];$operator = $_POST['operator'];switch($operator){case "+":$result = $num1 + $num2; break;case "-":$result = $num1 - $num2; break;case "*":$result = $num1 * $num2; break;case "/":$result = $num1 / $num2; break;}}><!DOCTYPE html><html><head><title>php 计算器</title></head><body><form method="POST"><input type="text" name="num1" placeholder="请输入第一个数字"><br><br><input type="text" name="num2" placeholder="请输入第二个数字"><br><br><select name="operator"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><br><br><input type="submit" name="submit" value="计算"><br><br><?php if(isset($_POST['submit'])) echo "结果为：".$result; ?></form></body></html>```在这个简单的计算器中，我们首先判断用户是否点击了提交按钮，如果点击提交按钮，就获取用户输入的两个数字和运算符，然后根据运算符计算结果。

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

定义函数onclickclear()。这个函数的功能是，当按下Del时触发，清空文本框的所有内容。
定义函数onclickresult()。将字符串通过eval()函数运算，将结果赋值给对象的value属性，也就是文本框显示的内容。
4.2结论
计算器的样式千变万化，但只要掌握了核心代码，任何样式都可以做出来！
5总结
你以为会做（抄）一个计算器就无敌了？
然并卵！
学无止境
样表
3.4背景
选择一张喜欢的图片，在 background中写该图片的地址，即可设置为背景。
4在javescript中写函数
4.1核心代码
我就是这么喜欢张杰（闰土）
定义对象str和numresult。定义函数 onclicknum()。这个函数的功能是通过id获取字符并将之缀连在一起形成字符串。
HTML/CSS/JS网页制作
网页版计算器
计科1404 林源张伟张凯旋高银恺潘行
1.外观和界面
1.1简介计算器形状为 420px*420px的正方形，每个小方框尺寸为70px*100px。显示框为 70px*420px。 “Del”键和“=” 键为70px*210px。数字和“del”键采用的是纤长的宋体，其余的是默认字体。
没有人跟你说我最讨厌看图吗？
（2）点击“=” 按键
3.编写过程
3.1创建HTML工程
原来这么简单
3.2布局，初步设计界面
源代码：Biblioteka 你懂了吗用input下的text属性制作文本框显示内容，其余用botton属性制作按键，同时用table布局。
显示样式：
3.3调整表格内容的大小及位置
在style属性下设置控件的高（height）和长（width）。Font-family设置字体。Color设置字体颜色。Value为控件显示的值。代码
1.2界面
显示窗口可以显示 15位的数值，为了方便，这里显示格式设定为从右对齐。在点开该网页的时候，计算器占据中间偏下的位置，符合人们的使用习惯。同时按键尽可能的大，让用户能够快速点击。
2.设计思路
这款网页版计算器的代码核心是getElementById获取按键所代表的字符相加及eval()函数将字符串转化为语句执行。显示框（2）（1）数字及加减乘除按键（1）函数捕获字符，缀连成字符串 eval()函数执行，赋值给显示框的value 属性（2）注：（1）第一个过程，输入将要执行的字符串。（2）将字符串转化为代码执行，并在文本框显示。