html+js实现简单的计算器代码(加减乘除)
更新时间:2016年07月12日 10:31:49 投稿:jingxian
下面小编就为大家带来一篇html+js实现简单的计算器代码(加减乘除)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
html+js实现简单的计算器代码(加减乘除)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <!DOCTYPE html> <html> <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title></title> </head> <body> <table> <tr> <td><input type= "button" value= "add" onclick= "setOp('+', 'add');" /></td> <td><input type= "button" value= "miner" onclick= "setOp('-', 'miner');" /></td> <td><input type= "button" value= "times" onclick= "setOp('*', 'times');" /></td> <td><input type= "button" value= "divide" onclick= "setOp('/', 'divide');" /></td> </tr> </table> <table id= "tb_calc" style= "display:none;" > <tr> <td> <input id= "x" type= "text" style= "width:100px" value= "" name= "x" /></td> <td> <lable id= "op" name= "op" ></lable> </td> <td> <input id= "y" type= "text" style= "width:100px" value= "" name= "y" /> </td> <td> <input id= "opTips" type= "button" value= "" onclick= "calc();" /> </td> <td> <lable id= "z" name= "z" ></lable> </td> </tr> </table> <script type= "application/javascript" > function setOp(op, opTips) { var tb=document.getElementById( "tb_calc" ); tb.style.display = "none" ; document.getElementById( "x" ).value = "" ; document.getElementById( "y" ).value = "" ; document.getElementById( "z" ).innerText = "" ; document.getElementById( "op" ).innerText = op; document.getElementById( "opTips" ).value = opTips; tb.style.display = "block" ; } function calc() { var x = parseInt(document.getElementById( "x" ).value); var y = parseInt(document.getElementById( "y" ).value); var op = document.getElementById( "op" ).innerText; var z = "" ; switch (op) { case '+' : z = x + y; break ; case '-' : z = x - y; break ; case '*' : ; z = x * y; break ; case '/' : ; z = x / y; break ; default : z = '' ; } console.log(x, op, y, '=' , z); document.getElementById( "z" ).innerText = z; } </script> </body> </html> |
截图如下:
以上这篇html+js实现简单的计算器代码(加减乘除)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
相关文章
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识。2011-03-03bootstrap-table formatter 使用vue组件的方法
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。这篇文章重点给大家介绍bootstrap-table formatter 使用vue组件的方法,感兴趣的朋友一起看看2019-05-05
最新评论