Javascript 网页计算器代码 ， 该计算器是用 dw 写的！
Html 篇
<html <A-head> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <ititle> 计算器 </ title> <link href = "style / calculator.css" rel = "Stylesheet" type = "text / css" /> <script src = "javascript / calculator.js"> </ script>> </ head> <body> <form id = "form1" name = "form1" metheth = "post" action = ""> <table cellpadding = "0" CellSpacing = "0" id = "calculator"> <tr> <td colpan = "4" Align = "Left" Valign = " name = "txt" type = "text" id = "txt" value = "0" onfocus = "this.blur ();" /> </td> </tr> <tr> <td align = "Center" valign = "midd" onClick = "Deleteall ();"> c </ td> <td align = "Center" valign = "middle" onClick = "backspace ();"> ← </td> <td align = "Center" valign = "middle" onclick = "signe ();"> ± </td> <td align = "Center" valign = "middle" onclick = "add ();"> ＋ </td> </tr> <tr> <td align = "Center" valign = "middle" 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 = "Suppter (); </tr> <tr> <td align = "Center" valign = "middle" onclick = "Command (4);"> 4 </td> <td align = "Center" valign = "middle" onclick = "Command (5);"> 5 </ td> <td align = "Center" valign = "midle" onClick = "Command (6);"> 6 </ td> valign = "middle" onclick = "multiply ();"> × </td> </tr> <tr> <td align = "Center" valign = "middle" onclick = "Command (1);"> 1 </td> <td align = "Center" valign = "middle" onclick = "Command (2);"> 2 </td> <td align = "Centre" onClick = "Command (3);"> 3 </td> <td align = "Center" valign = "middle" onClick = "divide ();"> ÷ </td> </tr> <tr> <td align = "Center" valign = "middle" onClick = "Command (0);"> 0 </td> <td Align = "Centre" valign = " onClick = "dot ();"> ▪ </td> <td Colspan = "2" align = "Center" valign = "middle" bgcolor = "# cc6600" onclick = "equal ();"> ＝ </td> </tr> </ Table> <p> </p> <p> </p> </orm> </pold>
CSS 篇
@Charset "UTF-8"; / * Document CSS * /. TRB {Font-Family: Georgia, "Times New Roman", Times, Serif; taille de police: 24px; Couleur: #FFF; Color en arrière-plan: # 333; Texte-aligne: Centre; Border: 1px solide # 999;}. Opérateur {Background-Color: # 333; taille de police: 18px; Couleur: # C60; Font-Family: Verdana, Genève, Sans-Serif;} TD: Hover {Font-Size: 28px; curseur: pointeur; } .txt {hauteur: 100px; Largeur: 320px; Color en arrière-plan: # 333; Texte-aligne: gauche; Aligne verticale: en bas; Couleur: #FFF; taille de police: 30px;}Javascript 篇
// 实现计算器功能 // 结果 Var Result = 0; // 显示框中的数 （默认为 默认为 “0”） var screennum = "0"; // 数的初始输入状态 ， 默认为 0 ；当按了任意运算符键后 ， 数的输入状态变为 数的输入状态变为 1var State = 0; // 防止重复按运算符键 var EvitRepeat = True; // 运算符键 （（默认为 0-- 等于号）））） {{// String (document.form1.txt.value); // 对该值进行判断 ， 如果该值不为 "0" ， 且输入状态 0 ， 则返回前者 ， 否则为 "" (双重三目运算) // 两个判断条件 ： 1 、显示框中值是否为 "0", 2 、数的输入状态 str = (str! = "0")? ((State == 0)? Str: ""): ""; // 给当前值追加字符 str = str + string (num); // 刷新显示 document.form1.txt.value = str; // 按了任意数字键后 ， 数的输入状态变为 0 état = 0; // 重置防止重复按键 EviterRepeat = true;} // 第二步 ： 确保输入的数是合法的 ， 每个数至多只有一个小数点 Fonction dot () {var str = string (document.form1.txt.value); // 若该数前面未接运算符 ， 则返回前值 ， 否则为 "0" ； str = (état == 0)? Str: "0"; // Java 里 String 有 Length () 方法 ， 而 JS 里 String 有 Longueur 属性 pour (i = 0; i <= str.length; i ++) {// substr () 获取下标从 i 开始 ， 个数为 1 个的子串 if (str.substr (i, 1) == ".") {// 当存在小数点时 ， 则程序终止 return; }} // 若无小数点 ， 则在该数后面加上 str = str + "."; // 刷新显示 document.form1.txt.value = str; // 恢复数的初始输入状态 état = 0; } // 第三步 ： 处理退格键 fonction 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; } // 第四步 ： 删除所有 fonction deleteall () {// 显示框设为 "0" document.form1.txt.value = "0"; // 恢复数的初始输入状态 état = 0; // 恢复运算符键 ， 默认为 0-- 等于号 Operator = 0;} // 第五步 ： 加法 fonction add () {// 调用计算函数 calcul (); // 更改数的输入状态 état = 1; // 更改运算符键 ， 1-- 加号 Opérateur = 1; } // 第六步 ： 减法 fonction soustrait () {// 调用计算函数 calcul (); // 更改数的输入状态 état = 1; // 2-- 减号 Opérateur = 2; } // 第七步 ： 乘法 Fonction multiply () {// 调用计算函数 calcul (); // 更改数的输入状态 état = 1; // 3-- 乘号 Opérateur = 3; } // 第八步 ： 除法 Fonction divide () {// 调用计算函数 calcul (); // 更改数的输入状态 état = 1; // 4-- 除号 Opérateur = 4; } // 第九步 ： 正负号 Sign de fonction () {// 5-- 正负号 Operator = 5; // 调用计算函数 calculer (); // 更改数的输入状态 état = 1; // 0-- 等于号 Opérateur = 0; // 正负号可以连续按 EviterRepeat = true;} // 第十步 ： 等于 Fonction Equal () {// 调用计算函数 calcul (); // 更改数的输入状态 état = 1; // 0-- 等于号 Opérateur = 0; } // 第十一步 ： 计算 Fonction calcul () {// 获取显示框中的值 ScreenNum = nombre (document.form1.txt.value); if (EvitreRepeat) {switch (opérateur) {cas 1: result = result + screennum; document.form1.txt.value = result; casser; Cas 2: Result = Result - ScreenNum; document.form1.txt.value = result; casser; Cas 3: Résultat = Résultat * ScreenNum; document.form1.txt.value = result; casser; Cas 4: if (screennum == 0) {// 设置显示框的值 document.getElementById ("txt"). Value = "除数不能为 0"; // 3S 后 ， 执行清屏函数 setTimeout (ClearScreen, 3000); } else {result = result / screennum; document.form1.txt.value = result; } casser; Cas 5: Résultat = (-1) * ScreenNum; document.form1.txt.value = result; casser; Cas 0: résultat = screennum; document.form1.txt.value = result; casser; } // 当按了运算符键后 ， 不能再按 EviterRepeat = false; }} // 第十二步 ： 清屏函数 fonction clearscreen () {document.getElementById ("txt"). Value = "0"; }以上就是本文的全部内容 ， 希望对大家的学习有所帮助 ， 也希望大家多多支持武林网。