Javascript 网页计算器代码 ， 该计算器是用 dw 写的！
Html 篇
<html <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> 计算器 </title> <link href = "style/calculator.css" rel = "StyleSheet" type = "text/css"/> <script " src = "javascript/calculator.js"> </script>> </head> <body> <form id = "form1" name = "form1" method = "post" action = ""> <tabela CellPadding = "0" CellSpacing = "0" id = "Calculator"> <tr> <tspspan = "4" align = "0" " <Nome de entrada = "txt" type = "text" id = "txt" value = "0" onfocus = "this.blur ();"/> </td> </tr> <tr> <td align = "Center" valign = "Middle" OnClick = "DeLeTeall (); OnClick = "backspace ();"> ← </td> <td align = "Center" valig = "Middle" onclick = "signo ();"> ± </td> <td align = "Center" valig = "meio" onclick = "add (); OnClick = "Command (7);"> 7 </td> <td align = "Center" valig = "Middle" onclick = "Command (8);"> 8 </td> <td align = "Center" Valign = "Middle" Valign = "" </tr> <tr> <td align = "Center" valig = "middle" onclick = "comando (4);"> 4 </td> <td align = "Center" valign = "middle" onclick = "comando (5);" 4 5 </td> <td align = "" center = "middle" <cclick = "4; Valigno = "Médio" OnClick = "multiply ();"> × </td> </tr> <tr> <td align = "Center" valign = "Middle" onclick = "Command (1);"> 1 </td> <td align = "Center" Valign = "Middle" OnClick = "Centro (2); OnClick = "Command (3);"> 3 </td> <td align = "Center" valig = "Middle" onclick = "Divide ();"> ÷ </td> </tr> <tr> <td align = "Center" Valign = "Middle" OnClick = "(0);"> OnClick = "dot ();"> ▪ </td> <td colspan = "2" align = "Center" valig = "Middle" bgcolor = "#cc6600" onclick = "igual ();
CSS 篇
@Charset "UTF-8";/ * CSS Document */. Trb {Font-Family: Georgia, "Times New Roman", Times, Serif; Size da fonte: 24px; Cor: #FFF; cor de fundo: #333; Alinhamento de texto: centro; Border: 1px Solid #999;}. Operador {Background-Color: #333; Size da fonte: 18px; Cor: #C60; Font-Family: Verdana, Genebra, Sans-Serif;} TD: Hover {Size da fonte: 28px; Cursor: Ponteiro; } .txt {altura: 100px; Largura: 320px; cor de fundo: #333; Alinhamento de texto: esquerda; Alinhamento vertical: inferior; Cor: #FFF; Size da fonte: 30px;}JavaScript 篇
//实现计算器功能//结果var result = 0;//显示框中的数（默认为“0”）var screenNum = "0";//数的初始输入状态，默认为0；当按了任意运算符键后，数的输入状态变为1var state = 0;//防止重复按运算符键var avoidRepeat = true;//运算符键（默认为0--等于号）var operator = 0;//第一步：获取按键值，并显示在显示框中function command(num) { //获取显示框的值 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;} // 第二步 ： ： 确保输入的数是合法的 ， 每个数至多只有一个小数点 função dot () {var str = string (document.form1.txt.value); // 若该数前面未接运算符 ， 则返回前值 ， 否则为 "0" ； str = (estado == 0)? Str: "0"; // java 里 string 有 comprimento () 方法 ， 而 js 里 string 有 comprimento 属性 para (i = 0; i <= str.length; i ++) {// substr () 获取下标从 i 开始 ， 个数为 1 个的子串 if (str.substr (i, i, 1) == ".) }} // 若无小数点 ， 则在该数后面加上 str = str+"."; // 刷新显示 document.form1.txt.value = str; // 恢复数的初始输入状态 State = 0; } // 第三步 ： ： 处理退格键 function backspace () {var 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; } // 第四步 ： ： 删除所有 função DeLeTeall () {// 显示框设为 "0" document.form1.txt.value = "0"; // 恢复数的初始输入状态 State = 0; // 恢复运算符键 ， 默认为 0-- 等于号 Operador = 0;} // 第五步 ： 加法 função add () {// 调用计算函数 calcular (); // 更改数的输入状态 State = 1; // 更改运算符键 ， 1-- 加号 Operador = 1; } // 第六步 ： 减法 função subtract () {// 调用计算函数 calcular (); // 更改数的输入状态 State = 1; // 2-- 减号 Operador = 2; } // 第七步 ： 乘法 função multiply () {// 调用计算函数 calcular (); // 更改数的输入状态 State = 1; // 3-- 乘号 Operador = 3; } // 第八步 ： ： function divide () {// 调用计算函数 calcular (); // 更改数的输入状态 State = 1; // 4-- 除号 Operador = 4; } // 第九步 ： 正负号 Sign da função () {// 5-- 正负号 Operador = 5; // 调用计算函数 calcular (); // 更改数的输入状态 State = 1; // 0-- 等于号 Operador = 0; // 正负号可以连续按 evitrepeat = true;} // 第十步 ： 等于 função igual () {// 调用计算函数 calcular (); // 更改数的输入状态 State = 1; // 0-- 等于号 Operador = 0; } // 第十一步 ： ： 计算 função calcular () {// 获取显示框中的值 screennum = número (document.form1.txt.value); if (evitrepeat) {switch (operador) {case 1: resultado = resultado + screennum; document.form1.txt.value = resultado; quebrar; Caso 2: Resultado = Resultado - Plataforma; document.form1.txt.value = resultado; quebrar; Caso 3: resultado = resultado * screennum; document.form1.txt.value = resultado; quebrar; Caso 4: if (screennum == 0) {// 设置显示框的值 document.getElementById ("txt"). value = "除数不能为 0"; // 3s 后 ， 执行清屏函数 setTimeout (Clearscreen, 3000); } else {resultado = resultado/screennum; document.form1.txt.value = resultado; } quebrar; Caso 5: resultado = (-1)*screennum; document.form1.txt.value = resultado; quebrar; Caso 0: Result = Screenum; document.form1.txt.value = resultado; quebrar; } // 当按了运算符键后 ， 不能再按 eviteRepeat = false; }} // 第十二步 ： 清屏函数 清屏函数 função clearscreen () {document.getElementById ("txt"). Value = "0"; }以上就是本文的全部内容 ， 希望对大家的学习有所帮助 ， 也希望大家多多支持武林网。