JavaScript 网页计算器代码 ， 该计算器是用 dw 写的！
Html 篇
<html <head> <meta http-equiv = "konten-tipe" content = "text/html; charset = utf-8"/> <iteme> 计算器 </iteme> <link href = "style/calculator.css" rel = "styles" type = "text/css"/<script script script = "typle" > <Form id = "Form1" name = "Form1" Method = "Post" Action = ""> <Table CellPadding = "0" cellspacing = "0" id = "calculator"> <tr> <td colspan = "4" align = "left" valign = "TOP"> <label untuk = "tx"> </label> <input = "varign =" TOP "> TEKS =" tx "> </label> <input =" varign = "TOP" TEXT = "tx"> </label> <input = "varign =" TOPLE "> <label for =" tx "> </label> <input name =" TOPE "TOPE" onfocus = "this.blur ();"/> </td> </tr> <tr> <td align = "center" valign = "middle" onclick = "deleteall ();"> c </td> <td entering = "center" valign = "tide" onclick = "backspace ();"> ← </← ← ← ← ← ← ← ">"> ">"> ">"> ">"> onclick="sign();">±</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 = "tengah" onclick = "command (9);"> 9 </td> <td align = "center" valign = "middle" onclick = "rstract ();"> － </td> </tr> <tr> <td "td ="> － </td> </tr> <tr> <td "td =" － － </td> </tr> </tr> <td = "TD ="> </td> </tr> </tr> </tr> <) </td = "TD" </td> </td> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </tr> </td arign () OnClick = "Command (4);"> 4 </td> <td align = "center" valign = "tengah" onclick = "command (5);"> 5 </td> <td align = "center" valign = "middle" onclick = "center ="); "> 6 </td> <td align = ogn =" oPLick = "oIGLIGN (6);"> 6 </td> <td align = "oIgn =" oIGLIGN ";" ONIGN ";" "> 6 </td> <td align =" oIGLIGN ";" pusat ";" OnIGN ";" "> 6 </td> <td align =" oIgn = "o8 =" oIGLIGN (6); "> 6 </td> <td align =" TD "" </tr> <tr> <td align = "center" valign = "tengah" onclick = "command (1);"> 1 </td> <td align = "center" valign = "tengah" onclick = "perintah (2);"> 2 </td> <td Align = "center" valign = "2);"> "command =" TD; "TD" TD "TD" TD "TD" TD "TD" TD "TD" TD "TD" TD "TD" COMAND; valign="middle" onclick="divide();">÷</td> </tr> <tr> <td align="center" valign="middle" onclick="command(0);">0</td> <td align="center" valign="middle" onclick="dot();">▪</td> <td colspan="2" align="center" valign = "tengah" bgcolor = "#cc6600" ontClick = "equal ();"> ＝ </td> </tr> </able> <p> </p> <p> </p> </form> </body> </html>
CSS 篇
@charset "UTF-8";/ * Dokumen CSS */. TRB {Font-Family: Georgia, "Times New Roman", Times, Serif; Ukuran font: 24px; Warna: #fff; Latar Belakang-Color: #333; Teks-Align: tengah; BORDER: 1PX SOLID #999;}. Operator {latar belakang-warna: #333; font-size: 18px; Warna: #C60; Font-Family: Verdana, Geneva, sans-serif;} td: hover {font-size: 28px; kursor: pointer; } .txt {height: 100px; Lebar: 320px; Latar Belakang-Color: #333; Teks-Align: Kiri; Vertikal-Align: Bawah; Warna: #fff; Ukuran font: 30px;}JavaScript 篇
// 实现计算器功能 // 结果 hasil var = 0; // 显示框中的数（默认为 “0”） var screennum = "0"; // 数的初始输入状态 ， 默认为 0 ；当按了任意运算符键后 ， 数的输入状态变为 1var state = 0; // 防止重复按运算符键 var hindari repeat = true; // 运算符键（默认为 0-- 等于号） var operator = 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 status = 0; // 重置防止重复按键 hindari repeat = true;} // 第二步 ： 确保输入的数是合法的 ， 每个数至多只有一个小数点 function dot () {var str = string (document.form1.txt.value); // 若该数前面未接运算符 ， 则返回前值 ， 否则为 "0" ； str = (state == 0)? Str: "0"; // java 里 string 有 length () 方法 ， 而 js 里 string 有 panjang 属性 untuk (i = 0; i <= str.length; i ++) {// substr () 获取下标从 i 开始 ， 1 个的子串 个的子串 ， ， ， ， ， ， ， ， ， ， ， ， {， ， ， ， ， ， }} // 若无小数点 ， 则在该数后面加上 str = str+"."; // 刷新显示 document.form1.txt.value = str; // 恢复数的初始输入状态 status = 0; } // 第三步 ： 处理退格键 fungsi 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; } // 第四步 ： 删除所有 function deleteall () {// 显示框设为 "0" document.form1.txt.value = "0"; // 恢复数的初始输入状态 status = 0; // 恢复运算符键 ， 默认为 0-- 等于号 operator = 0;} // 第五步 ： 加法 Fungsi add () {// 调用计算函数 Hitung (); // 更改数的输入状态 status = 1; // 更改运算符键 ， 1-- 加号 operator = 1; } // 第六步 ： 减法 Fungsi Subtract () {// 调用计算函数 Hitung (); // 更改数的输入状态 status = 1; // 2-- 减号 operator = 2; } // 第七步 ： 乘法 function multiply () {// 调用计算函数 Hitung (); // 更改数的输入状态 status = 1; // 3-- 乘号 operator = 3; } // 第八步 ： 除法 Fungsi divide () {// 调用计算函数 Hitung (); // 更改数的输入状态 status = 1; // 4-- 除号 operator = 4; } // 第九步 ： 正负号 function Sign () {// 5-- 正负号 operator = 5; // 调用计算函数 Hitung (); // 更改数的输入状态 status = 1; // 0-- 等于号 operator = 0; // 正负号可以连续按 hindari repeat = true;} // 第十步 ： 等于 Fungsi sama () {// 调用计算函数 Hitung (); // 更改数的输入状态 status = 1; // 0-- 等于号 operator = 0; } // 第十一步 ： 计算 Fungsi menghitung () {// 获取显示框中的值 screennum = number (document.form1.txt.value); if (hindari repeat) {switch (operator) {case 1: hasil = hasil + screennum; document.form1.txt.value = hasil; merusak; Kasus 2: Hasil = Hasil - Screennum; document.form1.txt.value = hasil; merusak; Kasus 3: Hasil = Hasil * Screennum; document.form1.txt.value = hasil; merusak; Kasus 4: if (screennum == 0) {// 设置显示框的值 document.geteLementById ("txt"). value = "除数不能为 0"; // 3s 后 ， 执行清屏函数 setTimeout (ClearScreen, 3000); } else {result = hasil/screennum; document.form1.txt.value = hasil; } merusak; Kasus 5: hasil = (-1)*screennum; document.form1.txt.value = hasil; merusak; Kasus 0: Hasil = Screennum; document.form1.txt.value = hasil; merusak; } // 当按了运算符键后 ， 不能再按 hindari repeat = false; }} // 第十二步 ： 清屏函数 fungsi clearscreen () {document.geteLementById ("txt"). Value = "0"; }以上就是本文的全部内容 ， 希望对大家的学习有所帮助 ， 也希望大家多多支持武林网。