<!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. AngularJs 通过 ocLazyLoad 实现动态（懒）加载模块和依赖

    好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本. 实现的过程主要是引用3个主要的JS文件 <script src="angula ...

  2. 基于ZooKeeper的分布式锁和队列

    在分布式系统中,往往需要一些分布式同步原语来做一些协同工作,上一篇文章介绍了Zookeeper的基本原理,本文介绍下基于Zookeeper的Lock和Queue的实现,主要代码都来自Zookeeper ...

  3. [PHP]加密解密函数

    非常给力的authcode加密函数,Discuz!经典代码(带详解) function authcode($string, $operation = 'DECODE', $key = '', $exp ...

  4. [译]：Xamarin.Android开发入门——Hello,Android Multiscreen快速上手

    原文链接:Hello, Android Multiscreen Quickstart. 译文链接:Hello,Android Multiscreen快速上手 本部分介绍利用Xamarin.Androi ...

  5. nodejs+mysql 断线重连

    var mysql = require('mysql'); var conn; function handleError () { conn = mysql.createConnection({ ho ...

  6. 进击的Python【第四章】：Python的高级应用（一）

    Python的高级应用(一) 本章内容: 内置函数 生成器 迭代器 装饰器 JSON和PICKLE的简单用法 软件目录结构规范 一.内置函数 1.数学运算类 abs(x) 求绝对值1.参数可以是整型, ...

  7. python 爬虫（四）

    爬遍整个网络 1 当我们访问整个网络的时候,我们不可避免的会访问不同的网站,但是不同的网站会有完全不同的结构和内容... 现在一步一步的构建访问整个网络的脚本 I 从一个网站开始,每一次都爬向不同的网 ...

  8. jquery插件开发

    jQuery是一个封装的很好的类,比如我们用语句$("#btn1") 会生成一个 jQuery类的实例. 一.jQuery插件开发注意要点 1.使用闭包,避免全局依赖,避免第三方破 ...

  9. openswan-ipsec.conf配置说明

    Name ipsec.conf - IPsec configuration and connections Description The optional ipsec.conf file speci ...

  10. Idea中包内中的置文件如何发布到编译后的目录中去

    1.问题引入: 运行一个maven+springmvc+hibernate的项目的时候出现了下边的错误: Caused by: java.io.FileNotFoundException: class ...