一、简单计算器
①效果:
②知识点:
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="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>
HTML代码
二、入门以上计算机
①效果图:
②知识点:
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>
HTML代码
<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>
JS代码
<style>
table,tr,td{
border:1px solid blue;
}
#ok,.td,#clear,#last{
text-align:center;
}
</style>
css代码