<!DOCTYPE html>

 <html>

     <meta name="content-type" content="text/html; charset=UTF-8">

     <head>

         <title>Calculator</title>

         <!--将按键内容以字符串形式存储在文字框中当按钮为“=”时，调用eval方法计算结果然后将结果输出文字框中-->

 <script type="text/javascript">

     var numresult;

     var str;

     function onclicknum(nums) {

         str = document.getElementById("nummessege");

         str.value = str.value + nums;

     }

     function onclickclear() {

         str = document.getElementById("nummessege");

         str.value = "";

     }

     function onclickresult() {

         str = document.getElementById("nummessege");

         numresult = eval(str.value);

         str.value = numresult;

     }

 </script>

     </head>

     <body bgcolor="affff" >

     <!--定义按键表格,每个按键对应一个事件触发-->

         <table border="1" align="center" bgColor="#bbff77"

             style="height: 350px; width: 270px">

             <tr>

                 <td colspan="4">

                     <input type="text" id="nummessege"

                         style="height: 90px; width: 350px; font-size: 50px" />

                 </td>

             </tr>

             <tr>

                 <td>

                     <input type="button" value="1" id="1" onclick="onclicknum(1)"

                         style="height: 70px; width: 90px; font-size: 35px">

                 </td>

                 <td>

                     <input type="button" value="2" id="2" onclick="onclicknum(2)"

                         style="height: 70px; width: 90px; font-size: 35px">

                 </td>

                 <td>

                     <input type="button" value="3" id="3" onclick="onclicknum(3)"

                         style="height: 70px; width: 90px; font-size: 35px">

                 </td>

                 <td>

                     <input type="button" value="+" id="add" onclick="onclicknum('+')"

                         style="height: 70px; width: 90px; font-size: 35px">

                 </td>

             </tr>

             <tr>

                 <td>

                     <input type="button" value="4" id="4" onclick="onclicknum(4)"

                         style="height: 70px; width: 90px; font-size: 35px">

                 </td>

                 <td>

                     <input type="button" value="5" id="5" onclick="onclicknum(5)"

                         style="height: 70px; width: 90px; font-size: 35px">

                 </td>

                 <td>

                     <input type="button" value="6" id="6" onclick="onclicknum(6)"

                         style="height: 70px; width: 90px; font-size: 35px">

                 </td>

                 <td>

                     <input type="button" value="-" id="sub" onclick="onclicknum('-')"

                         style="height: 70px; width: 90px; font-size: 35px">

                 </td>

             </tr>

             <tr>

                 <td>

                     <input type="button" value="7" id="7" onclick="onclicknum(7)"

                         style="height: 70px; width: 90px; font-size: 35px">

                 </td>

                 <td>

                     <input type="button" value="8" id="8" onclick="onclicknum(8)"

                         style="height: 70px; width: 90px; font-size: 35px">

                 </td>

                 <td>

                     <input type="button" value="9" id="9" onclick="onclicknum(9)"

                         style="height: 70px; width: 90px; font-size: 35px">

                 </td>

                 <td>

                     <input type="button" value="*" id="mul" onclick="onclicknum('*')"

                         style="height: 70px; width: 90px; font-size: 35px">

                 </td>

             </tr>

             <tr>

                 <td colspan="2">

                     <input type="button" value="0" id="0" onclick="onclicknum(0)"

                         style="height: 70px; width: 190px; font-size: 35px">

                 </td>

                 <td>

                     <input type="button" value="." id="point" onclick="onclicknum('.')"

                         style="height: 70px; width: 90px; font-size: 35px">

                 </td>

                 <td>

                     <input type="button" value="/" id="division"

                         onclick="onclicknum('/')"

                         style="height: 70px; width: 90px; font-size: 35px">

                 </td>

             </tr>

             <tr>

                 <td colspan="2">

                     <input type="button" value="Del" id="clear"

                         onclick="onclickclear()"

                         style="height: 70px; width: 190px; font-size: 35px" />

                 </td>

                 <td colspan="2">

                     <input type="button" value="=" id="result"

                         onclick="onclickresult()"

                         style="height: 70px; width: 190px; font-size: 35px" />

                 </td>

             </tr>

         </table>

     </body>

 </html>

HTML实现简单计算器的更多相关文章

  1. 1.C#WinForm基础制作简单计算器

    利用c#语言编写简单计算器: 核心知识点: MessageBox.Show(Convert.ToString(comboBox1.SelectedIndex));//下拉序号 MessageBox.S ...

  2. 菜鸟学Android编程——简单计算器《一》

    菜鸟瞎搞,高手莫进 本人菜鸟一枚,最近在学Android编程,网上看了一些视频教程,于是想着平时手机上的计算器应该很简单,自己何不尝试着做一个呢? 于是就冒冒失失的开撸了. 简单计算器嘛,功能当然很少 ...

  3. PAT 06-1 简单计算器

    想看一般简单计算器实现的看客不好意思了,这不是你想要点东西,此处题设为“只能进行加减乘除”.“都是整数”.”优先级相同“和"从左到右".此题来自PAT(http://www.pat ...

  4. php大力力 [005节] php大力力简单计算器001

    2015-08-22 php大力力005. php大力力简单计算器001: 上网看视频,看了半天,敲击代码,如下: <html> <head> <title>简单计 ...

  5. PHP实现简单计算器

    <!--简单的计算器--> <!DOCTYPE html> <html> <head> <title>PHP实现简单计算器</titl ...

  6. c#部分---网吧充值系统；简易的闹钟；出租车计费；简单计算器；对战游戏；等额本金法计算贷款还款利息等；随机生成10个不重复的50以内的整数；推箱子；

    网吧充值系统namespace ConsoleApplication1 { class Program { struct huiyuan { public string name; public st ...

  7. JavaWeb学习记录（二十）——Model1模式（javaBean+jsp）实现简单计算器案例

    ¨JSP技术提供了三个关于JavaBean组件的动作元素,即JSP标签,它们分别为: ¨<jsp:useBean>标签:用于在JSP页面中查找或实例化一个JavaBean组件. ¨< ...

  8. 一个用WPF做的简单计算器源代码

    一.界面设计XAML代码 <Window x:Class="fengjisuanqi.MainWindow" xmlns="http://schemas.micro ...

  9. hdu 1237 简单计算器

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1237 简单计算器 Description 读入一个只包含 +, -, *, / 的非负整数计算表达式, ...

  10. 李洪强漫谈iOS开发[C语言-042]-简单计算器

    李洪强漫谈iOS开发[C语言-042]-简单计算器

随机推荐

  1. Servlet引擎Jetty之入门1

    Jetty与tomcat一样,HttpWeb容器,支持实现Servlet规范. 详细介绍参考:https://www.ibm.com/developerworks/cn/java/j-lo-jetty ...

  2. 【笔记】mysql两条数据的某个属性值互换

    update groupuser as g1 join groupuser as g2 on (g1.user_id=1 and g2.user_id = 2) or(g1.user_id = 2 a ...

  3. Riemann映射定理

    单复变函数几何理论最高的成就我想应该属于Riemann映射定理吧! Riemann映射定理:$\mathbb C$中任意边界多余一个点的单连通域$D$都与单位圆盘$B(0,1)$等价,即存在着$D$上 ...

  4. linux环境中使用转义字符使命令行字符颜色高亮

    而通过转义序列设置终端显示属性的格式为: \033[Param {;Param;...}m 其中转义序列以 \033[ 为开头,m 为设置属性结束,中间部分的 Param 为属性值,{} 表示可以设置 ...

  5. Aspx页面模拟WebService功能

    在后台引入 using System.Web.Services 命名空间 然后在编写web服务方法: [WebMethod] public static string GetData(string t ...

  6. 学习微信小程序之css9内边距

    padding内边距 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  7. BZOJ1565 [NOI2009]植物大战僵尸（拓扑排序 + 最大权闭合子图）

    题目 Source http://www.lydsy.com/JudgeOnline/problem.php?id=1565 Description Input Output 仅包含一个整数,表示可以 ...

  8. 深入理解定时器系列——被誉为神器的requestAnimationFrame

    与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔.这有什么好处呢?为什么requestAnimationFrame被称为神器呢?本文将详 ...

  9. pair的使用

    #include<iostream> #include<cmath> #include<cstdio> #include<algorithm> #inc ...

  10. [VijosP1656]萌萌赶考 题解

    题目大意: 有一个地图,有障碍,不能重复经过一点(但起点可以),判断能否恰好在t时刻从起点到达终点. 思路: 一开始DFS一遍,30分,于是要有优化减枝.最重要的是从起点到终点的距离的奇偶性是与起点与 ...