JavaScript 网页计算器代码 ， 该计算器是用 DW 写的！
Html 篇
<html <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> 计算器 </title> <link href = "style/calculator.css" rel = "stylesheet" tipo = "text/css"/> <script " src = "javascript/calculator.js"> </script>> </head> <body> <form de formato = "form1" name = "form1" método = "post" action = ""> <table cellPadding = "0" cellspacing = "0" id = "calculator"> <tr> <td colspan = "4" align = "Valign" Valign = "top"> <etiqueta para la etiqueta para <input name = "txt" type = "text" id = "txt" value = "0" onfocus = "this.blur ();"/> </td> </tr> <tr> <tr> <td align = "center" valign = "middle" onClick = "deleteall ();"> c </td> <td align = "valign =" medio "medio" "Middle" onClick = "backspace ();"> ← </td> <td align = "center" valign = "middle" onClick = "sign ();"> ± </td> <td align = "center" valign = "middle" onClick = "add ();"> ＋ </td> </tr> <tr> <tr> <td align = "Center" Valign "Valign" onClick = "command (7);"> 7 </td> <td align = "center" valign = "middle" onClick = "command (8);"> 8 </td> <td align = "center" valign = "middle" onClick = "command (9);"> 9 </td> <td align = "Center" Valign = "Middle" OnClick = "Subtrater ();"); " </tr> <tr> <td align = "centro" valign = "middle" onClick = "command (4);"> 4 </td> <td align = "centro" valign = "middle" onClick = "command (5);"> 5 </td> <td align = "centro" Valign "Valign" OnClick = "Command (6);" valign = "Middle" OnClick = "multiply ();"> × </td> </tr> <tr> <tr> <td align = "Center" valign = "Middle" onClick = "command (1);"> 1 </td> onClick = "command (3);"> 3 </td> <td align = "Center" valign = "Middle" onClick = "divide ();"> ÷ </td> </tr> <tr> <td align = "center" valign = "middle" onClick = "comando (0);"> 0 </td> <td align = "Center" Valign = "Middle" onClick = "dot ();"> ▪ </td> <td colspan = "2" align = "Center" valign = "Middle" bgcolor = "#cc6600" onClick = "igual ();"> ＝ </td> </tr> </table> <p> <p> <p> </p> </form> </body </html>
CSS 篇
@CharSet "UTF-8";/ * CSS Document */. Trb {Font-Family: Georgia, "Times New Roman", Times, serif; tamaño de fuente: 24px; Color: #fff; Color de fondo: #333; Text-Align: Center; Border: 1px Solid #999;}. Operador {Color de fondo: #333; tamaño de fuente: 18px; Color: #C60; Font-Family: Verdana, Ginebra, Sans-serif;} td: hover {font-size: 28px; cursor: puntero; } .txt {altura: 100px; Ancho: 320px; Color de fondo: #333; text-align: izquierda; Align vertical: fondo; Color: #fff; tamaño de fuente: 30px;}JavaScript 篇
// 实现计算器功能 // 结果 var resultado = 0; // 显示框中的数（默认为 “0”） var screenNum = "0"; // 数的初始输入状态 ， 默认为 0 ；当按了任意运算符键后 ， 数的输入状态变为 1var state = 0; // 防止重复按运算符键 var saveRepeat = true; // 运算符键（默认为 0-- 等于号） var operador = 0; // 第一步 ： 获取按键值 ， 并显示在显示框中 并显示在显示框中 并显示在显示框中 并显示在显示框中 并显示在显示框中 并显示在显示框中 获取显示框的值 获取显示框的值 获取显示框的值 var str = String (document.form1.txt.value); // 对该值进行判断 ， 如果该值不为 "0" ， 且输入状态 0 ， 则返回前者 ， 否则为 "" (双重三目运算) // 两个判断条件 ： 1 、显示框中值是否为 "0", 2 、数的输入状态 str = (str! = "0")? ((Estado == 0)? Str: ""): ""; // 给当前值追加字符 str = str + string (num); // 刷新显示 document.form1.txt.value = str; // 按了任意数字键后 ， 数的输入状态变为 0 estado = 0; // 重置防止重复按键 EvitRepeat = True;} // 第二步 ： 确保输入的数是合法的 ， 每个数至多只有一个小数点 función dot () {var str = str = str = document.form1.txt.value); // 若该数前面未接运算符 ， 则返回前值 否则为 否则为 "0" ； str = (estado == 0)? Str: "0"; // java 里 cadena 有 longitud () 方法 ， 而 js 里 cadena 有 longitud 属性 para (i = 0; i <= str.length; i ++) {// subStr () 获取下标从 i 开始 ， 个数为 1 个的子串 if (str.substr (i, 1) == ".") {// 当存在小数点时 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止}} // 若无小数点 ， 则在该数后面加上 str = str+"."; // 刷新显示 document.form1.txt.value = str; // 恢复数的初始输入状态 estado = 0; } // 第三步 ： 处理退格键 función backspace () {var str = str = string (document.form1.txt.value); // 若显示框中数不等于 "0", 则返回 str ， 否则返回 "" str = (str! = "0")? Str: ""; // 获取子串 str = str.substr (0, str.length-1); // 若 str 不为 "", 则返回子串 str ， 否则 str = "0" str = (str! = "")? Str: "0"; // 刷新显示 document.form1.txt.value = str; } // 第四步 ： 删除所有 Función DeleteAll () {// 显示框设为 "0" Document.Form1.txt.value = "0"; // 恢复数的初始输入状态 estado = 0; // 恢复运算符键 ， 默认为 0-- 等于号 Operator = 0;} // 第五步 ： 加法 función add () {// 调用计算函数 calculación (); // 更改数的输入状态 estado = 1; // 更改运算符键 ， 1-- 加号 Operador = 1; } // 第六步 ： 减法 Función SINTRAT () {// 调用计算函数 Calculación (); // 更改数的输入状态 estado = 1; // 2-- 减号 Operador = 2; } // 第七步 ： 乘法 Función Multiply () {// 调用计算函数 Calculación (); // 更改数的输入状态 estado = 1; // 3-- 乘号 Operador = 3; } // 第八步 ： 除法 Función Divide () {// 调用计算函数 Calculación (); // 更改数的输入状态 estado = 1; // 4-- 除号 Operador = 4; } // 第九步 ： 正负号 Función signo () {// 5-- 正负号 operador = 5; // 调用计算函数 Calculación (); // 更改数的输入状态 estado = 1; // 0-- 等于号 Operador = 0; // 正负号可以连续按 EvitRepeat = True;} // 第十步 ： 等于 función igual () {// 调用计算函数 calculado (); // 更改数的输入状态 estado = 1; // 0-- 等于号 Operador = 0; } // 第十一步 ： 计算 Función Calculación () {// 获取显示框中的值 ScreenNum = Number (document.form1.txt.value); if (evitRepeat) {switch (operador) {caso 1: resultado = resultado + ScreenNum; document.form1.txt.value = resultado; romper; Caso 2: resultado = resultado - ScreenNum; document.form1.txt.value = resultado; romper; Caso 3: resultado = resultado * ScreenNum; document.form1.txt.value = resultado; romper; Caso 4: if (ScreenNum == 0) {// 设置显示框的值 document.getElementById ("txt"). valor = "除数不能为 0"; // 3s 后 ， 执行清屏函数 执行清屏函数 执行清屏函数 setTimeout (ClearScreen, 3000); } else {resultado = resultado/screenNum; document.form1.txt.value = resultado; } romper; caso 5: resultado = (-1)*ScreenNum; document.form1.txt.value = resultado; romper; Caso 0: resultado = ScreenNum; document.form1.txt.value = resultado; romper; } // 当按了运算符键后 ， 不能再按 EvitRepeat = false; }} // 第十二步 ： 清屏函数 Función ClearScreen () {document.getElementById ("txt"). Value = "0"; }以上就是本文的全部内容 ， 希望对大家的学习有所帮助 也希望大家多多支持武林网。 也希望大家多多支持武林网。