做一个简单的网页计算器

合集下载

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

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

用记事本打造简易计算器

<title>新建</title>
<Script Language="JavaScript">
ion totle() {
var a=document.box.son.value
var b=a+"="+eval(a);
alert (b);
}
</Script>
操作系统自带的计算器真是太"鸡肋"了.稍微复杂一些的公式就算不行了,例如你要计算(3*6)+(10/2)+5这样的四则运算,用系统自带的计算器就有些力不从心.如果只是偶尔需要运算一下的话完全不用去下载专门的计算器软件.我们来用记事本做一个简易计算器吧.
打开记事本,输入以下内容.
<html>
<head>
打开这个网页文件.在文本框里面输入我们要计算的公式.再点击一下"计算"按钮.看
</head>
<body>
<form name="box">
<input name="son" type="text">
<input type="button" value="计算" onClick="totle()">
</form>
</body>
</html>
现在将该文档另存为"123.html"文件名可以任意命名.扩展名必须为"html"

网站计数器添加方法

网站计数器添加方法一、进入后台管理
登陆网站后台管理程序。

二、首页添加
1、依次进入：首页管理-〉修改尾文件区域。

2、进入尾文件编辑界面后，选择高级编辑。

3、进入高级编辑模式后，首先把光标移动到你想要把计数器添加到的目的地，然后点击工具栏中标识为“123”的图标。

4、在弹出的插入计数器窗口中，可以进行计数器样式的选择。

选择完毕后，点击确定按钮。

5、然后在高级编辑窗口就可以查看添加计数器后的效果。

点击“退出”按钮。

在弹出的对话框中点击确定，以保存添加结果。

6、返回到简单编辑模式后，点击“提交”按钮。

7、完成添加过程。

然后访问首页就可以看到添加后的计数器了。

三、其他页面添加
1、进入“栏目管理”功能，首先在“子栏目列表”中查看网站各栏目所使用的尾文件情况。

（一般情况下，计数器大都添加在尾文件区域）
2、如果使用了多个尾文件，需要在“栏目尾文件列表”中选择相应的尾文件进行编辑修改。

编辑过程同“一、首页添加”中的2-6的步骤。

实验1：网页计算器

网页计算器的制作目的：掌握javascript中函数的使用。

操作步骤：1、新建style.css样式文件，设置网页计算器样式。

如图：.calc{height:600px;width:500px;margin:0 auto;background-color:#CCFFCC;}/*定义网页中div1标签样式*/.tbl{height:80px;}/*定义网页中div2标签样式*/.tbl input{height:78px;width:490px;margin:0 auto;font-size:60px;font-weight:bold;}/*定义div2中input输入框的标签样式*/.btnarea{height:500px;}/*定义网页中div3的标签样式*/.btnarea input{width:100px;height:100px;margin-left:15px;margin-bottom:15px;margin-top:15px;font-size:24px;font-weight:bold;}/*定义div3中按钮控件的样式*/2、编写Javascript代码，实现计算器的数据显示功能。

（1）实现文本框显示点击的一位数字<script>function test(a){document.getElementById("num").value=a;//获取到num对象中的值。

}</script>onclick="test(this.value)"（2）实现文本框显示点击的多位数字<script>function test(a){document.getElementById("num").value=document.getElementById("num").value+a; }</script>onclick="test(this.value)"（3）实现点击操作符，文本框为0。

js案例大全

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

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

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

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

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

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

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

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

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

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

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

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

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

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

前端练手小项目

前端练手小项目
作为一名前端开发者，不仅需要拥有扎实的理论基础，也需要不断地练习和实践，才能够不断提高自己的技能水平。

为此，我们可以通过完成一些小型的练手项目来巩固自己的前端技能，并且不断地挑战自己。

下面是一些适合前端练手的小项目：
1. 制作一个简单的网页计算器
我们可以利用 HTML、CSS 和 JavaScript 来制作一个简单的网页计算器，让用户能够进行基本的加减乘除运算。

2. 制作一个简单的轮播图
通过使用 HTML、CSS 和 JavaScript，我们可以制作一个简单的轮播图，让用户能够浏览多张图片，并且能够进行自动轮播和手动切换。

3. 制作一个简单的待办事项列表
我们可以利用 HTML、CSS 和 JavaScript 来制作一个简单的待办事项列表，让用户能够添加、删除和完成任务。

4. 制作一个简单的瀑布流布局
通过使用 HTML、CSS 和 JavaScript，我们可以制作一个简单的瀑布流布局，让用户能够浏览多张图片，并且能够自动适应屏幕大小。

5. 制作一个简单的时钟
我们可以利用 HTML、CSS 和 JavaScript 来制作一个简单的时钟，让用户能够查看当前的时间，并且能够进行12小时制和24小时
制的切换。

通过完成这些小型的练手项目，我们可以不断地提高自己的前端技能，并且能够更好地应对实际的项目开发。

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 打开，按事先编写好的测试用例进行测试。

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代码

网页计算器的界面：该计算其代码如下：<%@ 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>。

计算机二级web试题及答案

计算机二级web试题及答案一、选择题1. 下列哪个标签用于定义HTML文档的主体内容。

A. <body>B. <head>C. <title>D. <div>答案：A2. CSS的字体属性"font-family"用于指定文本的字体，可以设置多个字体名称，这些字体之间用什么符号隔开？A. 空格B. 逗号C. 分号D. 冒号答案：B3. 下列哪个HTTP状态码表示请求成功并返回用户请求的页面内容。

A. 200B. 404C. 500D. 503答案：A4. 在JavaScript中，以下不属于数据类型的是：A. StringB. BooleanC. IntegerD. Array答案：C5. 下列哪个标签用于定义无序列表。

A. <ul>B. <li>C. <ol>D. <dl>答案：A二、填空题1. CSS的盒模型包括__content__、__padding__、__border__和__margin__四个部分。

答案：content、padding、border、margin2. JavaScript的声明变量的关键字是__var__。

答案：var3. HTTP协议中，GET请求和POST请求属于__HTTP__中的两种请求方法。

答案：HTTP三、简答题1. 请简要说明HTML、CSS和JavaScript分别是什么。

答：HTML（HyperText Markup Language）是一种用于创建网页结构的标记语言，它由一系列的标签构成，用于定义页面的结构和内容。

CSS（Cascading Style Sheets）是一种用于描述网页外观和样式的样式表语言，它通过选择器来选择元素并定义其样式。

JavaScript是一种用于给网页增加交互和动态效果的脚本语言，可以通过操作页面元素、响应用户事件等来实现网页的交互功能。

用HTML制作简单计算器

用HTML制作简单计算器HTML是一种标记语言，用于创建网页。

虽然HTML本身并不支持计算器功能，但我们可以使用HTML结合JavaScript来实现一个简单的计算器。

首先，我们需要创建一个HTML页面，并添加一个表单元素和一些按钮来实现计算器的功能。

```html<!DOCTYPE html><html><head><title>简单计算器</title><script src="calculator.js"></script></head><body><h1>简单计算器</h1><form id="calculator"><input type="text" id="result" readonly><br><input type="button" value="1" onclick="appendToResult('1')"> <input type="button" value="2" onclick="appendToResult('2')"><input type="button" value="3" onclick="appendToResult('3')"> <br><input type="button" value="4" onclick="appendToResult('4')"> <input type="button" value="5" onclick="appendToResult('5')"> <input type="button" value="6" onclick="appendToResult('6')"> <br><input type="button" value="7" onclick="appendToResult('7')"> <input type="button" value="8" onclick="appendToResult('8')"> <input type="button" value="9" onclick="appendToResult('9')"> <br><input type="button" value="0" onclick="appendToResult('0')"> <input type="button" value="+" onclick="appendToResult('+')"> <input type="button" value="-" onclick="appendToResult('-')"> <br><input type="button" value="*" onclick="appendToResult('*')"> <input type="button" value="/" onclick="appendToResult('/')"> <input type="button" value="=" onclick="calculateResult("><br><input type="button" value="清除" onclick="clearResult("></form></body></html>```然后，我们在每个按钮上添加了一个`onclick`属性，该属性指定了当按钮被点击时要执行的JavaScript代码。

基于Unity制作一个简易的计算器

基于Unity制作⼀个简易的计算器⽬录⼀、前⾔⼆、效果图及源⼯程三、实现1.界⾯搭建2.代码实现四、后记⼀、前⾔Hello，⼜见⾯了，今天分享如何使⽤Unity制作计算器，难度中等，可以⽤来学习，或者当成其他项⽬的⼩组件导⼊。

当然，也可以导出来，发布到⽹页端，来做⼀个嵌⼊式⼯具也可以。

⼆、效果图及源⼯程效果图：三、实现1.界⾯搭建所有的按钮摆放到Background下⾯。

2.代码实现⾸先找到所有的按钮，添加到事件：//结果显⽰TextComputeProcess = GameObject.Find("Canvas/Background/Image/TextComputeProcess").GetComponent<Text>();TextComputeResult = GameObject.Find("Canvas/Background/Image/TextComputeResult").GetComponent<Text>();TextComputeResult.text = "0";RUNSTATE = 0;//操作BtnReset = GameObject.Find("Canvas/Background/重置").GetComponent<Button>();BtnReset.onClick.AddListener(() => OperationDispose("CE"));BtnDelete = GameObject.Find("Canvas/Background/删除").GetComponent<Button>();BtnDelete.onClick.AddListener(() => OperationDispose("Del"));//加减乘除BtnAdd = GameObject.Find("Canvas/Background/加").GetComponent<Button>();BtnAdd.onClick.AddListener(() => OperationDispose("+"));BtnSub = GameObject.Find("Canvas/Background/减").GetComponent<Button>();BtnSub.onClick.AddListener(() => OperationDispose("-"));BtnMul = GameObject.Find("Canvas/Background/乘").GetComponent<Button>();BtnMul.onClick.AddListener(() => OperationDispose("*"));BtnDiv = GameObject.Find("Canvas/Background/除").GetComponent<Button>();BtnDiv.onClick.AddListener(() => OperationDispose("/"));BtnEqual = GameObject.Find("Canvas/Background/等于").GetComponent<Button>();BtnEqual.onClick.AddListener(() => OperationDispose("="));//数字Btn0 = GameObject.Find("Canvas/Background/0").GetComponent<Button>();Btn0.onClick.AddListener(() => NumDispose("0"));Btn1 = GameObject.Find("Canvas/Background/1").GetComponent<Button>();Btn1.onClick.AddListener(() => NumDispose("1"));Btn2 = GameObject.Find("Canvas/Background/2").GetComponent<Button>();Btn2.onClick.AddListener(() => NumDispose("2"));Btn3 = GameObject.Find("Canvas/Background/3").GetComponent<Button>();Btn3.onClick.AddListener(() => NumDispose("3"));Btn4 = GameObject.Find("Canvas/Background/4").GetComponent<Button>();Btn4.onClick.AddListener(() => NumDispose("4"));Btn5 = GameObject.Find("Canvas/Background/5").GetComponent<Button>();Btn5.onClick.AddListener(() => NumDispose("5"));Btn6 = GameObject.Find("Canvas/Background/6").GetComponent<Button>();Btn6.onClick.AddListener(() => NumDispose("6"));Btn7 = GameObject.Find("Canvas/Background/7").GetComponent<Button>();Btn7.onClick.AddListener(() => NumDispose("7"));Btn8 = GameObject.Find("Canvas/Background/8").GetComponent<Button>();Btn8.onClick.AddListener(() => NumDispose("8"));按钮操作：//操作点击处理private void OperationDispose(string operation){switch (operation){case "+":if (RUNSTATE == 0)TextComputeProcess.text = "0 + ";else{TextComputeProcess.text = TextComputeResult.text + " + ";m_operation = "+";RUNSTATE = 2;}break;case "-":if (RUNSTATE == 0)TextComputeProcess.text = "0 - ";else{TextComputeProcess.text = TextComputeResult.text + " - ";m_operation = "-";RUNSTATE = 2;}break;case "*":if (RUNSTATE == 0)TextComputeProcess.text = "0 * ";else{TextComputeProcess.text = TextComputeResult.text + " * ";m_operation = "*";RUNSTATE = 2;}break;case "/":if (RUNSTATE == 0)TextComputeProcess.text = "0 / ";else{TextComputeProcess.text = TextComputeResult.text + " / ";m_operation = "/";RUNSTATE = 2;}break;case "=":if (RUNSTATE == 0)TextComputeProcess.text = "0 = ";else{if (RUNSTATE == 3){double result;switch (m_operation){case "+":result = double.Parse(calculateString) + double.Parse(TextComputeResult.text);TextComputeProcess.text = calculateString + " + " + TextComputeResult.text + " = "; TextComputeResult.text = result.ToString();RUNSTATE = 4;break;case "-":result = double.Parse(calculateString) - double.Parse(TextComputeResult.text);TextComputeProcess.text = calculateString + " - " + TextComputeResult.text + " = "; TextComputeResult.text = result.ToString();RUNSTATE = 4;break;case "*":result = double.Parse(calculateString) * double.Parse(TextComputeResult.text);TextComputeProcess.text = calculateString + " * " + TextComputeResult.text + " = "; TextComputeResult.text = result.ToString();RUNSTATE = 4;break;case "/":result = double.Parse(calculateString) / double.Parse(TextComputeResult.text);TextComputeProcess.text = calculateString + " / " + TextComputeResult.text + " = "; TextComputeResult.text = result.ToString();RUNSTATE = 4;break;default:break;}}elseTextComputeProcess.text = "";TextComputeResult.text = "0";RUNSTATE = 0;break;case "Del":if (RUNSTATE == 0)return;else{if (TextComputeResult.text.Length == 1){TextComputeResult.text = "0";}else{TextComputeResult.text = TextComputeResult.text.Remove(TextComputeResult.text.Length - 1, 1); }}break;default:break;}}数字点击处理：//数字点击处理private void NumDispose(string num){switch (num){case ".":if (RUNSTATE == 0)TextComputeResult.text = "0";elseTextComputeResult.text += num;break;case "-":if (RUNSTATE == 0)TextComputeResult.text = "0";else{if (RUNSTATE == 1){if (pmState){TextComputeResult.text = TextComputeResult.text.Remove(0, 1);pmState = false;}else{TextComputeResult.text = num + TextComputeResult.text;pmState = true;}}else if (RUNSTATE == 2){pmState = false;}else if (RUNSTATE == 3){if (pmState){TextComputeResult.text = TextComputeResult.text.Remove(0, 1);pmState = false;}else{TextComputeResult.text = num + TextComputeResult.text;pmState = true;}}else if (RUNSTATE == 4){pmState = false;OperationDispose("CE");}}break;default:if (RUNSTATE == 0){TextComputeResult.text = num;RUNSTATE = 1;}else if (RUNSTATE == 1)calculateString = TextComputeResult.text;TextComputeResult.text = "";TextComputeResult.text += num;RUNSTATE = 3;}else if (RUNSTATE == 3){TextComputeResult.text += num;}else if (RUNSTATE == 4){OperationDispose("CE");TextComputeResult.text = num;RUNSTATE = 1;}break;}}完整代码：using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.UI;public class CalculatorControl : MonoBehaviour{private Text TextComputeProcess;//计算过程private Text TextComputeResult;//计算结果private Button BtnReset;private Button BtnDelete;private Button BtnAdd;private Button BtnSub;private Button BtnMul;private Button BtnDiv;private Button BtnEqual;private Button Btn0, Btn1, Btn2, Btn3, Btn4, Btn5, Btn6, Btn7, Btn8, Btn9;private Button BtnPoint, BtnPm;private string calculateString = "";//计算数private string m_operation = "";//操作数private bool pmState = false;//正负状态private int RUNSTATE = 0;//0 默认 1 输⼊数字 2 输⼊操作符 3 输⼊操作符再输⼊数字 4 计算结果后void Start(){//结果显⽰TextComputeProcess = GameObject.Find("Canvas/Background/Image/TextComputeProcess").GetComponent<Text>(); TextComputeResult = GameObject.Find("Canvas/Background/Image/TextComputeResult").GetComponent<Text>();TextComputeResult.text = "0";RUNSTATE = 0;//操作BtnReset = GameObject.Find("Canvas/Background/重置").GetComponent<Button>();BtnReset.onClick.AddListener(() => OperationDispose("CE"));BtnDelete = GameObject.Find("Canvas/Background/删除").GetComponent<Button>();BtnDelete.onClick.AddListener(() => OperationDispose("Del"));//加减乘除BtnAdd = GameObject.Find("Canvas/Background/加").GetComponent<Button>();BtnAdd.onClick.AddListener(() => OperationDispose("+"));BtnSub = GameObject.Find("Canvas/Background/减").GetComponent<Button>();BtnSub.onClick.AddListener(() => OperationDispose("-"));BtnMul = GameObject.Find("Canvas/Background/乘").GetComponent<Button>();BtnMul.onClick.AddListener(() => OperationDispose("*"));BtnDiv = GameObject.Find("Canvas/Background/除").GetComponent<Button>();BtnDiv.onClick.AddListener(() => OperationDispose("/"));BtnEqual = GameObject.Find("Canvas/Background/等于").GetComponent<Button>();BtnEqual.onClick.AddListener(() => OperationDispose("="));//数字Btn0 = GameObject.Find("Canvas/Background/0").GetComponent<Button>();Btn0.onClick.AddListener(() => NumDispose("0"));Btn1 = GameObject.Find("Canvas/Background/1").GetComponent<Button>();Btn1.onClick.AddListener(() => NumDispose("1"));Btn2 = GameObject.Find("Canvas/Background/2").GetComponent<Button>();Btn2.onClick.AddListener(() => NumDispose("2"));Btn3 = GameObject.Find("Canvas/Background/3").GetComponent<Button>();Btn3.onClick.AddListener(() => NumDispose("3"));Btn4 = GameObject.Find("Canvas/Background/4").GetComponent<Button>();Btn4.onClick.AddListener(() => NumDispose("4"));Btn5 = GameObject.Find("Canvas/Background/5").GetComponent<Button>();Btn5.onClick.AddListener(() => NumDispose("5"));Btn9 = GameObject.Find("Canvas/Background/9").GetComponent<Button>();Btn9.onClick.AddListener(() => NumDispose("9"));BtnPoint = GameObject.Find("Canvas/Background/点").GetComponent<Button>();BtnPoint.onClick.AddListener(() => NumDispose("."));BtnPm = GameObject.Find("Canvas/Background/正负").GetComponent<Button>();BtnPm.onClick.AddListener(() => NumDispose("-"));}//操作点击处理private void OperationDispose(string operation){switch (operation){case "+":if (RUNSTATE == 0)TextComputeProcess.text = "0 + ";else{TextComputeProcess.text = TextComputeResult.text + " + ";m_operation = "+";RUNSTATE = 2;}break;case "-":if (RUNSTATE == 0)TextComputeProcess.text = "0 - ";else{TextComputeProcess.text = TextComputeResult.text + " - ";m_operation = "-";RUNSTATE = 2;}break;case "*":if (RUNSTATE == 0)TextComputeProcess.text = "0 * ";else{TextComputeProcess.text = TextComputeResult.text + " * ";m_operation = "*";RUNSTATE = 2;}break;case "/":if (RUNSTATE == 0)TextComputeProcess.text = "0 / ";else{TextComputeProcess.text = TextComputeResult.text + " / ";m_operation = "/";RUNSTATE = 2;}break;case "=":if (RUNSTATE == 0)TextComputeProcess.text = "0 = ";else{if (RUNSTATE == 3){double result;switch (m_operation){case "+":result = double.Parse(calculateString) + double.Parse(TextComputeResult.text);TextComputeProcess.text = calculateString + " + " + TextComputeResult.text + " = "; TextComputeResult.text = result.ToString();RUNSTATE = 4;break;case "-":result = double.Parse(calculateString) - double.Parse(TextComputeResult.text);TextComputeProcess.text = calculateString + " - " + TextComputeResult.text + " = "; TextComputeResult.text = result.ToString();RUNSTATE = 4;break;case "*":result = double.Parse(calculateString) * double.Parse(TextComputeResult.text);TextComputeProcess.text = calculateString + " * " + TextComputeResult.text + " = "; TextComputeResult.text = result.ToString();RUNSTATE = 4;break;case "/":result = double.Parse(calculateString) / double.Parse(TextComputeResult.text);TextComputeProcess.text = calculateString + " / " + TextComputeResult.text + " = "; TextComputeResult.text = result.ToString();RUNSTATE = 4;{TextComputeProcess.text = TextComputeResult.text + " = ";}}break;case "CE":TextComputeProcess.text = "";TextComputeResult.text = "0";RUNSTATE = 0;break;case "Del":if (RUNSTATE == 0)return;else{if (TextComputeResult.text.Length == 1){TextComputeResult.text = "0";}else{TextComputeResult.text = TextComputeResult.text.Remove(TextComputeResult.text.Length - 1, 1); }}break;default:break;}}//数字点击处理private void NumDispose(string num){switch (num){case ".":if (RUNSTATE == 0)TextComputeResult.text = "0";elseTextComputeResult.text += num;break;case "-":if (RUNSTATE == 0)TextComputeResult.text = "0";else{if (RUNSTATE == 1){if (pmState){TextComputeResult.text = TextComputeResult.text.Remove(0, 1);pmState = false;}else{TextComputeResult.text = num + TextComputeResult.text;pmState = true;}}else if (RUNSTATE == 2){pmState = false;}else if (RUNSTATE == 3){if (pmState){TextComputeResult.text = TextComputeResult.text.Remove(0, 1);pmState = false;}else{TextComputeResult.text = num + TextComputeResult.text;pmState = true;}}else if (RUNSTATE == 4){pmState = false;OperationDispose("CE");}}break;default:if (RUNSTATE == 0){TextComputeResult.text += num;}else if (RUNSTATE == 2){calculateString = TextComputeResult.text;TextComputeResult.text = "";TextComputeResult.text += num;RUNSTATE = 3;}else if (RUNSTATE == 3){TextComputeResult.text += num;}else if (RUNSTATE == 4){OperationDispose("CE");TextComputeResult.text = num;RUNSTATE = 1;}break;}}}效果图如下：四、后记完整代码278⾏，还是依旧那么简练，整体代码难度不⼤，主要是状态之间的切换：1、输⼊数字的状态2、输⼊操作符状态3、输⼊操作符后再输⼊数字状态4、计算结果后状态理解这些状态后，代码就容易理解了。

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

2017 做一个简工单作的网总页结计算汇器报
• 1、HTML5 • 2、CSS样式 • 3、JavaScript
01
任务描述
• 雇主预算： 500元
• 需求描述：现有某小商品批发网站，因的交流繁琐，希望做一个计算器的东西，让顾客和销售员可以在网上计算造价。
• 要求： 1、支持在网页上计算，顾客可以根据自己的需要计算造价； 2、计算后的造价明细能够复制或导出，且界面友好； 3、各项参数便于维护，方便使用人员修改。
参考素材
参考素材
参考素材
02
问题一：软件开发过程一般有几个阶段？
1、问题的定义及规划 2、需求分析（重点） 3、软件设计 4、程序编码（难点） 5、软件测试
问题二：如何设计网页计算器的程序编码？
1、设计HTML页面的计算器布局 2、通过CSS美化计算器样式。 3、通过JS方法实现计算器的功能。
03