首页 > 代码库 > HTML实现简单计算器
HTML实现简单计算器
1 <!DOCTYPE html> 2 <html> 3 <meta name="content-type" content="text/html; charset=UTF-8"> 4 <head> 5 <title>Calculator</title> 6 7 <!--将按键内容以字符串形式存储在文字框中当按钮为“=”时，调用eval方法计算结果然后将结果输出文字框中--> 8 9 <script type="text/javascript"> 10 var numresult; 11 var str; 12 13 function onclicknum(nums) { 14 15 str = document.getElementById("nummessege"); 16 str.value = str.value + nums; 17 18 } 19 20 function onclickclear() { 21 22 str = document.getElementById("nummessege"); 23 str.value = ""; 24 25 } 26 27 function onclickresult() { 28 29 str = document.getElementById("nummessege"); 30 numresult = eval(str.value); 31 str.value = numresult; 32 33 } 34 </script> 35 36 </head> 37 38 <body bgcolor="affff" > 39 40 <!--定义按键表格,每个按键对应一个事件触发--> 41 42 <table border="1" align="center" bgColor="#bbff77" 43 style="height: 350px; width: 270px"> 44 <tr> 45 <td colspan="4"> 46 <input type="text" id="nummessege" 47 style="height: 90px; width: 350px; font-size: 50px" /> 48 </td> 49 </tr> 50 <tr> 51 <td> 52 <input type="button" value="1" id="1" onclick="onclicknum(1)" 53 style="height: 70px; width: 90px; font-size: 35px"> 54 </td> 55 56 <td> 57 <input type="button" value="2" id="2" onclick="onclicknum(2)" 58 style="height: 70px; width: 90px; font-size: 35px"> 59 </td> 60 61 <td> 62 <input type="button" value="3" id="3" onclick="onclicknum(3)" 63 style="height: 70px; width: 90px; font-size: 35px"> 64 </td> 65 66 <td> 67 <input type="button" value="+" id="add" onclick="onclicknum(‘+‘)" 68 style="height: 70px; width: 90px; font-size: 35px"> 69 </td> 70 </tr> 71 72 <tr> 73 <td> 74 <input type="button" value="4" id="4" onclick="onclicknum(4)" 75 style="height: 70px; width: 90px; font-size: 35px"> 76 </td> 77 78 <td> 79 <input type="button" value="5" id="5" onclick="onclicknum(5)" 80 style="height: 70px; width: 90px; font-size: 35px"> 81 </td> 82 83 <td> 84 <input type="button" value="6" id="6" onclick="onclicknum(6)" 85 style="height: 70px; width: 90px; font-size: 35px"> 86 </td> 87 88 <td> 89 <input type="button" value="-" id="sub" onclick="onclicknum(‘-‘)" 90 style="height: 70px; width: 90px; font-size: 35px"> 91 </td> 92 </tr> 93 94 <tr> 95 <td> 96 <input type="button" value="7" id="7" onclick="onclicknum(7)" 97 style="height: 70px; width: 90px; font-size: 35px"> 98 </td> 99 100 <td>101 <input type="button" value="8" id="8" onclick="onclicknum(8)"102 style="height: 70px; width: 90px; font-size: 35px">103 </td>104 105 <td>106 <input type="button" value="9" id="9" onclick="onclicknum(9)"107 style="height: 70px; width: 90px; font-size: 35px">108 </td>109 110 <td>111 <input type="button" value="*" id="mul" onclick="onclicknum(‘*‘)"112 style="height: 70px; width: 90px; font-size: 35px">113 </td>114 </tr>115 116 <tr>117 <td colspan="2">118 <input type="button" value="0" id="0" onclick="onclicknum(0)"119 style="height: 70px; width: 190px; font-size: 35px">120 </td>121 <td>122 <input type="button" value="." id="point" onclick="onclicknum(‘.‘)"123 style="height: 70px; width: 90px; font-size: 35px">124 </td>125 126 <td>127 <input type="button" value="/" id="division"128 onclick="onclicknum(‘/‘)"129 style="height: 70px; width: 90px; font-size: 35px">130 </td>131 </tr>132 133 <tr>134 135 <td colspan="2">136 <input type="button" value="Del" id="clear"137 onclick="onclickclear()"138 style="height: 70px; width: 190px; font-size: 35px" />139 </td>140 141 <td colspan="2">142 <input type="button" value="=" id="result"143 onclick="onclickresult()"144 style="height: 70px; width: 190px; font-size: 35px" />145 </td>146 147 148 </tr>149 150 151 </table>152 153 </body>154 </html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。