一、简单计算器
①效果：
②知识点：
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，开始的时候仅仅是
<tr>
<td colspan="2" rowspan="2">
<p id="result"></p>
</td>
</tr>
内容是空的，所以开始的时候最后的那个方框是不会显示出来的，
只有在后面给这个id=“result” 通过innerHTML传值了之后才会吧表格显示并且吧值也显示了
③完整代码
JS代码
<script>
var result_1;
//加法
function add() {
var a = getFirstNumber();
var b = getTwiceNumber();
var re =Number( a) +Number( b);
sendResult(re);
}
//减法
function subtract() {
var a = getFirstNumber();
var b = getTwiceNumber();
var re = a - b;
sendResult(re);
}
//乘法
function ride() {
var a = getFirstNumber();
var b = getTwiceNumber();
var re = a * b;
sendResult(re);
}
//除法
function devide() {
var a = getFirstNumber();
var b = getTwiceNumber();
var re = a / b;
sendResult(re);
}
//给p标签传值
function sendResult(result_1) {
var num = document.getElementById("result")
num.innerHTML = result_1;
}
//获取第一位数字
function getFirstNumber() {
var firstNumber = document.getElementById("first").value;
return firstNumber;
}
//获取第二位数字
function getTwiceNumber() {
var twiceNumber = document.getElementById("twice").value;
return twiceNumber;
}
</script>
<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="inherit" onclick="add()">+</button> <button style="inherit" onclick="subtract()">-</button> <button style="inherit" onclick="ride()">*</button> <button style="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">0</td> </tr> <tr> <td class="td" id="zero">0</td> <td class="td">.</td> <td id="last"><</td> <td id="clear" colspan="2">c</td> </tr> <tr> <td class="td">1</td> <td class="td">2</td> <td class="td">3</td> <td class="td">+</td> <td class="td">-</td> </tr> <tr> <td class="td">4</td> <td class="td">5</td> <td class="td">6</td> <td class="td">*</td> <td class="td">/</td> </tr> <tr> <td class="td">7</td> <td class="td">8</td> <td class="td">9</td> <td id="ok" colspan="2">=</td> </tr> </table> </body>
<script>
var oTd = document.getElementsByClassName("td");
var oK = document.getElementById("ok");
var oShow = document.getElementById("show");
var oClear = document.getElementById("clear");
var run = '';//全局变量 公式
oK.onclick=function(){
if(run!==""){
oShow.innerHTML = eval(run);
}
if(oShow.innerHTML!=="0"){
run = show.innerHTML;
}
}
oClear.onclick=function(){
run = '';
show.innerHTML = '0';
}
for(var i = 0;i<=oTd.length;i++){
oTd[i].index = i;
oTd[i].onclick=function(){
//alert(oTd[this.index].innerHTML)
run += oTd[this.index].innerHTML;
oShow.innerHTML = run;
};
}
</script>
<style> table,tr,td{ border:1px solid blue; } #ok,.td,#clear,#last{ text-align:center; } </style>