一、思路
- 点击数字或符号,将其值放入文本框中;
- 对于“.”的bug处理;
- 进行运算:声明一个数组(为动态数组),在清屏前先存值
二、代码块
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table{
border-collapse: collapse;
width: 400px;
margin: 0 auto;
border: 1px solid silver;
}
table td{
border: 1px solid silver;
}
button[name="btnclick"]{
width: 100px;
height: 60px;
font-size: 25px;
}
button[name="btnall"]{
width: 100%;
height: 60px;
font-size: 25px;
}
.txt{
width: 99%;
height: 75px;
font-size: 25px;
outline: none;
text-align: right;
background-color: white;
border-style: none;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="4"><input type="text" class="txt" value="0" disabled></td>
</tr>
<tr>
<td colspan="2"><button class="btn" name="btnall">ac</button></td>
<td colspan="2"><button class="btn" name="btnall">del</button></td>
</tr>
<tr>
<td><button class="btn" name="btnclick">7</button></td>
<td><button class="btn" name="btnclick">8</button></td>
<td><button class="btn" name="btnclick">9</button></td>
<td><button class="btn" name="btnclick">*</button></td>
</tr>
<tr>
<td><button class="btn" name="btnclick">4</button></td>
<td><button class="btn" name="btnclick">5</button></td>
<td><button class="btn" name="btnclick">6</button></td>
<td><button class="btn" name="btnclick">/</button></td>
</tr>
<tr>
<td><button class="btn" name="btnclick">1</button></td>
<td><button class="btn" name="btnclick">2</button></td>
<td><button class="btn" name="btnclick">3</button></td>
<td><button class="btn" name="btnclick">-</button></td>
</tr>
<tr>
<td><button class="btn" name="btnclick">0</button></td>
<td><button class="btn" name="btnclick">.</button></td>
<td><button class="btn" name="btnclick">+</button></td>
<td><button class="btn" name="btnclick">=</button></td>
</tr>
</table>
<script>
var btn=document.getElementsByClassName("btn");
var txt=document.getElementsByClassName("txt")[0];
var res=[];
for(var i=0;i<btn.length;i++){
btn[i].onclick=function(){
if(!isNaN(this.innerHTML)||this.innerHTML=="."){
if(txt.value=="0"){
if(this.innerHTML=="."){
txt.value="0"+this.innerHTML;
}
else{
txt.value=this.innerHTML;
}
}
else{
if(this.innerHTML=="."){
if(txt.value.indexOf(".")==-1){
txt.value+=this.innerHTML;
}
}
else{
txt.value+=this.innerHTML;
}
}
}
else{
if(this.innerHTML=="+"||this.innerHTML=="-"||this.innerHTML=="*"||this.innerHTML=="/"){
if(res.length!=0){
if(txt.value=="0"&&isNaN(res[res.length-1])){
res[res.length-1]=this.innerHTML;
}
else{
res[res.length]=txt.value;
res[res.length]=this.innerHTML;
}
}
else{
res[res.length]=txt.value;
res[res.length]=this.innerHTML;
}
txt.value="0";
}
else if(this.innerHTML=="="){
res[res.length]=txt.value;
txt.value=eval(res.join(""));
res=[];
}
else if(this.innerHTML=="ac"){
}
else if(this.innerHTML=="del"){
var arr=txt.value.split("");
arr.pop();
if(arr.length==0){
txt.value="0";
return;
}
txt.value=arr.join("");
}
}
}
}
</script>
</body>
</html>
三、遇到的问题及解决方法
- 问题:在输入之前,要先将默认的“0”清掉
解决方法:作判断,若当前值为“0”时,则直接赋值;若当前值不为“0”,则做拼接 - 问题:按“.”时,不能直接显示“.”,需做处理
解决方法:在当前值为“0”中作判断,若当前文本值为“.”,则给该文本值用“0”拼接;否则直接赋值 - 问题:一个屏上只能有一个“.”
解决思路:在屏幕上已不是“0”时,加入代码,点“.”时考虑是否需要“.”,可使用indexOf方法检索“.”是否出现
注:
indexOf():如果要检索的字符串值没有出现,则该方法返回 -1。 - 问题:只有数字和“.”才能出现在屏幕上
解决方法:使用isNaN()
注:
isNaN(x):用于检查其参数是否是非数字值;若 x 是特殊的非数字值 NaN(或能被转换为这样的值),返回的值就是 true,若x 是其他值,则返回 false。 - 问题:所按不同符号的结果
解决方法:
(1)若所按符号为“+ - * /”时:按照数组的长度存值,长度为0时先存屏幕的值,长度为1时传入符号
(2)若所按符号为“=”时:按照数组的长度存值;使用join(),将数组拼接为字符串;使用eval(),计算表达式;将计算后得到的值给屏幕
(3)若所按符号为“ac”时:将屏幕上的值清空,数组中的值清空
(4)若所按符号为“del”时:先使用split(),将字符串转为数组;再使用pop(),删除数组最后一个元素;最后使用join(),将数组拼接为字符串
注:
join():将数组转换为字符串,对数组进行拼接
eval():计算表达式,进行对象装化
split():将字符串转换为数组形式;括号里的参数取决于字符串中的标志性东西,以标志性东西截取,产生一个新的数组
pop():删除数组最后一个元素,并返回删除的元素,对原数组有影响 - 问题:连续按了两次符号
解决思路:只需判断数组里的最后一位是否为符号,若最后一位是符号,再一次所按的还是符号,则需用该符号将数组的最后一位符号替换掉
解决方法:在所按符号为“+ - * /”中添加代码,
(1)先判断数组的长度是否为0,为0时先存值;不为0时再判断数组的最后一位是否为非数字值(此为符号),是则直接覆盖,否则继续存值
(2)数组长度不为0时的判断条件加当前屏幕的值为0 - 问题:一次计算过后,需用第一次运算的结果作为第二次运算的值
解决方法:在所按符号为“=”中,每次运算结束将数组清空,为下一次计算作准备;不清空则上一次的表达式还在其中 - 问题:在所按符号为“del* /”时,删除到最后一位,屏幕值清空了
解决方法:在删除数组最后一个元素后,进行判断,若数组长度为0,则将屏幕值改为0,并且返回该值