CSS文件body,ul,li,select{margin:0;填充：0；box-sizing:border-box;}ul,li{list-style:none;}.calculator{max-width:300px;边距：20px自动；边框：1px实心#eee；border-radius:3px;}.cal-header{字体大小:16px;颜色：#333；字体粗细：粗体；高度：48px；行高：48px；border-bottom:1pxsolid#eee;text-align:center;}.cal-main{font-size:14px;}.cal-main.origin-value{padding:15px;高度：40px；h行八：40px；字体大小：20px；文本对齐：右；溢出：隐藏；文本溢出：省略号；空白：nowrap;}.cal-main.origin-type,.cal-main.target-type{padding-left:5px;宽度：70px；字体大小：14px；高度：30px；边框：1px实心#eee；背景色：#fff；垂直对齐：中间；右边距：10px；border-radius:3px;}.cal-keyboard{overflow:hidden;}.cal-items{overflow:hidden;}.cal-itemsli{user-select:none;向左飘浮;显示：内联块；宽度：75px；高度：75px；文本对齐：居中；行高：75px；border-top:1pxsolid#eee;左边框：1px实心#eee；box-sizing:border-box;}li:nth-of-type(4n+1){border-left:none;}li[data-action=operator]{background:#f5923e;颜色：#fff；}.buttons{浮动：左；宽度：75px;}.buttons.btn{宽度：75px;背景色：#fff；border-top:1pxsolid#eee;左边框：1px坚实的#eee;高度：150px；行高：150px；text-align:center;}.btn-esc{color:#ff5a34;}.btn-backspace{position:relative;}JavaScript文件varCalculator={init:function(){varthat=this;如果(!that.isInited){that.isInited=true;//保存操作信息//total:Number,合计结果//next:String,下一个操作有totalData//action:String,操作符号that.data={total:0,next:'',action:''};那.bindEvent();}},bindEvent:function(){varthat=this;//获取.cal-keyboard元素varkeyboardEl=document.querySelector(".cal-keyboard");keyboardEl&&keyboardEl.addEventListener('click',function(event){//获取当前点击的dom元素vartarget=event.target;//获取target的data-action值varaction=target.dataset.action;//获取目标内容varvalue=target.innerText;if(action==='num'||action==='operator'){that.result(value,action=='num');}});},result:function(action,isNum){varthat=this;vardata=that.data;如果(isNum){data.next=data.next==='0'?动作：（数据。下一个+动作）；!data.action&&(data.total=0);}elseif(action==='清空'){//设置清空时的响应状态data.total=0;数据.next="";数据.action="";}elseif(action==='='){if(data.next||data.action){data.total=that.calculate(data.total,data.next,data.action);数据.next='';数据.action='';}}elseif(!data.next){data.action=action;}elseif(data.action){data.total=that.calculate(data.total,data.next,data.action);数据.next='';data.action=动作；}else{data.total=+data.next||0;数据.next='';data.action=动作；}//获取.origin-value元素varvalEl=document.querySelector(".origin-value");//打印（数据）valEl&&(valEl.innerHTML=data.next||data.total||'0');}，计算：函数（n1，n2，运算符）{n1=+n1||0;n2=+n2||0;if(operator==='÷'){//得到除法的结果returnn2===0?0：数学。地板（（n1/n2）*100）/100；}elseif(operator==='x'){//得到乘法结果returnMath.floor((n1*n2)*100)/100;}elseif(operator==='+'){//得到加法的结果returnMath.floor((n1+n2)*100)/100;}elseif(operator==='-'){//得到减法的结果returnMath.floor((n1-n2)*100)/100;}}};计算器.init();分析主要分析本题JavaScript部分涉及的知识点委托。我们没有分别给number和symbol元素添加点击事件，而是给它们的父元素.cal-keyboard添加了点击事件，然后通过事件冒泡事件响应获取其父元素的绑定，使用事件委托有以下好处：减少内存消耗，可以方便地动态增删元素管理功能，减少对DOM节点的操作次数，提高性能事件委托步骤：绑定父元素响应事件和监听子元素冒泡事件获取目标元素触发事件。保留小数位。你的第一反应可能是使用toFixed()方法，但是这个方法会在小数点后加0不足，例如：constnum=0.8;num。toFixed(2)//0.80可见，这个不符合要求。还有一个问题需要注意：小数相加的结果可能不符合预期，例如：console.log(0.2+0.4)//0.6000000000000001这里推荐使用Math.floor()方法处理小数地方，先将结果乘以100，然后通过Math.floor()得到整数部分，再除以100得到需要的结果，例如：constnum1=0.5;constnum2=0.68751;Math.floor(num1*100)/100//0.5Math.floor(num2*100)/100//0.68~~本文结束~学习有趣的知识，认识有趣的朋友，塑造有趣的灵魂！大家好，我是〖编程三昧〗的作者王隐，我的公众号是《编程三昧》，欢迎关注，希望大家多多指教！你来，怀揣期待，我以墨香迎接你！您归来，不分得失，只送回味！知识与技能并重，内功与外功并重，理论与实践两手抓，两手都要用力！