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

前端技术 2023/09/06 JavaScript

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；当按了任意运算符键后，数的输入状态变为1
var 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\";
 
}

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

本文地址：https://www.stayed.cn/item/14735

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案