标签：undefined text 计算器 width 5px 简单 var border
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ margin: 0 auto; width: 300px; } .text{ margin: 5px; } .text input{ width: 100%; height: 25px; text-align: right; font-size: 18px; border: 1px solid #ccc; border-radius: 5px; } .line{ margin: 5px; } .line input{ width: 23.5%; height: 25px; text-align: center; font-size: 18px; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; } </style> </head> <body> <div class="box"> <div class="text"><input id="result" type="text"></div> <div class="line"> <input type="button" value="7" onclick="inputNum('7')"> <input type="button" value="8" onclick="inputNum('8')"> <input type="button" value="9" onclick="inputNum('9')"> <input type="button" value="/" onclick="inputNum('/')"> </div> <div class="line"> <input type="button" value="4" onclick="inputNum('4')"> <input type="button" value="5" onclick="inputNum('5')"> <input type="button" value="6" onclick="inputNum('6')"> <input type="button" value="*" onclick="inputNum('*')"> </div> <div class="line"> <input type="button" value="1" onclick="inputNum('1')"> <input type="button" value="2" onclick="inputNum('2')"> <input type="button" value="3" onclick="inputNum('3')"> <input type="button" value="-" onclick="inputNum('-')"> </div> <div class="line"> <input type="button" value="0" onclick="inputNum('0')"> <input type="button" value="=" onclick="inputNum('=')"> <input type="button" value="C" onclick="inputNum('c')"> <input type="button" value="+" onclick="inputNum('+')"> </div> </div> <script type="text/javascript"> // 定义几个变量 var op = undefined; // 保存操作符 var result = undefined; // 保存计算的结果 var num1 = undefined;// 记录第一个数 function inputNum(n){ // 判断分类 if(n >= '0' && n <= '9'){ // 数字 写入输入框 // 根据情况判断如何输入 if(result != undefined){// 已经计算过了 // 直接覆盖 document.getElementById("result").value = n; // 把result还原 result = undefined; }else{ // 没有计算就续到后面 var value = document.getElementById("result").value; if(value == '0'){ document.getElementById("result").value = n; }else{ document.getElementById("result").value = value + n; } } }else{ switch(n){ case '+': c();// 判断是否要计算,要计算就计算，如果不计算，就记录数据 // 记录操作符 op = n; document.getElementById("result").value = ""; break; case '-': c(); op = n; document.getElementById("result").value = ""; break; case '*': c(); op = n; document.getElementById("result").value = ""; break; case '/': c(); op = n; document.getElementById("result").value = ""; break; case 'c': document.getElementById("result").value = ""; // 全部还原 result = undefined; op = undefined; num1 = undefined; break; case '=': c(); document.getElementById("result").value = result; // 全部还原 result = undefined; op = undefined; num1 = undefined; break; } } } function c(){ // 判断是否要做计算 if(num1 != undefined && op != undefined){ switch(op){ case '+': result = eval(num1) + eval(document.getElementById("result").value); document.getElementById("result").value=result; break; case '-': result = eval(num1) - eval(document.getElementById("result").value); document.getElementById("result").value=result; break; case '*': result = eval(num1) * eval(document.getElementById("result").value); document.getElementById("result").value=result; break; case '/': result = eval(num1) / eval(document.getElementById("result").value); document.getElementById("result").value=result; break; } num1 = undefined; }else{ num1 = document.getElementById("result").value; } } </script> </body> </html>标签：undefined,text,计算器,width,5px,简单,var,border 来源： https://www.cnblogs.com/xiaoxiaodeboke/p/15867752.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。