<!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. 在ubuntu下安装google chrome

    由于手上有两台电脑,再加上我那个选择困难症加上纠结劲.所以果断把其中一台电脑只装linux系统,另一台电脑只装windows了.免得我老纠结!于是linux便选择了ubuntu. 由于浏览器一直用的是 ...

  2. Laravel中的日志与上传

    PHP中的框架众多,我自己就接触了好几个.大学那会啥也不懂啥也不会,拿了一个ThinkPHP学了.也许有好多人吐槽TP,但是个人感觉不能说哪个框架好,哪个框架不好,再不好的框架你能把源码读上一遍,框架 ...

  3. AVL Insight 开源情报工具：一站式情报管理服务

    一.概要 AVL Insight 开源情报工具是安天移动安全推出的一款情报收集工具,它是配合AVL Insight移动威胁情报平台的Chrome浏览器扩展程序,用户可以使用该工具,对网站中的公开信息进 ...

  4. 重写AgileEAS.NET SOA 中间件平台账号密码的加密算法

    一.平台简介 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适 ...

  5. 【leetcode】Number of 1 Bits

    题目描述: Write a function that takes an unsigned integer and returns the number of '1' bits it has (als ...

  6. Andriod学习笔记4：mac下搭建 Eclipse+CDT 集成开发环境

    下载CDT 从eclipse官网下载最新的Eclipse IDE for C/C++ Developers,例如eclipse-cpp-mars-1-macosx-cocoa-x86_64.tar.g ...

  7. Java集合框架练习-计算表达式的值

    最近在看<算法>这本书,正好看到一个计算表达式的问题,于是就打算写一下,也正好熟悉一下Java集合框架的使用,大致测试了一下,没啥问题. import java.util.*; /* * ...

  8. google开发者工具调试技巧

    http://blog.sina.com.cn/s/blog_60a4fcef0102v3vt.html

  9. pwnable.kr的passcode

    前段时间找到一个练习pwn的网站,pwnable.kr 这里记录其中的passcode的做题过程,给自己加深印象. 废话不多说了,看一下题目, 看到题目,就ssh连接进去,就看到三个文件如下 看了一下 ...

  10. JavaScript(四) Window窗体操作

    window: 属性(值或者子对象):opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null,可以利用这个属性来关闭源窗口. 方法(函数):事件(事先设置好的 ...