计算器案例
1.声明变量-添加事件监听-绑定事件
2.函数用条件语句来写：
（1）先判断是数字或小数点
①屏幕上的数字是否为0（若为0，输入的是“.”，则显示“0.”，输入的不是点则显示此文本）
②屏幕上是否有点-如果再次输入的是点（有点不给-没点给点）；否则拼接此文本
（2）除数字和小数点以外的按钮：
考略n*：（设置布尔类型的值来切换数字和符号）
如果输入的最后一个字符是“=”，截取符号前面的数字做运算，取最后一个字符，拼接起来做运算；否则直接拼接；
（3）其他符号(+ - * / = AC DEL )：记录当前屏幕上的值，实现各符号对应的方法 eval()；
3.计算器的页面
4.代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
table{
margin:0 auto;
border: 1px solid #000;
border-collapse: collapse;
width:300px;
}
td{
width:70px;
height:70px;
border:1px solid #000;
}
.btn{
width:100%;
height:100%;
font-size: 20px;
}
#scipt{
width:100%;
height:100%;
outline: none;
border-style: none;
text-align: right;
font-size: 25px;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="4">
<input type="text" id="scipt" value="0" disabled/>
</td>
</tr>
<tr>
<td colspan="2"><button class="btn clear">AC</button></td>
<td colspan="2"><button class="btn del">DEL</button></td>
</tr>
<tr>
<td><button class="btn">7</button></td>
<td><button class="btn">8</button></td>
<td><button class="btn">9</button></td>
<td><button class="btn">*</button></td>
</tr>
<tr>
<td><button class="btn">4</button></td>
<td><button class="btn">5</button></td>
<td><button class="btn">6</button></td>
<td><button class="btn">/</button></td>
</tr>
<tr>
<td><button class="btn">1</button></td>
<td><button class="btn">2</button></td>
<td><button class="btn">3</button></td>
<td><button class="btn">-</button></td>
</tr>
<tr>
<td><button class="btn">0</button></td>
<td><button class="btn">.</button></td>
<td><button class="btn">+</button></td>
<td><button class="btn">=</button></td>
</tr>
</table>
<script>
//接受所有按钮的变量
var btnList=null;
//接收屏幕元素
var screenIpt=null;
//设置布尔类型的值实现数字和字符的切换
var ischange=false;
//接收屏幕数据
var result="";
var clear=null;
var del=null;
window.onload=function(){
btnList=document.getElementsByClassName('btn');
screenIpt=document.getElementById('scipt');
clear=document.getElementsByClassName('clear')[0];
del=document.getElementsByClassName('del')[0];
//给各个按钮添加事件监听
for(var i=0;i<btnList.length;i++){
btnList[i].addEventListener('click',listen);
}
}
function listen(){
//让数字和小数点显示到屏幕
if(!isNaN(this.innerText)||this.innerText=="."){
ischange=false;
//考虑屏幕的值是否为0
if(screenIpt.value=='0'){
screenIpt.value=this.innerText=='.'?'0.':this.innerText;
}
else{
//检测屏幕上是否有点
if(screenIpt.value.indexOf('.')!=-1){
//有点
if(this.innerText!=='.'){
screenIpt.value+=this.innerText;
}
}
else{
//没点
screenIpt.value+=this.innerText;
}
}
}
else{
//这里是除数字和小数点外的其他字符
if(ischange){
//考虑n* 7*=？
var bring=result.substring(0,result.length-1);
if(this.innerText=='='){
var res=eval(bring);
//取最后一个字符
var lastchar=result.substr(result.length-1,1);
screenIpt.value=eval(res+lastchar+res);
}
else{
result=bring+this.innerText;
}
//n*执行完之后直接退出此函数 AC和DEL不起作用 在这里添加上AC和DEL的点击事件
clear.onclick=function(){
screenIpt.value=0;
result="";
}
del.onclick=function(){
var len=screenIpt.value;
screenIpt.value=len.length>1?len.substr(0,len.length-1):0;
result="";
}
return;
}
//记录屏幕当前值
result+=screenIpt.value;
switch (this.innerText){
case 'AC':
//屏幕清零
screenIpt.value=0;
result="";
break;
case 'DEL':
//输入错误 向前删除
var len=screenIpt.value;
screenIpt.value=len.length>1?len.substr(0,len.length-1):0;
result="";
break;
case '=':
//计算表达式eval();
var res=eval(result);
screenIpt.value=res;
result="";
break;
default:
//+-*/
//屏幕清零
screenIpt.value=0;
ischange=true;
result+=this.innerText;
break;
}
}
}
</script>
</body>
</html>