javascript 简单的计算器

<%@ 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">  <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 简单的计算器的更多相关文章

javascript简单计算器实践
参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入 ...
js制作简单的计算器
学着做了一个简单的计算器!记录记录!哈哈 <!DOCTYPE html> <html> <head> <title>简单的计算器</title&g ...
JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
Java简单公式计算器
最近给公司开发业务代码时,碰到一个场景,简单描述是这样的: 客户要向咱们公司定制一件产品,这个产品呢,有很多属性,那公司得根据这些属性报价呀,怎么报价呢?公司针对某种类型的产品有一个基准价,在同类产品 ...
JS事件编程练习-自制计算器使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
编程练习使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...
留念 C语言第一课简单的计算器制作
留念 C语言第一课简单的计算器制作学C语言这么久了. /* 留念 C语言第一课简单的计算器制作 */ #include<stdio.h> #include<stdlib.h ...
jsp学习---使用jsp和JavaBean实现超简单网页计算器
一.需求如题,用jsp实现一个超简单的网页计算器. 二.实现 1.效果图 1)初始界面: 2)随便输入两个数进行相乘: 3)当除数为零时提示报错: 2.代码 Calculator.java pack ...
纯javascript代码编写计算器程序
今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 具体代码如下:(关注我的博客,及时获取最新WEB前 ...
教学项目之-通过Python实现简单的计算器
教学项目之-通过Python实现简单的计算器计算器开发需求实现加减乘除及拓号优先级解析用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/ ...

随机推荐

php100 编程小技巧
用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的“函数”(译注:PHP手册中 ...
Tomcat & Nginx
http://cxshun.iteye.com/blog/1535188 反向代理方式实际上就是一台负责转发的代理服务器,貌似充当了真正服务器的功能,但实际上并不是,代理服务器只是充当了转发的作用, ...
tortoiseGit的SHH秘钥设置
tortoiseGit如果安装时使用默认的putty方式,因为putty的秘钥格式和SSH的不一样,所以要使用自带的工具重新生成一次秘钥. 具体的方式是:用puttyGen工具来生成公钥和秘钥,公钥( ...
Spark Streaming揭秘 Day30 集群模式下SparkStreaming日志分析
Spark Streaming揭秘 Day30 集群模式下SparkStreaming日志分析今天通过集群运行模式观察.研究和透彻的刨析SparkStreaming的日志和web监控台. Day28 ...
s3c-u-boot-1.1.6源码分析之一start.s
定位到\s3c-u-boot-1.1.6\cpu\s3c64xx\start.s,打开该文件 /* * armboot - Startup Code for S3C6400/ARM1176 CPU-c ...
TimesTen的安装和连接
注:本文只是单独用TimesTen,和Oracle一起用的不在本文讨论之内.开发语言为C#. TimesTen的过多介绍请访问Oracle官网,不过官网打开够慢的. 1.安装驱动本人用的是ODP.N ...
Cadence封装制作之表贴封装的制作
以0805封装为例 1.打开PCB editor-> Allegro PCB Design XL 2.File -> New ① Drawing Type -> Package Sy ...
去掉代码中自动生成的TODO Auto-generated method stub
Window --> Preferences -->Java -->Code Style -->Code Templates--> Code --> Method ...
WinForm调试输出数据
在调试Winfrom时想知道其中的数据输出 1.单击运行按钮 2.选择调试->窗口->输出 3.单击Winform中要执行的按钮在输出栏中显示输出数据 4.Ctrl K S 能够 ...
easy ui window 相关属性
<div class="easyui-window" title="提示" style="width:550px;height:500px;pa ...

javascript 简单的计算器

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

随机推荐

热门专题