标签：03 22 value var innerText 2021 screenIpt 屏幕 result
计算器案例
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>
标签：03,22,value,var,innerText,2021,screenIpt,屏幕,result 来源： https://blog.csdn.net/m0_55600187/article/details/115091726
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。