html篇：纯JavaScript 网页版计算器calc，支持多级运算

   哈 哈，这是第一次创作！不知道该说什么？只好先来一句 hello world！请多多关注！作者QQ：183 027 8686

第一篇不知道该写什么？但是，如果是一个IT小白，只是单纯的拥有一部电脑，那么，这部分代码绝对合适。
因为，这份代码无需其他支持，只要将它复制到后缀为.txt的文本文档中，通过浏览器运行即可。

这篇代码参考了部分的文章，再次感谢。

首先，是界面布局：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>洪君的小型calc</title>
<style type="text/css">
* {
 margin: 0px;
 padding: 0px;
}
td {
 border: #ff8080 solid 1px;/* 好看的边框*/
 width: 100px;
 height: 80px;
 text-align: center;
 font-size: 20px;
}

.tdisred {
 color: red;
}
</style>
<script type="text/javascript">
function $(id) {//id选择器
  return document.getElementById(id);//比较方便，又简约实用
 }
 
 function floatRound(nums) {// 数字 位数 四舍五入
  var numspow = Math.pow(10, 2);//留几位，可酌情修改 2：留两位小数
  return Math.round(nums * numspow) / numspow;
 }
</script>
</head>
<body>

 <span id="hiddenv" class="tdisred"
  style="display: none; position: absolute;">*</span>
  <!--下面是宫格式的布局-->
<table align="center" style="margin-top: 15px;">

<tr>
   <td colspan="5" height="120px" id="content"></td>
  </tr>
  
  <tr>
   <td onclick="addCalc(this)" class="tdisred">C</td>
   <td onclick="addCalc(this)" class="tdisred">Del</td>
   <td onclick="addCalc(this)">0</td>
   <td onclick="addCalc(this)">÷</td>
  </tr>
  
  <tr>
   <td onclick="addCalc(this)">7</td>
   <td onclick="addCalc(this)">8</td>
   <td onclick="addCalc(this)">9</td>
   <td onclick="addCalc(this)">×</td>
  </tr>
  
<tr>
   <td onclick="addCalc(this)">4</td>
   <td onclick="addCalc(this)">5</td>
   <td onclick="addCalc(this)">6</td>
   <td onclick="addCalc(this)">-</td>
  </tr>
  
  <tr>
   <td onclick="addCalc(this)">1</td>
   <td onclick="addCalc(this)">2</td>
   <td onclick="addCalc(this)">3</td>
   <td onclick="addCalc(this)">+</td>
  </tr>
  
  <tr>
   <td onclick="addCalc(this)">(</td>
   <td onclick="addCalc(this)">)</td>
   <td onclick="addCalc(this)">.</td>
   <td onclick="addCalc(this)">=</td>
  </tr>
  </table>
  
  <input type="hidden" id="hiddenin" value="0">
  </body>
</html>

ps:代码原本用eclipse编辑，格式与其他开发工具的有所不同。
1.新建一个后缀为.txt的文本文档
准备好一个nice一点的浏览器
将这份代码复制（ctrl+C），ctrl+v粘贴到空白txt文本内，crtl+s保存。
2.将文本.txt后缀改为.html，即可默认以浏览器的方式运行。可以看到一个界面较为美观的calc。

接下来，编辑JavaScript代码。
可以说，JavaScript是Java的扩展，简称js,基本的语法与Java相同,可顺利运行在各种浏览器。
JavaScript代码的标志是< script type=“text/javascript”></ script>，按规范，具体代码放在之上。

<script type="text/javascript">
 function addCalc(td) {
  var boof = $("hiddenin").value;
  //获取隐藏的判断
  //找到用来显示String等式的td标签框
  //显示结果的td标签框即是显示String等式的td标签框
  var content = $("content");
   
  //获取td标签框内的等式字符串 
  var text = td.innerText;
  //如果是点击的是删除键 Del
  if ("Del" == text) {
   if (content.innerText.length > 0) {
    //按下删除键 Del，则删除显示框中的最后一个字符  
    content.innerText = content.innerText.substring(0,
      content.innerText.length - 1);
   }
   //如果是全部删除 C键
  } else if ("C" == text) {
   content.innerText = "";
   //如果是按了等于=号，调用计算方法
  } else if ("=" == text) {
   var contentText = parse(content.innerText);
   if (contentText == "") {
    content.innerText = "NaN";
   } else {
   //floatRound 方法是变换，改变显示值，结果将四舍五入，保留两位小数
    content.innerText = floatRound(contentText);
   }
   $("hiddenin").value = 1;
   $("hiddenv").style.display = "block";//显示提示符
   //除了上面三种情况,其他的按键都是尾加字符串到显示框
  } else {
   if (boof == 0) {
    content.innerText = content.innerText + text;
   } else if (boof == 1) {
    if (isNaN(text)) {// 如果是非数字
     content.innerText = content.innerText + text;
    } else {
     content.innerText = text;
    }
    $("hiddenin").value = 0;
    $("hiddenv").style.display = "none";//red * 提示符
   }
  }
 }

</script>

这段代码的效果：计算器点击按钮后，按钮上的符号出现在最上面的框中。

<script type="text/javascript">
 //按键=号后，被调用
 //解析显示框中的等式字符串为一个正确无误的数字结果
 function parse(content) {
 
  //寻找显示框中的等式字符串的最后的一个左括号
  var index = content.lastIndexOf("(");
  //如果等式中有左括号 
  if (index > -1) {
   //寻找右括号,应该从左括号的位置开始寻找  
   var endIndex = content.indexOf(")", index);
   //如果等式中有右括号 
   
   if (endIndex > -1) {
    //使用递归算法，调用自己算出括号中的结果   
    var result = parse(content.substring(index + 1, endIndex));
    //substring是JavaScript内置函数
    //切割字符串，达到想要的效果
    //然后继续调用自己，举个例子
    //其实这里完成的工作就是"6+3+(2+4*2)"转化成了"6+3+10",也就是用括号及括号中的结果替换括号所在位置   
    return parse(content.substring(0, index) + result
      + content.substring(endIndex + 1))
   }
  }
  //四个index的判断式顺序不能乱，默认的加减乘除不能适用
  //乘除加减的顺序是经过实践的
  index = content.lastIndexOf("×");
  //×号并非是英文X
  //多个if与多个else if的区别很大，Java初学者难以分辨
  //多个if：所有if判断中的判断都会运行
  //多个else if：但是，代码从上往下运行，else if判断成功，就不会再运行下面的else if
  //此处必须是多个if判断
  
  if (index > -1) {
   return parse(content.substring(0, index))
     * parse(content.substring(index + 1));
  }
  
  index = content.lastIndexOf("÷");
  if (index > -1) {
   return parse(content.substring(0, index))
     / parse(content.substring(index + 1));
  }
  
  index = content.indexOf("+");
  if (index > -1) {
   return parse(content.substring(0, index))//递归算法，继续自己调自己
     + parse(content.substring(index + 1));
  }
  
  index = content.lastIndexOf("-");
  if (index > -1) {
   return parse(content.substring(0, index))
     - parse(content.substring(index + 1));
  }
  
  if (content == "") {//如果为空，返回为0
   return 0;
  } 

	else {
   return content * 1;//看似无用，其实是必要的一步，其实效果就是将字符串转为数字
  }
 }
 
</script>

这段代码是具体的运算规则。

本次编写的calc可在电脑运行，也可在手机浏览器运行。

完结！

html篇：纯JavaScript 网页版计算器calc，支持多级运算

猜你喜欢