<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器的实现</title> <style> .calculator{ width: 500px; min-height:500px; } .resulte,.content{ width:100%; } .content { display: flex; margin-top: 20px; } .content .left,.content .right{ flex:1; } .content .left{ border: 1px solid red; } .content .right{ border:1px solid blue; } button,.num-input{ width: 50px; height: 50px; font-size: 18px; } </style> </head> <body> <div class="calculator"> <div class="resulte"> <input type="text" id="process"> <input type="text" placeholder="计算结果" id="result"/> </div> <div class="content"> <div class="left"> <input class="num-input" type="button" onclick="cal(this)"/> <input class="num-input" type="button" onclick="cal(this)"/> <input class="num-input" type="button" onclick="cal(this)"/> <input class="num-input" type="button" onclick="cal(this)"/> <input class="num-input" type="button" onclick="cal(this)"/> <input class="num-input" type="button" onclick="cal(this)"/> <input class="num-input" type="button" onclick="cal(this)"/> <input class="num-input" type="button" onclick="cal(this)"/> <input class="num-input" type="button" onclick="cal(this)"/> </div> <div class="right"> <button onclick="operate(this)" >+</button> <button onclick="operate(this)">-</button> <button onclick="operate(this)">*</button> <button onclick="operate(this)">/</button> <button onclick="operateResult(this)">=</button> <button onclick="del(this)">del</button> </div> </div> </div> <script> window.onload=function(){ // 产生0-9的随机数 num.splice 返回新数组，原数组本身也发生变化 //为什么一定要*数组的长度 var num = [0,1,2,3,4,5,6,7,8,9]; var random_array=[]; while(num.length>0){ var random_num =''; random_num = num.splice(parseInt(Math.random()*num.length),1)[0]; random_array.push(random_num); } var num_dom = document.getElementsByClassName("num-input"); for(var i=0;i<num_dom.length;i++ ){ num_dom[i].value = random_array[i]; } document.getElementById("process").focus(); } // function cal(e){ var process_dom = document.getElementById("process"); process_dom.value+=e.value; } function operate(e){ var process_dom = document.getElementById("process"); process_dom.value+=e.innerHTML; } function operateResult(e){ var res = document.getElementById("result"); var process_dom = document.getElementById("process") res.value=eval(process_dom.value); } // document.getElementById("add").onclick=function(){ // alert(this.innerHTML) // } function del(e){ var process_dom = document.getElementById("process"); process_dom.value = process_dom.value.substring(0,process_dom.value.length-1); document.getElementById("process").focus(); } </script> </body> </html>