<!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. js原声快速实现选项卡

    var Rea = document.getElementById("rep"); var ReaAll = Rea.querySelectorAll("li" ...

  2. H5+ 移动app学习之二 Native.js

    Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术.如果说Node.js把js扩展到服务器世界,那么Native.js则把js扩展到手机 ...

  3. 使用Fiddler关于“由于目标计算机积极拒绝，无法连接。”的解决方案

    今天使用Fiddler的时候遇到下面这个问题:在地址栏想打开个一般处理程序,出现连接本机失败的提示,如下图: 而这在我没打开Fiddler的时候是显示正常的. 查看Fiddler,在嗅探 -> ...

  4. Eclipse代码注释模板

    <?xml version="1.0" encoding="UTF-8"?><templates><template autoin ...

  5. 一次mongodb 统计需求

    需求: 临下班运营的同事发来了一个需求,要统计数据库里某个collection的所有document 中某个字段(_id)出现的次数._id 字段的范围是0-4000. 假设collection 是这 ...

  6. TFS Express backup and restore

    When we setup source control server, we should always make a backup and restore plan for it. This ar ...

  7. mysql 表被锁时，需要执行的命令

    1. 错误代码:1100 Table 't_depart_info' was not locked with LOCK TABLES的解决方法 unlock tables;

  8. WebRTC音频预处理单元APM的整体编译及使用

    正文 行的gnu静态库链接路径是针对NDK版本 r8d 的,如读者版本不匹配,请自行找到 libgnustl_static.a 静态库的路径进行替换. 3)本示例并不打算编译 WebRTC 的测试工程 ...

  9. 使用极光/友盟推送，APP进程杀死后为什么收不到推送（转）

    为什么会存在这样的 问题,刚开始的时候我也搞不清楚,之前用极光的时候杀死程序后也会收到推送,但最近重新再去集成时就完全不好使了,这我就纳闷了,虽然Google在高版本上的android上面不建议线程守 ...

  10. Windows安装程序 报错 “已安装了较新版本” 导致无法安装程序的解决方法

    打开注册表 HKEY_CURRENT_USER\Software\Microsoft\Installer\Products ,“查找”程序名称 如果有程序名和安装程序相同的 ,删除整个 项 ! 然后就 ...