一、简单计算器
①效果：
②知识点：
1、通过getFirstNumber（） 和 getTwiceNumber（）这两个函数来得到input中输入的
具体就是通过，对input进行id标记了之后，通过 document.getElementById("first/twice).value
来得到用户输入的值，然后通过return 返回给 各个加减乘除函数的
function getFirstNumber() { var firstNumber = document.getElementById("first").value; return firstNumber; }
2、每一个加减乘除函数都要把结果显示出来，就要用到document.getElementById("result").innerHTML=re;
所以为了减少代码行，就吧这个功能也变成了一个函数（sendResult（））
function sendResult(result_1) { var num = document.getElementById("result") num.innerHTML = result_1; }
3、通过 来给 html中的四个按钮进行隔开（空格）
4、由于在表格后面要显示result，开始的时候仅仅是
内容是空的，所以开始的时候最后的那个方框是不会显示出来的，
只有在后面给这个id=“result” 通过innerHTML传值了之后才会吧表格显示并且吧值也显示了
③完整代码
JS代码
<body> <p>简单计算器:p> <table border="1" style="position:center;"> <tr> <td>第一个数：td> <td><input type="text" id="first"/>td> tr> <tr> <td>第二个数：td> <td><input type="text" id="twice"/>td> tr> <tr> <td colspan="2" > <button style="width:inherit" onclick="add()">+button> <button style="width:inherit" onclick="subtract()">-button> <button style="width:inherit" onclick="ride()">*button> <button style="width:inherit" onclick="devide()">/button> td> tr> <tr> <td colspan="2" rowspan="2"> <p id="result">p> td> tr> table> body>
二、入门以上计算机
①效果图：
②知识点：
1、在HTML中，巧妙的用class和id，用于像用户输入0到9还有各种符号的，都可以设置统一的样式，只要可以显示在
屏幕上就行。
2、在HTML中，分别对结果的显示 id=“show” 还原id="clear" 和等于号id=“ok” 分别搞样式，其他的都是统一的修改样式的
3、在JS中（减少后面的代码，统一初始化了，其中的getElementsByClassName 就是为了上面统一设置的class=“td”做准备的，
为了给0到9和加减乘除等进行统一设置样式的
var oTd = document.getElementsByClassName("td");
var oK = document.getElementById("ok");
var oShow = document.getElementById("show");
var oClear = document.getElementById("clear");
4、没有对加减乘除单独的进行计算，而是把用户在显示屏中加入的变成一个字符串 存到run中
var run = '';//全局变量 公式
· 5、点击“=”的时候，通过对run这个字符串 传入到已知函数 eval（str），这个函数就是可以对传入的字符串进行计算的
6、因为可能开始的时候显示屏中和run都是0，后面可能在得到一个数之后，还想要继续进行加减乘除的话，为了不要重新的输入
（也就是在按“=”之后还可以继续加减乘除然后再按“=”）
oK.onclick=function(){
if(run!==""){
oShow.innerHTML = eval(run);
}
if(oShow.innerHTML!=="0"){
run = show.innerHTML;
}
}
这个表示的就是，如果run不是一个空的字符串的话，声明要进行计算的，调用eval ； 如果在显示屏中显示的结果不是0的话（说明至少按过
了一次“=”，这个时候就把run重新赋值为上一次的结果）
7、还原函数的设计
oClear.onclick=function(){
run = '';
show.innerHTML = '0';
}
还原的话既要吧显示的结果变成0，也要把计算的字符串run 变成0的
8、对0到9和加减乘除等字符设置统一的样式
因为在开始的时候，通过
var oTd = document.getElementsByClassName("td");
获取了多个 class=td的元素，这个时候oTd其实是一个数组，里面有全部class=td的元素的，所以可以用数组的length来得到元素的个数
通过 oTd[i].index = i; 给每一个元素 “标记”
oTd[i].onclick=function(){
//alert(oTd[this.index].innerHTML)
run += oTd[this.index].innerHTML;
oShow.innerHTML = run;
};
这就是在每一个被标记的按钮被点击的时候，让run这个计算字符串 尾部加上 当前这个按钮所代表的符号
这里的 oTd[this.index].innerHTML 表示的就是td中写入的内容 + - * / 这些，既要吧run尾部进行加入，也要在结果框中显示用户加入的这个字符
③完整代码：
<body> <table> <tr> <td colspan="5" id="show">0td> tr> <tr> <td class="td" id="zero">0td> <td class="td">.td> <td id="last"><> <td id="clear" colspan="2">ctd> tr> <tr> <td class="td">1td> <td class="td">2td> <td class="td">3td> <td class="td">+td> <td class="td">-td> tr> <tr> <td class="td">4td> <td class="td">5td> <td class="td">6td> <td class="td">*td> <td class="td">/td> tr> <tr> <td class="td">7td> <td class="td">8td> <td class="td">9td> <td id="ok" colspan="2">=td> tr> table> body>