这篇文章给大家分享的是有关HTML和JS如何实现计算器的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
下面是代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="untitled.css"> </head> <script type="text/javascript"> var result=""; function jisuan(num){ if(num=="="){ document.form1.text.value=eval(result); }else{ result=result+num; document.form1.text.value=result; } } </script> <body> <p class="box"> <form action="" class="form1" name="form1"> <p class="header"> <input type="text" id="text" name="text" class="text"/> </p> <p class="nav"> <table class="table"> <tr> <td> <input id="1" style="height:55px; width:55px;" type="button" value="1" onClick="jisuan(this.id)"/> </td> <td> <input id="2" style="height:55px; width:55px;" type="button" value="2" onClick="jisuan(this.id)"/> </td> <td> <input id="3" style="height:55px; width:55px;" type="button" value="3" onClick="jisuan(this.id)"/> </td> <td> <input id="+" style="height:55px; width:55px;" type="button" value="+" onClick="jisuan(this.id)"/> </td> </tr> <tr> <td> <input id="4" style="height:55px; width:55px;" type="button" value="4" onClick="jisuan(this.id)"/> </td> <td> <input id="5" style="height:55px; width:55px;" type="button" value="5" onClick="jisuan(this.id)"/> </td> <td> <input id="6" style="height:55px; width:55px;" type="button" value="6" onClick="jisuan(this.id)"/> </td> <td> <input id="-" style="height:55px; width:55px;" type="button" value="-" onClick="jisuan(this.id)"/> </td> </tr> <tr> <td> <input id="7" style="height:55px; width:55px;" type="button" value="7" onClick="jisuan(this.id)"/> </td> <td> <input id="8" style="height:55px; width:55px;" type="button" value="8" onClick="jisuan(this.id)"/> </td> <td> <input id="9" style="height:55px; width:55px;" type="button" value="9" onClick="jisuan(this.id)"/> </td> <td> <input id="*" style="height:55px; width:55px;" type="button" value="*" onClick="jisuan(this.id)"/> </td> </tr> <tr> <td> <input id="/" style="height:55px; width:55px;" type="button" value="/" onClick="jisuan(this.id)"/> </td> <td> <input id="0" style="height:55px; width:55px;" type="button" value="0" onClick="jisuan(this.id)"/> </td> <td> <input id="." style="height:55px; width:55px;" type="button" value="." onClick="jisuan(this.id)"/></td> <td> <input id="=" style="height:55px; width:55px;" type="button" value="=" onClick="jisuan(this.id)"/> </td> </tr> </table> </p> </form> </p> </body> </html>
感谢各位的阅读!关于HTML和JS如何实现计算器就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。