简单快速的实现js计算器功能

在js的全局方法中有一个eval()方法,由于平时不怎么用,所以到关键时候就没想起来它

想写一个简易的计算器,本来以为要不了多久就能写出来的,谁知道愣是花费了我近两个小时的时间来写,但结果还是不能令我满意。想找一个更好的方法来写,不想写的那么麻烦,用什么方法呢?想了一个遍,后来猛然看到屏幕上有一个eval(),当时我的电脑正打开着网页。福星来了,对啊,我浪费了这么长时间写出来的东西还不能令我满意,一个eval()不就搞定了么,下面就给大家看一下我写的代码,写的很粗糙,还请大家多多指正。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 400px; height: 450px; margin: 0 auto; background: pink; } .show{ width:100%; height: 100px; line-height: 100px; text-align: right; background: #FFFFFF; border:1px solid #000; } .operate{ width: 100%; height: 250px; margin-top: 50px; } p{ margin-top: 20px; text-align: center; } input{ width: 80px; height: 40px; /*margin-left: 50px;*/ text-align: center; } input:nth-child(5n),input:first-child{ margin-left: 0; } </style> </head> <body> <div> <div></div> <div> <p> <input type="button" value="1"/> <input type="button" value="2"/> <input type="button" value="3"/> <input type="button" value="+"/> </p> <p> <input type="button" value="4"/> <input type="button" value="5"/> <input type="button" value="6"/> <input type="button" value="-"/> </p> <p> <input type="button" value="7"/> <input type="button" value="8"/> <input type="button" value="9"/> <input type="button" value="x"/> </p> <p> <input type="button" value="https://www.jb51.net/"/> <input type="button" value="0"/> <input type="button" value="="/> <input type="button" value="%"/> </p> </div> </div> </body> <script type="text/javascript"> function num(figure){ // var figure = figure.toString(); var show = document.getElementById("show"); showNum = show.innerHTML+figure; show.innerHTML = showNum; } function equal(){ document.getElementById("show").innerHTML = eval(document.getElementById("show").innerHTML); /*var lal = document.getElementById("show").innerHTML; alert(lal);*/ } </script> </html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wydgyw.html