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> <form1 = "form1"name = "form1"메서드 = "post"action = "" "> <table colspadding ="0 "셀 스패닝 ="0 "id ="valign = "valign ="ttx "> 라벨" "valign ="valign " <입력 이름 = "txt"type = "text"id = "txt"value = "0"onfocus = "this.blur ();"/> </> </td> </td> </td> </td> <td align = "center"valign = "middle"onclick = "deleteall ();"> c </td> <td align = "Middle" "Middle" onclick = "backspace ();"> ← </td> <td align = "center"valign = "middle"onclick = "sign ();"> ± </td> <td align = "center"valign = "middle"onclick = "add ();"> ＋ </td> </tr> <td align = "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 = "valign ="on click = "sub stract (); </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 = "middle"onclick = ""> 6 </td> <td> ">"> td> <td> <td>. valign = "middle"onclick = "multip ();"> x </td> </tr> <tr> <td align = "center"valign = "middle"onclick = "command (1);"> 1 </td> <td align = "center"valign = "middle"onclick = "command (2);"> 2 </td> onclick = "command (3);"> 3 </td> <td align = "center"valign = "middle"onclick = "divide ();"> ÷ </td> </tr> <tr> <td align = "valign ="middle "onclick ="command (0); "> 0 <td> <td> <td> <td> <td> <td> <td> onclick = "dot ();"> ▪ ▪ </td> <td colspan = "2"align = "center"valign = "middle"bgcolor = "#cc6600"onclick = "Equal ();"> </td> </tab> <p> <p> <p> </p> </body> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td>
CSS 篇
@Charset "UTF-8";/ * CSS 문서 */. Trb {Font-Family : Georgia, "Times New Roman", Times, Serif; 글꼴 크기 : 24px; 색상 : #fff; 배경색 : #333; 텍스트 정렬 : 센터; 국경 : 1px Solid #999;}. 연산자 {배경색 : #333; 글꼴 크기 : 18px; 색상 : #C60; Font-Family : Verdana, Geneva, Sans-Serif;} td : 호버 {font-size : 28px; 커서 : 포인터; } .txt {높이 : 100px; 너비 : 320px; 배경색 : #333; 텍스트 정렬 : 왼쪽; 수직 정상 : 바닥; 색상 : #fff; 글꼴 크기 : 30px;}JavaScript 篇
// 实现计算器功能 // 实现计算器功能 var result = 0; // 显示框中的数 显示框中的数 (默认为“0”) var screenum = "0"; // 数的初始输入状态 数的初始输入状态, 默认为 0 ；当按了任意运算符键后 ；当按了任意运算符键后, 数的输入状态变为 1var state = 0; // var voperepeat = true; // 运算符键 默认为 默认为 0- 等于号-等于号 等于号-等于号 等于号 等于号 等于号-获取显示框的值 第一步 第一步 第一步 ： ： ： ： ： ： ： ： ： ： ： ： ： ： ： ： ： ： 并显示在显示框中 默认为 默认为). 문자열 (document.form1.txt.value); // 对该值进行判断 对该值进行判断, 对该值进行判断 "0"<0, 且输入状态 0, 则返回前者 则返回前者 ""(双重三目运算) // 两个判断条件 ： 1 、显示框中值是否为 "0", 2 str = (str! = "0")? ((state == 0)? str : "") : ""; // str = str + string (num); // 刷新显示 document.form1.txt.value = str; // 按了任意数字键后 按了任意数字键后, 按了任意数字键后 0 State = 0; // 重置防止重复按键 repiprepeat = true;} // 第二步 ： 确保输入的数是合法的, 每个数至多只有一个小数点 함수 dot () {var str = string (document.form1.txt.value); // 若该数前面未接运算符 若该数前面未接运算符, 若该数前面未接运算符, 否则为 "0"； str = (state == 0)? str : "0"; // java a string 有 length () 方法 方法 方法 方法 方法 方法 里 里 里 줄 有 길이 属性 (i = 0; i <= str.length; i ++) {// substr () 获取下标从 i 开始 开始, 个数为 1 个的子串 if (str.substr (i, 1) == ") {// 当存在小数点时 当存在小数点时 当存在小数点时 当存在小数点时 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 则程序终止 reft; }} //}}, 则在该数后面加上 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; } // 第四步 ： 删除所有 함수 deleteAll () {// 显示框设为 "0"document.form1.txt.value = "0"; // state = 0; // 恢复运算符键, 恢复运算符键 0-- 等于号 연산자 = 0;} // 第五步 ： function add () {// 调用计算函数 acculate (); // state = 1; // 更改运算符键, 1-- 加号 연산자 = 1; } // 第六步 ： 减法 함수 sutcract () {// 调用计算函数 calculate (); // state = 1; // 2- 减号 연산자 = 2; } // 第七步 ： 乘法 함수 곱하기 () {// 调用计算函数 acculate (); // state = 1; // 3-- 乘号 연산자 = 3; } // 第八步 ： 除法 function divide () {// 调用计算函数 acculate (); // state = 1; // 4- 除号 연산자 = 4; } // 第九步 ： 正负号 함수 부호 () {// 5-- 正负号 연산자 = 5; // 调用计算函数 계산 (); // state = 1; // 0- 等于号 연산자 = 0; // 正负号可以连续按 Repopepeat = true;} // 第十步 ： 等于 function equal () {// 调用计算函数 acculate (); // state = 1; // 0- 等于号 연산자 = 0; } // 第十一步 ： 计算 함수 계산 () {// 获取显示框中的值 screennum = number (document.form1.txt.value); if (Repopeat) {switch (연산자) {case 1 : result = result + screenum; document.form1.txt.value = 결과; 부서지다; 사례 2 : 결과 = 결과 - 스크린; document.form1.txt.value = 결과; 부서지다; 사례 3 : 결과 = 결과 * 스크린; document.form1.txt.value = 결과; 부서지다; 사례 4 : if (screenum == 0) {// 设置显示框的值 document.getElementById ( "txt"). // 3S 后 后, 执行清屏函数 settimeout (CLEARSCREEN, 3000); } else {result = result/screennum; document.form1.txt.value = 결과; } 부서지다; 사례 5 : 결과 = (-1)*스크린; document.form1.txt.value = 결과; 부서지다; 사례 0 : 결과 = 스크린; document.form1.txt.value = 결과; 부서지다; } // 当按了运算符键后 当按了运算符键后, 不能再按 Repepeat = false; }} //} ： 清屏函数 함수 clearscreen () {document.getElementById ( "txt"). value = "0"; }以上就是本文的全部内容 以上就是本文的全部内容, 希望对大家的学习有所帮助, 也希望大家多多支持武林网。