• 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;  270px">
     44             <tr>
     45                 <td colspan="4">
     46                     <input type="text" id="nummessege"
     47                         style="height: 90px;  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;  90px; font-size: 35px">
     54                 </td>
     55 
     56                 <td>
     57                     <input type="button" value="2" id="2" onclick="onclicknum(2)"
     58                         style="height: 70px;  90px; font-size: 35px">
     59                 </td>
     60 
     61                 <td>
     62                     <input type="button" value="3" id="3" onclick="onclicknum(3)"
     63                         style="height: 70px;  90px; font-size: 35px">
     64                 </td>
     65 
     66                 <td>
     67                     <input type="button" value="+" id="add" onclick="onclicknum('+')"
     68                         style="height: 70px;  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;  90px; font-size: 35px">
     76                 </td>
     77 
     78                 <td>
     79                     <input type="button" value="5" id="5" onclick="onclicknum(5)"
     80                         style="height: 70px;  90px; font-size: 35px">
     81                 </td>
     82 
     83                 <td>
     84                     <input type="button" value="6" id="6" onclick="onclicknum(6)"
     85                         style="height: 70px;  90px; font-size: 35px">
     86                 </td>
     87 
     88                 <td>
     89                     <input type="button" value="-" id="sub" onclick="onclicknum('-')"
     90                         style="height: 70px;  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;  90px; font-size: 35px">
     98                 </td>
     99 
    100                 <td>
    101                     <input type="button" value="8" id="8" onclick="onclicknum(8)"
    102                         style="height: 70px;  90px; font-size: 35px">
    103                 </td>
    104 
    105                 <td>
    106                     <input type="button" value="9" id="9" onclick="onclicknum(9)"
    107                         style="height: 70px;  90px; font-size: 35px">
    108                 </td>
    109 
    110                 <td>
    111                     <input type="button" value="*" id="mul" onclick="onclicknum('*')"
    112                         style="height: 70px;  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;  190px; font-size: 35px">
    120                 </td>
    121                 <td>
    122                     <input type="button" value="." id="point" onclick="onclicknum('.')"
    123                         style="height: 70px;  90px; font-size: 35px">
    124                 </td>
    125 
    126                 <td>
    127                     <input type="button" value="/" id="division"
    128                         onclick="onclicknum('/')"
    129                         style="height: 70px;  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;  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;  190px; font-size: 35px" />
    145                 </td>
    146 
    147 
    148             </tr>
    149 
    150 
    151         </table>
    152 
    153     </body>
    154 </html>

  • 相关阅读:
    DGbroker三种保护模式的切换
    oracle11G使用DGbroker创建dg
    oracle数据泵示例
    oracle DB_LINK
    oracle数据库rman备份计划及恢复
    oracle查看对象信息
    mybatis学习:mybatis的注解开发和编写dao实现类的方式入门
    mybatis学习:mybatis的环境搭建与入门
    mybatis框架学习:
    入门servlet:request请求转发和共享数据
  • 原文地址:https://www.cnblogs.com/lifescolor/p/3874130.html
Copyright © 2020-2023  润新知