效果如图
源码，通俗易懂
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>#bg{width: 246px;height: 400px;background: black;}#screen{position: relative;top: 10px;width: 95%;height: 70px;color: white;font-size: 50px;text-align: right;margin-left: 5px;/*background: wheat;*/}.btn,.btn_grey,.btn_orange{width: 50px;height: 50px;margin: 3px;border-radius: 25px;text-align: center;line-height: 45px;color: white;font-size: 16px;cursor: pointer;}.btn_grey{background: #7C7C7C;color: black;}.btn_orange{background: #FC8E39;}.btn{background: #2C2C2C;}#zero{width: 110px;}</style></head><body><div id="bg"><div id="screen"></div><table id="keyboard"><tr><td><div class="btn_grey" onclick="del()">del</div></td><td><div class="btn_grey" onclick="cfun()">C</div></td><td><div class="btn_grey" onclick="func('%')">%</div></td><td><div class="btn_orange" onclick="func('/')">/</div></td></tr><tr><td><div class="btn" onclick="func('7')">7</div></td><td><div class="btn" onclick="func('8')">8</div></td><td><div class="btn" onclick="func('9')">9</div></td><td><div class="btn_orange" onclick="func('*')">*</div></td></tr><tr><td><div class="btn" onclick="func('4')">4</div></td><td><div class="btn" onclick="func('5')">5</div></td><td><div class="btn" onclick="func('6')">6</div></td><<td><div class="btn_orange" onclick="func('-')">-</div></td></tr><tr><td><div class="btn" onclick="func('1')">1</div></td><td><div class="btn" onclick="func('2')">2</div></td><td><div class="btn" onclick="func('3')">3</div></td><td><div class="btn_orange" onclick="func('+')">+</div></td></tr><tr><td colspan="2"><div class="btn" id="zero" onclick="func('0')">0</div></td><td><div class="btn" onclick="func('.')">.</div></td><td><div class="btn_orange" onclick="result()">=</div></td></tr></table></div><script>var scr=document.getElementById("screen");function del(){scr.innerHTML="";}function cfun(){var str=scr.innerHTML;scr.innerHTML=str.slice(0,str.length-1);}function func(num){var str=scr.innerHTML;scr.innerHTML=str+num;}function result(){var str=scr.innerHTML;scr.innerHTML=str==""?"":eval(str);}</script></body></html>
其中οnclick="func(‘7’)"可以改为func(this);
this指的是当前对象（div）,其中的数字就是this.innerHTML;
那么函数改为
function func(o){result.innerHTML+=o.innerHTML;}
