网页(html、javascript)版简易计算器

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

下载文档原格式

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

万维试卷八年级【含答案】

万维试卷八年级【含答案】专业课原理概述部分一、选择题（每题1分，共5分）1. 下列哪种网络协议用于电子邮件传输？A.B. FTPC. SMTPD. TCP/IP2. 在万维网中，用于定位网页的地址被称为？A. IP地址B. 网址C. 域名D. 端口3. 下列哪种技术不属于云计算服务模式？A. SaaSB. PaaSC. IaaSD. DaaS4. 下列哪种操作系统不是由微软公司开发的？A. WindowsB. macOSC. LinuxD. iOS5. 在HTML中，用于创建超的标签是？A. <a>B. <link>C. <img>D. <href>二、判断题（每题1分，共5分）1. 万维网是互联网的同义词。

（）2. 在互联网中，IP地址用于唯一标识网络中的设备。

（）3. 云计算只提供在线存储服务。

（）4. 操作系统是计算机硬件和用户之间的接口。

（）5. HTML是一种编程语言。

（）三、填空题（每题1分，共5分）1. 互联网是由许多计算机网络互联而成的全球性网络，其英文名称为__________。

2. 在云计算服务模式中，SaaS代表__________。

3. 计算机操作系统的主要功能包括资源管理、__________和提供用户接口。

4. HTML的全称是__________。

5. 网络安全的主要目标是保护网络系统的__________、完整性和可用性。

四、简答题（每题2分，共10分）1. 简述互联网的发展历程。

2. 什么是云计算？请列举三种云计算服务模式。

3. 简述操作系统的基本功能。

4. HTML文档的基本结构包括哪些部分？5. 简述网络安全的重要性。

五、应用题（每题2分，共10分）1. 假设你是一名网络管理员，请描述如何配置一个基本的局域网。

2. 请解释云计算中的“弹性计算”是什么意思。

3. 请列举三种常见的操作系统类型及其特点。

4. 请编写一个简单的HTML文档，包含、段落和超。

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

简单的网页计算器代码

</td>
</tr>
</table>
</form>
</body>
</html>
b = document.getElementById("txtNum2").value;
r=a-b;
document.getElementById("txtResult").value=r;
}
function onMul()
{ቤተ መጻሕፍቲ ባይዱ
var a;
var b;
var r;
a = document.getElementById("txtNum1").value;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml" >
<head>
<title>计算器</title>
<script language="ecmascript"type="text/javascript">
function onAdd()
{
var a;
var b;
var r;
a = parseInt(document.getElementById("txtNum1").value);
b = document.getElementById("txtNum2").value;

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

网页试题答案

网页试题答案一、简答题1. 什么是HTML？HTML（HyperText Markup Language，超文本标记语言）是一种用于构建网页的标准标记语言。

它由一系列的标签组成，通过这些标签可以定义网页的结构、内容和格式等。

2. 什么是CSS？CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML 或XML等文档如何呈现的样式语言。

通过CSS，我们可以控制网页的布局、字体、颜色等外观表现。

3. 什么是JavaScript？JavaScript是一种由Netscape公司开发的脚本语言，广泛用于网页的交互和动态效果的实现。

它能够增加网页的交互性，为用户提供更好的用户体验。

4. 什么是响应式设计？响应式设计是一种可以使网页在不同设备上自动适应并呈现最佳视觉效果的设计方法。

通过使用自适应布局、媒体查询等技术，网页可以在各种分辨率的设备上都能正常显示，提升用户体验。

5. 请简要解释HTTP和HTTPS的区别。

HTTP（Hypertext Transfer Protocol，超文本传输协议）是一种用于在Web浏览器和Web服务器之间传输数据的协议。

而HTTPS（HTTP Secure）是在HTTP的基础上加入了SSL/TLS加密技术的安全协议，通过加密数据传输，确保数据在传输过程中的安全性。

二、编程题请编写一个网页，实现以下功能：用户输入姓名和年龄，点击提交按钮后，在网页上显示用户输入的信息。

```html<!DOCTYPE html><html><head><title>用户信息</title><style>.container {margin: 100px auto;width: 400px;text-align: center;}</style><body><div class="container"><h1>用户信息</h1><form><label for="name">姓名:</label><input type="text" id="name" name="name"><br><br><label for="age">年龄:</label><input type="text" id="age" name="age"><br><br><input type="button" value="提交" onclick="displayInfo()"> </form><div id="info"></div><script>function displayInfo() {var name = document.getElementById("name").value;var age = document.getElementById("age").value;var info = document.getElementById("info");info.innerHTML = "姓名: " + name + "<br>年龄: " + age + "岁";</script></div></body></html>```以上是一个简单的HTML网页，包含一个表单和一个用于显示用户信息的div元素。

网页版计算器

前面我已经在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、CSS和JavaScript技术，以及一些计算逻辑来实现。

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<body>
<script>
function myadd(){
var a,b,c;
a = Number(document.getElementById("x").value);
b = Number(document.getElementById("y").value);
c = a+b
document.getElementById("z").value=c;
}
function mydec(){
var a,b,c;
a = document.getElementById("x").value;
b = document.getElementById("y").value;
c = a-b;
document.getElementById("z").value=c;
}
function mycheng(){
var a,b,c;
a = document.getElementById("x").value;
b = document.getElementById("y").value;
c = a*b;
document.getElementById("z").value=c;
}
function mychu(){
var a,b,c;
a = document.getElementById("x").value;
b = document.getElementById("y").value;
c = a/b;
document.getElementById("z").value=c;
}
function myclear(){
document.getElementById("x").value="";
document.getElementById("y").value="";
document.getElementById("z").value="";
}
</script>
<h3>加减乘除简单计算器</h3>
第一个数:<input id="x" type="text"/> <br/>
第二个数:<input id="y" type="text"/> <br/>
计算结果:<input id="z" type="text"/>
<br/>
<input type="button" value="加+" onclick="myadd()"/>
<input type="button" value="减-" onclick="mydec()"/><br/>
<input type="button" value="乘*" onclick="mycheng()"/>
<input type="button" value="除/" onclick="mychu()"/><br/>
<input type="button" value="重置/清空" onclick="myclear()"/> </body>
</html>。