<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0 auto; padding: 0; } #waikuang{ width: 315px; height: 400px; background-color: lightblue; border: 1px solid black; } #inp_div{ width: 313px; height: 30px; border: 1px solid black; } #inp_div input{ width: 313px; height: 30px; border: none; } .tr{ width: 370px; height: 90px; } .num{ width: 70px; height: 80px; float: left; background-color: darkgray; margin-left: 7px; text-align: center; line-height: 80px; margin-top: 8px; border-radius: 5px; } .num:hover{ cursor: pointer; box-shadow: 0px 2px 2px lightcoral; } </style> </head> <body> <div id="waikuang"> <div id="inp_div"> <input type="text" name="" id="jsinput" value="" /> </div> <div class="tr"> <div class="num">7</div> <div class="num">8</div> <div class="num">9</div> <div class="num">/</div> </div> <div class="tr"> <div class="num">4</div> <div class="num">5</div> <div class="num">6</div> <div class="num">*</div> </div> <div class="tr"> <div class="num">1</div> <div class="num">2</div> <div class="num">3</div> <div class="num">-</div> </div> <div class="tr"> <div class="num">0</div> <div class="num">.</div> <div class="num">+</div> <div class="num">=</div> </div> </div> </body> </html> <script type="text/javascript"> var num = document.getElementsByClassName("num"); var one = 0; var two = 0; var fuhao = ""; var biao = 0; for(var i = 0;i<num.length;i++){ num[i].onclick = function(){ biao++; document.getElementById("jsinput").value=this.innerHTML; if(biao==1){ one = parseInt(this.innerHTML); } else if(biao==2){ fuhao = this.innerHTML; } else if(biao==3){ two = parseInt(this.innerHTML); } if(this.innerHTML=="="){ switch(fuhao){ case"+": document.getElementById("jsinput").value = one + two; break; case"-": document.getElementById("jsinput").value = one - two; break; case"*": document.getElementById("jsinput").value = one * two; break; case"/": document.getElementById("jsinput").value = one / two; break; } } } } </script>