<!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>
