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

   哈 哈,这是第一次创作!不知道该说什么?只好先来一句 hello world!请多多关注!作者QQ:183 027 8686

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

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

首先,是界面布局:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>洪君的小型calctitle>
<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">Ctd>
   <td onclick="addCalc(this)" class="tdisred">Deltd>
   <td onclick="addCalc(this)">0td>
   <td onclick="addCalc(this)">÷td>
  tr>
  
  <tr>
   <td onclick="addCalc(this)">7td>
   <td onclick="addCalc(this)">8td>
   <td onclick="addCalc(this)">9td>
   <td onclick="addCalc(this)">×td>
  tr>
  
<tr>
   <td onclick="addCalc(this)">4td>
   <td onclick="addCalc(this)">5td>
   <td onclick="addCalc(this)">6td>
   <td onclick="addCalc(this)">-td>
  tr>
  
  <tr>
   <td onclick="addCalc(this)">1td>
   <td onclick="addCalc(this)">2td>
   <td onclick="addCalc(this)">3td>
   <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 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可在电脑运行,也可在手机浏览器运行。

完结!

你可能感兴趣的:(csdn,ht,js)