<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <style type="text/css"> *{ margin: 0; padding: 0; } #main{ width: 500px; height: 650px; background-color: pink; margin: 50px auto; position: relative; } #text{ position: absolute; width: 500px; height: 200px; background-color: #ececec; border: 0px; } #main2{ position: absolute; top: 200px; width: 500px; height: 450px; background-color: paleturquoise; } #main2 input{ width:154px; padding: 0px; margin: 0px; height:110.5px ; border: 1px solid blue; margin-left: 7px; color: #FFFFFF; margin-top: 2px; font-size: 28px; } #text{ font-size: 48px; } </style> <title>Document</title> </head> <body> <div id="main"> <input type="text" id="text" value="" /> <div id="main2"> <input type="button" value="1" id="1" onclick="addClick(this.value)"/> <input type="button" value="2" id="2" onclick="addClick(this.value)"/> <input type="button" value="3" id="3" onclick="addClick(this.value)"/> <input type="button" value="4" id="4" onclick="addClick(this.value)"/> <input type="button" value="5" id="5" onclick="addClick(this.value)"/> <input type="button" value="6" id="6" onclick="addClick(this.value)"/> <input type="button" value="7" id="7" onclick="addClick(this.value)"/> <input type="button" value="8" id="8" onclick="addClick(this.value)"/> <input type="button" value="9" id="9" onclick="addClick(this.value)"/> <input type="button" value="0" id="0" onclick="addClick(this.value)"/> <input type="button" value="*" id="adds" onclick="addClick(this.value)" /> <input type="button" value="=" id="sum" onclick="addClick(this.value)" /> </div> </div> <script> function addClick(value){ var text=document.getElementById('text'); text.value+=value; } var sum=document.getElementById('sum') sum.onclick=function(){ var text=document.getElementById('text'); var sun=eval(text.value) text.value=sun } </script> </body> </html>