<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="jisuanqi.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <title>简单计算器</title> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <style type="text/css">         body         {             font-size: 12px;             font-family: Arial, Georgia, "Times New Roman" , Times, serif;             color: #555;             text-align: center;             background-color: #e2e2e2;         }         h6         {             margin: 0;             font-size: 12px;         }         #calculator         {             width: 240px;             height: auto;             overflow: hidden;             margin: 10px auto;             border: #fff 1px solid;             padding-bottom: 10px;             background-color: #f2f2f2;         }         #calculator div         {             clear: both;         }         #calculator ul         {             padding: 0;             margin: 5px 14px;             border: #fff 1px solid;             height: auto;             overflow: hidden;         }         #calculator li         {             list-style: none;             float: left;             width: 32px;             height: 32px;             margin: 5px;             display: inline;             line-height: 32px;             font-size: 14px;             background-color: #eaeaea;         }         #calculator li.tool         {             background-color: #e2e2e2;         }         #calculator li:hover         {             background-color: #f9f9f9;             cursor: pointer;         }         #calculator li:active         {             background-color: #fc0;             cursor: pointer;         }         #calculator li.tool:active         {             background-color: #d8e8ff;             cursor: pointer;         }         #calcu-head         {             text-align: left;             padding: 10px 15px 5px;         }         span.imyeah         {             float: right;             color: #ccc;         }         span.imyeah a         {             color: #ccc;         }         .screen         {             width: 200px;             height: 24px;             line-height: 24px;             padding: 4px;             border: #e6e6e6 1px solid;             border-bottom: #f2f2f2 1px solid;             border-right: #f2f2f2 1px solid;             margin: 10px auto;             direction: ltr;             text-align: right;             font-size: 16px;             color: #999;         }         #calcu-foot         {             text-align: left;             padding: 10px 15px 5px;             height: auto;             overflow: hidden;         }         span#note         {             float: left;             width: 210px;             height: auto;             overflow: hidden;             color: red;         }         span.welcome         {             clear: both;             color: #999;         }         span.welcome a         {             float: right;             color: #999;         }     </style>     <script type="text/javascript">         var num = 0, result = 0, numshow = "0";         var operate = 0; //判断输入状态的标志         var calcul = 0; //判断计算状态的标志         var quit = 0; //防止重复按键的标志         function command(num) {             var str = String(document.calculator.numScreen.value); //获得当前显示数据             str = (str != "0") ? ((operate == 0) ? str : "") : ""; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;             str = str + String(num); //给当前值追加字符             document.calculator.numScreen.value = str; //刷新显示             operate = 0; //重置输入状态             quit = 0; //重置防止重复按键的标志         }         function dzero() {             var str = String(document.calculator.numScreen.value);             str = (str != "0") ? ((operate == 0) ? str + "00" : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当str+"00"，否则返回"0";             document.calculator.numScreen.value = str;             operate = 0;         }         function dot() {             var str = String(document.calculator.numScreen.value);             str = (str != "0") ? ((operate == 0) ? str : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0";             for (i = 0; i <= str.length; i++) { //判断是否已经有一个点号                 if (str.substr(i, 1) == ".") return false; //如果有则不再插入             }             str = str + ".";             document.calculator.numScreen.value = str;             operate = 0;         }         function del() { //退格             var str = String(document.calculator.numScreen.value);             str = (str != "0") ? str : "";             str = str.substr(0, str.length - 1);             str = (str != "") ? str : "0";             document.calculator.numScreen.value = str;         }         function clearscreen() { //清除数据             num = 0;             result = 0;             numshow = "0";             document.calculator.numScreen.value = "0";         }         function plus() { //加法             calculate(); //调用计算函数             operate = 1; //更改输入状态             calcul = 1; //更改计算状态为加         }         function minus() { //减法             calculate();             operate = 1;             calcul = 2;         }         function times() { //乘法             calculate();             operate = 1;             calcul = 3;         }         function divide() { //除法             calculate();             operate = 1;             calcul = 4;         }         function persent() { //求余             calculate();             operate = 1;             calcul = 5;         }         function equal() {             calculate(); //等于             operate = 1;             num = 0;             result = 0;             numshow = "0";         }         //         function calculate() {             numshow = Number(document.calculator.numScreen.value);             if (num != 0 && quit != 1) { //判断前一个运算数是否为零以及防重复按键的状态                 switch (calcul) { //判断要输入状态                     case 1: result = num + numshow; break; //计算"+"                     case 2: result = num - numshow; break; //计算"-"                     case 3: result = num * numshow; break;                     case 4: if (numshow != 0) { result = num / numshow; } else { document.getElementById("note").innerHTML = "被除数不能为零！"; setTimeout(clearnote, 4000) } break;                     case 5: result = num % numshow; break;                 }                 quit = 1; //避免重复按键             }             else {                 result = numshow;             }             numshow = String(result);             document.calculator.numScreen.value = numshow;             num = result; //存储当前值         }         function clearnote() { //清空提示             document.getElementById("note").innerHTML = "";         }     </script> </head> <body>     <div id="calculator">         <div id="calcu-head">           <center>                 简单的计算器</center>         </div>         <form name="calculator" action="" method="get">         <div id="calcu-screen">             <!--配置显示窗口，使用onfocus="this.blur();"避免键盘输入-->             <input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();" />         </div>         <div id="calcu-btn">             <ul>                 <!--配置按钮-->                 <li onclick="command(7)">7</li>                 <li onclick="command(8)">8</li>                 <li onclick="command(9)">9</li>                 <li class="tool" onclick="del()">←</li>                 <li class="tool" onclick="clearscreen()">C</li>                 <li onclick="command(4)">4</li>                 <li onclick="command(5)">5</li>                 <li onclick="command(6)">6</li>                 <li class="tool" onclick="times()">×</li>                 <li class="tool" onclick="divide()">÷</li>                 <li onclick="command(1)">1</li>                 <li onclick="command(2)">2</li>                 <li onclick="command(3)">3</li>                 <li class="tool" onclick="plus()">+</li>                 <li class="tool" onclick="minus()">-</li>                 <li onclick="command(0)">0</li>                 <li onclick="dzero()">00</li>                 <li onclick="dot()">.</li>                 <li class="tool" onclick="persent()">%</li>                 <li class="tool" onclick="equal()">=</li>             </ul>         </div>         <div id="calcu-foot">             <span id="note"></span><span class="welcome">欢迎使用javascript计算器！</span>         </div>         </form>     </div> </body> </html>

javascript 简单的计算器的更多相关文章

  1. javascript简单计算器实践

    参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入 ...

  2. js制作简单的计算器

    学着做了一个简单的计算器!记录记录!哈哈 <!DOCTYPE html> <html> <head> <title>简单的计算器</title&g ...

  3. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  4. Java简单公式计算器

    最近给公司开发业务代码时,碰到一个场景,简单描述是这样的: 客户要向咱们公司定制一件产品,这个产品呢,有很多属性,那公司得根据这些属性报价呀,怎么报价呢?公司针对某种类型的产品有一个基准价,在同类产品 ...

  5. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

  6. 留念 C语言第一课简单的计算器制作

    留念 C语言第一课简单的计算器制作 学C语言这么久了.  /* 留念 C语言第一课简单的计算器制作 */   #include<stdio.h>  #include<stdlib.h ...

  7. jsp学习---使用jsp和JavaBean实现超简单网页计算器

    一.需求 如题,用jsp实现一个超简单的网页计算器. 二.实现 1.效果图 1)初始界面: 2)随便输入两个数进行相乘: 3)当除数为零时提示报错: 2.代码 Calculator.java pack ...

  8. 纯javascript代码编写计算器程序

    今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 具体代码如下:(关注我的博客,及时获取最新WEB前 ...

  9. 教学项目之-通过Python实现简单的计算器

    教学项目之-通过Python实现简单的计算器   计算器开发需求 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/ ...

随机推荐

  1. aws linuxbrew GLIBC_PRIVATE not defined in file ld-linux-x86-64.so.2

    在 aws ec2 里面出现 segement fault,ls rm 等命令都不能正常运行,会出现: ls: relocation error: /home/ec2-user/.linuxbrew/ ...

  2. 【转】 .NET中STAThread和MTAThread

    ref:http://blog.csdn.net/dyllove98/article/details/9735955 1 COM中的公寓 本文讨论进程内COM组件.以一个示例直观演示STAThread ...

  3. WeX5与阿里内测的Weex与有何纠葛？快来看HTML5开发圈那些逗逼事儿！

    4月21日~23日,由infoQ主办的2016 Qcon大会北京站如期举行. HTML5开发已经成为移动开发/前端专题中无可争议的焦点,核心议题已经由前几年的是否该用HTML5转向了如何高性能.高效率 ...

  4. mvc 之 @Html.DropDownList

    Dictionary<string, string> myDic = new Dictionary<string, string>(); myDic.Add(System.DB ...

  5. 使用JS来实现验证码功能

    最近想为自己的Django博客添加验证码功能,本来想使用第三方库来实现的,不过考虑到添加第三方库对性能的影响,以及第三方库是否安全可靠的问题,还是用自己的代码来实现吧.反正用JS来实现验证码功能又不是 ...

  6. JDBC 简介

    [摘要] 1) JDBC : (Java Database Connectivity ,java数据基础连接)是标准的Java 访问数据库的API.即Java数据库编程接口,是一组标准的Java语言中 ...

  7. linq and rest api in sharepoint

    //1.make sure your application using the .net fromwork 3.5 //2.create entity classes using the instr ...

  8. php如何查找会员无限分类的所有上级和所有下级

    a推广出的a-1,a-2继续推广,得到a-1-1,a-1-2等等数据库设计思路如下:用户表中有一个son这么一个字段,这个字段中存放名下所有会员的id,用分号隔开.这个字段的维护:比如a-1-1推广出 ...

  9. CSS两列及三列自适应布局方法整理

    布局 自适应 两列 三列 在传统方法的基础上加入了Flex布局并阐述各方法的优缺点,希望对大家有所帮助.先上目录: 两列布局:左侧定宽,右侧自适应 方法一:利用float和负外边距 方法二:利用外边距 ...

  10. Python读写文件 - 转

    http://blog.csdn.net/adupt/article/details/4435615 http://docs.python.org/release/2.5.2/lib/bltin-fi ...