JavaScript计算器网页版实现代码分享

2019-11-20 09:28:54

字体：大中小

来源：转载

供稿：网友

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=""> <table width="320" border="1" cellpadding="0" cellspacing="0" class="trb" id="calculator">  <tr>   <td height="100" colspan="4" align="left" valign="top"><label for="txt"></label>   <input name="txt" type="text" class="txt" id="txt" value="0" onfocus="this.blur();"/></td>  </tr>  <tr>   <td width="80" height="40" align="center" valign="middle" onclick="deleteAll();">C</td>   <td width="80" height="40" align="center" valign="middle" onclick="Backspace();">←</td>   <td width="80" height="40" align="center" valign="middle" onclick="sign();">±</td>   <td width="80" height="40" align="center" valign="middle" class="operator" onclick="add();">＋</td>  </tr>  <tr>   <td width="80" height="40" align="center" valign="middle" onclick="command(7);">7</td>   <td width="80" height="40" align="center" valign="middle" onclick="command(8);">8</td>   <td width="80" height="40" align="center" valign="middle" onclick="command(9);">9</td>   <td width="80" height="40" align="center" valign="middle" class="operator" onclick="subtract();">－</td>  </tr>  <tr>   <td width="80" height="40" align="center" valign="middle" onclick="command(4);">4</td>   <td width="80" height="40" align="center" valign="middle" onclick="command(5);">5</td>   <td width="80" height="40" align="center" valign="middle" onclick="command(6);">6</td>   <td width="80" height="40" align="center" valign="middle" class="operator" onclick="multiply();">×</td>  </tr>  <tr>   <td width="80" height="40" align="center" valign="middle" onclick="command(1);">1</td>   <td width="80" height="40" align="center" valign="middle" onclick="command(2);">2</td>   <td width="80" height="40" align="center" valign="middle" onclick="command(3);">3</td>   <td width="80" height="40" align="center" valign="middle" class="operator" onclick="divide();">÷</td>  </tr>  <tr>   <td width="80" height="40" align="center" valign="middle" onclick="command(0);">0</td>   <td width="80" height="40" align="center" valign="middle" onclick="dot();">▪</td>   <td height="40" colspan="2" align="center" valign="middle" bgcolor="#CC6600" onclick="equal();">＝</td>  </tr> </table> <p> </p> <p> </p></form></body></html>

CSS篇

@charset "utf-8";/* CSS Document */.trb { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; color: #FFF; background-color: #333; text-align: center; border: 1px solid #999;}.operator { background-color: #333; font-size: 18px; color: #C60; font-family: Verdana, Geneva, sans-serif;}td:hover{  font-size: 28px; cursor:pointer; }.txt { height: 100px; width: 320px; background-color: #333; text-align: left; vertical-align: bottom; color: #FFF; font-size: 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")?((state == 0)?str:""):""; //给当前值追加字符 str = str + String(num); //刷新显示 document.form1.txt.value = str; //按了任意数字键后，数的输入状态变为0 state = 0; //重置防止重复按键 avoidRepeat = true;}//第二步：确保输入的数是合法的，每个数至多只有一个小数点function dot() { var str = String(document.form1.txt.value); //若该数前面未接运算符，则返回前值，否则为"0"； str = (state == 0)?str:"0"; //Java里String有length()方法，而JS里String有length属性 for(i=0;i<=str.length;i++) { //substr()获取下标从i开始，个数为1个的子串 if(str.substr(i,1)==".") {  //当存在小数点时，则程序终止  return; }  } //若无小数点，则在该数后面加上 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; }//第四步：删除所有function deleteAll() { //显示框设为"0" document.form1.txt.value = "0"; //恢复数的初始输入状态 state = 0; //恢复运算符键，默认为0--等于号 operator = 0;}//第五步：加法function add() { //调用计算函数 calculate(); //更改数的输入状态 state = 1; //更改运算符键，1--加号 operator = 1; }//第六步：减法function subtract() { //调用计算函数 calculate(); //更改数的输入状态 state = 1; //2--减号 operator = 2;  }//第七步：乘法function multiply() { //调用计算函数 calculate(); //更改数的输入状态 state = 1; //3--乘号 operator = 3; }//第八步：除法function divide() { //调用计算函数 calculate(); //更改数的输入状态 state = 1; //4--除号 operator = 4; }//第九步：正负号function sign() { //5--正负号 operator = 5; //调用计算函数 calculate(); //更改数的输入状态 state = 1; //0--等于号 operator = 0; //正负号可以连续按 avoidRepeat = true;}//第十步：等于function equal() { //调用计算函数 calculate(); //更改数的输入状态 state = 1; //0--等于号 operator = 0;  }//第十一步：计算function calculate() { //获取显示框中的值 screenNum = Number(document.form1.txt.value); if(avoidRepeat) {  switch(operator){  case 1:  result = result + screenNum;  document.form1.txt.value = result;  break;  case 2:  result = result - screenNum;  document.form1.txt.value = result;  break;  case 3:  result = result * screenNum;  document.form1.txt.value = result;  break;  case 4:  if(screenNum == 0){   //设置显示框的值   document.getElementById("txt").value="除数不能为0";   //3s后，执行清屏函数   setTimeout(clearScreen,3000);  }else{   result = result/screenNum;   document.form1.txt.value = result;  }  break;  case 5:  result = (-1)*screenNum;  document.form1.txt.value = result;  break;  case 0:  result = screenNum;  document.form1.txt.value = result;  break;   } //当按了运算符键后，不能再按 avoidRepeat = false; } }//第十二步：清屏函数function clearScreen() { document.getElementById("txt").value = "0"; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：浅谈javascript运算符――条件,逗号,赋值,()和void运算符

下一篇：js实现楼层效果的简单实例