收藏
PHPz批改状态：合格
老师批语：
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="calc.css"><script src="calc.js"></script></head><body><div class="calculator"><input type="text" class="showText" value="0" readonly><div class="buttList" onclick="calculator(event)"><button>F1</button><button>F2</button><button>CE</button><button>AC</button><button>7</button><button>8</button><button>9</button><button>/</button><button>4</button><button>5</button><button>6</button><button>*</button><button>1</button><button>2</button><button>3</button><button>-</button><button>0</button><button>.</button><button>=</button><button>+</button></div></div></body></html>
*{padding: 0;margin: 0;box-sizing: border-box;}body{background-color: aliceblue;}.calculator{min-width: 360px;max-width: 460px;display:grid;grid-template-rows: 70px,1fr;gap: 20px;border-radius: 8px;place-content: center;background-color:chocolate;padding: 15px;margin: 40px auto;}.calculator .showText{font-size: 32px;font-weight: bolder;text-align: right;padding: 10px;border-radius: 8px;background-color:rgb(213, 224, 245);border: none;outline: none;box-shadow: 3px 3px 3px 0px #333 inset;}.buttList{display: grid;grid-template-columns: repeat(4,1fr);grid-auto-rows: 50px;gap: 15px;}.calculator .buttList > *{border: none;outline: none;background-color:darkgray;font-size: 32px;border-radius: 8px;box-shadow: 2px 2px 2px #222;color: aliceblue;}.calculator .buttList > *:nth-child(-n+4){font-weight: bolder;color: #000;}.calculator .buttList > *:hover{cursor: pointer;/* 设置透明度 */opacity: 0.7;background-color: bisque;transition: 0.36s;color: black;}
function calculator(ev){//获取显示区text控件const showText = document.querySelector('.showText')// 判断是否点击的是button按钮if(ev.target.tagName!=='BUTTON') return false//获取button元素控件const btnCur = ev.target//得到button按钮上的text内容let text = btnCur.textContent//分支判断点击按钮操作switch(text){case 'AC':showText.value=0breakcase 'CE':if (showText.value.length == 1 || showText.value == '错误') {showText.value = 0} else{showText.value=showText.value.slice(0,-1)}breakcase 'F1':breakcase 'F2':breakcase '=':let result = showText.value// 缓存结果let t_Result = 0try {//判断计算器显示区计算表达式头部不能出现 / * 等字符串，如果出现显示区就显示0if(result.slice(0,1)==='/' || result.slice(0,1)==='*' ){showText.value=0}//判断显示区计算表达式中不能出现两个以上挨着一起的运算符的字符串，只要出现一次显示区就显示0if(result.indexOf("/*")>=0 || result.indexOf("*/")>=0||result.indexOf("+*")>=0 ||result.indexOf("-*")>=0||result.indexOf("*+")>=0 ||result.indexOf("*-")>=0||result.indexOf("+/")>=0 ||result.indexOf("-/")>=0||result.indexOf("/+")>=0 ||result.indexOf("/-")>=0){showText.value=0// showText.value="乘、除符号不能相连"break}/*** 判断计算器显示区计算表达式尾部不能出现 / * + - 等字符串，如果出现显示区就显示0* 判断是否是除0操作,如果是显示区就显示0*/if(result.slice(result.length-1)==='/' ||result.slice(result.length-1)==='*' ||result.slice(result.length-1)==='+' ||result.slice(result.length-1)==='-' ||//判断是否是除0操作result.slice(result.length-2)==='/0') {console.log(result.slice(result.length-1));console.log(result.slice(result.length-2));showText.value=0break}// 计算字符串表达式t_Result = eval(showText.value)// 如果结果是小数,仅保留4位就可以了if (t_Result.toString().includes('.')) {t_Result = t_Result.toFixed(4)// 如果小数部分出现了多余的0,应该去掉(对结果精度没影响)t_Result = parseFloat(t_Result)}// 显示出结果showText.value = t_Result} catch {showText.value = '错误'}breakdefault:// 如果当前结果区显示有前导0,先清空, 防止出现前导0if (showText.value == 0 || showText.value == '错误') showText.value = ''showText.value += text}}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
