JavaScript 网页计算器代码 ， 该计算器是用 dw 写的！
Html 篇
<html <kopf> <meta http-äquiv = "content-type" content = "text/html; charSet = utf-8"/> <titels> 计算器 </title> <link href = "style/calculator.csS" rel = "styleSheet" type = "text/cs src = "javaScript/recherator.js"> </script >> </head> <body> <form id = "Form1" name = "Form1" methode = "post" action = ""> <table cellpadding = "0" cellspacing = "0" id = "recherator" name = "txt" type = "text" id = "txt" value = "0" onfocus = "this.blur (); onclick = "backspace ();"> ← </td> <td align = "center" valign = "Middle" Onclick = "sign ();"> ± </td> <td align = "center" valign = "Middle" Onclick = "add (); Onclick = "Befehl (7);"> 7 </td> <td align = "center" valign = "Middle" Onclick = "Befehl (8);"> 8 </td> <td align = "center" valign = "Middle" Onclick = "Command (9); </tr> <tr> <td align = "center" valign = "Middle" onclick = "Befehl (4);"> 4 </td> <td align = "center" valign = "Middle" onclick = "Befehl (5); Valign = "Middle" onclick = "multiply ();"> × </td> </tr> <tr> <td align = "center" valign = "Middle" onclick = "Befehl (1); onclick = "Befehl (3);"> 3 </td> <td align = "center" valign = "Middle" Onclick = "Divide ();"> ÷ </td> </tr> <tr> <td align = "center" valign = "Middle" onclick = "Command (0); onclick = "dot ();"> ▪ </td> <td colspan = "2" align = "center" valign = "Middle" bgcolor = "#cc6600" Onclick = "Equal ();
CSS 篇
@CharSet "UTF-8";/ * CSS-Dokument */. Trb {Schriftfamilie: Georgia, "Times New Roman", Times, Serif; Schriftgröße: 24px; Farbe: #fff; Hintergrundfarbe: #333; Text-Align: Mitte; Rand: 1PX Solid #999;}. Operator {Hintergrundfarbe: #333; Schriftgröße: 18px; Farbe: #C60; Schriftfamilie: Verdana, Genf, sans-serif;} td: hover {font-size: 28px; Cursor: Zeiger; } .txt {Höhe: 100px; Breite: 320px; Hintergrundfarbe: #333; Text-Align: links; vertikaler Align: unten; Farbe: #fff; Schriftgröße: 30px;}JavaScript 篇
// 实现计算器功能 // 结果 var result = 0; // 显示框中的数（默认为 "0"） var var screennum = "0"; // 数的初始输入状态 默认为 默认为 0 ；当按了任意运算符键后 ， 数的输入状态变为 1VAR STATE = 0; // 防止重复按运算符键 var meiderepeat = true; // 运算符键（默认为 0-- 等于号） var operator = 0; // 第一步 ： ： 并显示在显示框中 并显示在显示框中 并显示在显示框中 并显示在显示框中 并显示在显示框中 并显示在显示框中 function) String (document.form1.txt.value); // 对该值进行判断 ， 如果该值不为 "0" ， 且输入状态 且输入状态 ， ， 则返回前者 ， 否则为 "" (双重三目运算) // 两个判断条件 ： 1 、显示框中值是否为 "0", 2 、数的输入状态 str = (str! = "0")? ((State == 0)? Str: ""): ""; // 给当前值追加字符 str = str + string (num); // 刷新显示 document.form1.txt.value = str; // 按了任意数字键后 ， 数的输入状态变为 0 Zustand = 0; // 重置防止重复按键 meifrepeat = true;} // 第二步 ： 确保输入的数是合法的 ， 每个数至多只有一个小数点 Funktion dot () {var str = String (document.form1.txt.Value); // 若该数前面未接运算符 ， 则返回前值 ， 否则为 "0" ； str = (STATE == 0)? Str: "0"; // Java 里 String 有 Länge () 方法 ， 而 JS 里 String 有 Länge 属性 für (i = 0; i <= st.length; i ++) {// substr () 获取下标从 i 开始 ， 个数为 1 个的子串 if (str.substr (i, 1) == "). }} // 若无小数点 ， 则在该数后面加上 str = str+"."; // 刷新显示 document.form1.txt.value = str; // 恢复数的初始输入状态 State = 0; } // 第三步 ： 处理退格键 Funktion 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; } // 第四步 ： 删除所有 Funktion DeleteAll () {// 显示框设为 "0" document.form1.txt.value = "0"; // 恢复数的初始输入状态 State = 0; // 恢复运算符键 ， 默认为 0-- 等于号 operator = 0;} // 第五步 ： 加法 Funktion add () {// 调用计算函数 calculate (); // 更改数的输入状态 State = 1; // 更改运算符键 ， 1-- 加号 Operator = 1; } // 第六步 ： 减法 function subtract () {// 调用计算函数 calculate (); // 更改数的输入状态 State = 1; // 2-- 减号 Operator = 2; } // 第七步 ： 乘法 Funktion multiply () {// 调用计算函数 calculate (); // 更改数的输入状态 State = 1; // 3-- 乘号 Operator = 3; } // 第八步 ： 除法 Funktion divide () {// 调用计算函数 calculate (); // 更改数的输入状态 State = 1; // 4-- 除号 Operator = 4; } // 第九步 ： 正负号 Funktionszeichen () {// 5-- 正负号 operator = 5; // 调用计算函数 calculate (); // 更改数的输入状态 State = 1; // 0-- 等于号 Operator = 0; // 正负号可以连续按 meideRepeat = true;} // 第十步 ： 等于 Funktion equal () {// 调用计算函数 calculate (); // 更改数的输入状态 State = 1; // 0-- 等于号 Operator = 0; } // 第十一步 ： 计算 Funktion calculate () {// 获取显示框中的值 screenNum = number (document.form1.txt.value); if (vermeidenRepeat) {Switch (Operator) {Fall 1: result = result + screenNum; document.form1.txt.value = result; brechen; Fall 2: Ergebnis = Ergebnis - ScreenNum; document.form1.txt.value = result; brechen; Fall 3: Ergebnis = Ergebnis * screennum; document.form1.txt.value = result; brechen; Fall 4: if (screenNum == 0) {// 设置显示框的值 document.getElementById ("txt"). value = "除数不能为 0"; // 3s 后 ， 执行清屏函数 setTimeout (Clearscreen, 3000); } else {result = result/screenNum; document.form1.txt.value = result; } brechen; Fall 5: Ergebnis = (-1)*screennum; document.form1.txt.value = result; brechen; Fall 0: Ergebnis = ScreenNum; document.form1.txt.value = result; brechen; } // 当按了运算符键后 ， 不能再按 不能再按 meideRepeat = false; }} // 第十二步 ： 清屏函数 Funktion clearscreen () {document.getElementById ("txt"). Value = "0"; }以上就是本文的全部内容 ， 希望对大家的学习有所帮助 ， 也希望大家多多支持武林网。 也希望大家多多支持武林网。