<!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. Fedora 安装gcc gcc-c++

    Fedora本身没有自带gcc 和 g++编译器,所以需要我们自己去安装,步骤如下: 1.切换到root用户(或者跳过这个步骤,直接在下面命令前面加上 sudo) su root 2.安装gcc yu ...

  2. 浅谈redis和memcached的区别

    缓存技术方面说到redis大家必然会联想到memcached,了解它们的人应该都知道以下几点吧 redis与 memcached相比,redis支持key-value数据类型,同事支持list.set ...

  3. sqlmap 帮助信息

    Usage: sqlmap.py [options] 选项: -h, --help 显示基本的帮助信息并退出 -hh 显示高级的帮助信息并退出 --version 显示程序版本号并退出 -v VERB ...

  4. apt28组织新的flash漏洞利用包dealerschoice分析

    17号paloalto发布了文章dealerschoice-sofacys-flash-player-exploit-platform,文中提到apt28正在编写adobe flash player的 ...

  5. c#.net网页跳转七种方法

    一.目前在ASP.NET中页面传值共有这么几种方式: .Response.Redirect("http://www.hao123.com",false); 目标页面和原页面可以在2 ...

  6. 用Fiddler的自动响应模拟系统集成

    1. 下载最新版本的Fiddler Fiddler 官网 2, 安装并启动Fiddler 3, 勾选自动响应 见上图 4, 添加自动响应规则 见上图 5, 添加自动响应内容文件 添加响应文件到Fidd ...

  7. 写给Git初学者的7个建议

    [原文] - http://blog.jobbole.com/50603/ 当我刚刚开始使用Git的版本控制时,我根本不确定我付出那么多时间是不是会得到回报.Branch.Stage.Stash,这些 ...

  8. 树链剖分+线段树 HDOJ 4897 Little Devil I（小恶魔）

    题目链接 题意: 给定一棵树,每条边有黑白两种颜色,初始都是白色,现在有三种操作: 1 u v:u到v路径(最短)上的边都取成相反的颜色 2 u v:u到v路径上相邻的边都取成相反的颜色(相邻即仅有一 ...

  9. 《转》Unity3D研究院之UGUI一个优化效率小技巧

    无意间发现了一个小技巧.如下图所示,可以发现UGUI的Image组件的RaycastTarget勾选以后会消耗一些效率,为了节省效率就不要勾选它了,不仅Image组件Text组件也有这样的问题. 一般 ...

  10. asp.net两种方式的短信接口使用（提供接口的都是收费的）

    一种是http请求的方式,另一种就是提供WebService接口供调用的. //服务商 sms.webchinese.cn //sms_url="http://sms.webchinese. ...