jquery计算器（改良版）

代码：

 <!Doctype html>

 <html>

 <meta charset="UTF-8">

 <title>计算器</title>

 <script src="jquery.min.js"></script>

 <style>

 button{

     width:80px;

     height:50px;

     background-color:#969696;

     color:white;

     font-size:17px;

 }

 </style>

 <body>

 <table>

 <tr>

     <td colspan="4" style="text-align:center;">

         <input type="text" value="0" style="font-size:17px;text-align:right;width:330px;height:50px;">

     </td>

 </tr>

 <tr>

     <td>

     <button class="num">7</button>

     </td>

     <td>

     <button class="num">8</button>

     </td>

     <td>

     <button class="num">9</button>

     </td>

     <td>

     <button class="operator">+</button>

     </td>

 </tr>

 <tr>

     <td>

     <button class="num">4</button>

     </td>

     <td>

     <button class="num">5</button>

     </td>

     <td>

     <button class="num">6</button>

     </td>

     <td>

     <button class="operator">-</button>

     </td>

 </tr>

 <tr>

     <td>

     <button class="num">1</button>

     </td>

     <td>

     <button class="num">2</button>

     </td>

     <td>

     <button class="num">3</button>

     </td>

     <td>

     <button class="operator">*</button>

     </td>

 </tr>

 <tr>

     <td>

     <button class="num">0</button>

     </td>

     <td>

     <button id="point">.</button>

     </td>

     <td>

     <button id="eq">=</button>

     </td>

     <td>

     <button class="operator">/</button>

     </td>

 </tr>

 <tr>

 <td>

 <button id="clean">C</button>

 </td>

 </tr>

 </table>

 </body>

 </html>

 <script>

 var status = 0;

 var operat;

 var firstnum;

 var secondnum;

 $("#clean").click(function(){

     status = 0;

     $("input").val(0);

     firstnum = 0;

     secondnum = 0;

 })

 $(".num").click(function(){

     if(status == 0){

         if($("input").val()==='0'){

             $("input").val($(this).html());

         }else if($("input").val() == '0.'){

             $("input").val('0.' + $(this).html());

         }else{

             $("input").val($("input").val() + $(this).html());

         }

         firstnum = $("input").val();

     }else{

         if($("input").val() == '0.'){

             $("input").val('0.' + $(this).html());

             secondnum = $("input").val();

         }else{

             $("input").val($(this).html());

             secondnum = $("input").val();

         }

     }

 })

 $(".operator").click(function(){

     status = 1;

     operat = $(this).html();

 })

 $("#point").click(function(){

     $("input").val($("input").val() + $(this).html());

 })

 $("#eq").click(function(){

     if(operat == '+'){

         $("input").val((parseFloat(firstnum)*10+parseFloat(secondnum)*10)/10);

     }else if(operat == '-'){

         $("input").val((parseFloat(firstnum)*10-parseFloat(secondnum)*10)/10);

     }else if(operat == '*'){

         $("input").val((parseFloat(firstnum)*10*parseFloat(secondnum)*10)/100);

     }else{

         $("input").val((parseFloat(firstnum)*10/parseFloat(secondnum)*10)/100);

     }

     firstnum = $("input").val();

     status = 0;

 })

 </script>

效果图：

jquery计算器（改良版）的更多相关文章

一句代码美化你的下框之jquery.selectMM修复版（jquery.selectMM v0.9 beta 20141217)
一句代码美化你的下框之jquery.selectMM修复版(jquery.selectMM v0.9 beta 20141217) 浏览效果: http://www.beyond630.com/jqu ...
jQuery Mobile (整合版)
jQuery Mobile (整合版) 前言为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile ...
office全系列激活脚本-改良版
@ECHO OFFTITLE office 全版本系统激活@echo offfor /l %%a in (8,1,16) do (for /f "tokens=*" %%i in ...
windows全系列激活脚本-改良版.cmd
@ECHO OFFTITLE Windows 全版本系统激活cscript //nologo %Systemroot%\system32\slmgr.vbs -skms 10.1.1.12ECHO 检 ...
office全系列激活脚本-改良版.cmd
@ECHO OFFTITLE office 全版本系统激活@echo offfor /l %%a in (8,1,16) do (for /f "tokens=*" %%i in ...
锋利的jQuery（第二版）学习总结
通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结. 此书主要讲解了jQuery的常用操作,包括认识jQuery,j ...
优化改良版：数组，List,等集合需要加逗号或其它符合转成字符串
大家经常需要数组加逗号拼接成字符串的情况传统作法就是写for,foreach拼接, 现给出优化改良版数组,List,等集合需要加逗号或其它符合转成字符串方法: List<string> l ...
Python实例---利用正则实现计算器[FTL版]
import re # 格式化 def format_str(str): str = str.replace('--', '+') str = str.replace('-+', '-') str = ...
闲来无事写一个jquery计算器，没有进行封装......
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

java并发（1）
hashmap效率高单线程不安全,hashTable效率低但线程安全因为hashTable使用synchronized来保证线程安全,所以效率十分低,比如线程1使用put插入数据时,线程2既不能使用 ...
C语言经典程序100例
-------------------------------------------------------------------------------- [程序1] 题目:古典问题:有一对兔子 ...
WebService第二天——WebService框架CXF
一.CXF 1.什么是CXF Apache CXF = Celtix + XFire,开始叫 Apache CeltiXfire,后来更名为 Apache CXF 了,以下简称为 CXF.CXF 继承 ...
每天看一片代码系列（三）：codepen上一个音乐播放器的实现
今天我们看的是一个使用纯HTML+CSS+JS实现音乐播放器的例子,效果还是很赞的: codePen地址 HTML部分首先我们要思考一下,一个播放器主要包含哪些元素.首先要有播放的进度信息,还有播放 ...
ServletContext详解以及用法
ServletContext,是一个全局的储存信息的空间,服务器开始,其就存在,服务器关闭,其才释放.request,一个用户可有多个:session,一个用户一个:而servletContext,所 ...
NavRouter
使用方法只需要跟vue-router一样正常使用即可,这里我们新加了一个路由跳转方法nav: router.nav()//参数同router.replace一样. 路由跳转策略首先说下路由跳转过程, ...
python里pickle模块
Pickle模块用于将复杂的文件转化为二进制的文件 pickle模块一般是在源代码里面含有较大的字典或者列表等复杂文件时,我们如果将文件直接写在源代码里面,这样会使得代码很冗余,并且源代码文件所占空间 ...
Python输入数据类型判断正确与否的函数大全（非常全）
对于python输入数据类型判断正确与否的函数大致有三类: (1)type(),它的作用直接可以判断出数据的类型 (2)isinstance(),它可以判断任何一个数据与相应的数据类型是否一致,比 ...
【text】文本组件说明
text文本组件:在小程序里除了文本节点以外的其他节点都无法长按选中. 原型: <text selectable="[Boolean]" space="[ensp ...
代码对齐（Alignment of Code,ACM/ICPC NEERC 2010,UVa1593)
题目描述: 解题思路: 输入时提出单个字符串,并用一个数组记录每列最长长度,格式化输出 #include <iostream> #include <algorithm> #in ...

jquery计算器（改良版）

jquery计算器（改良版）的更多相关文章

随机推荐

热门专题