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 ...

随机推荐

STL---llist
#include<iostream> #include<algorithm> #include<list> using namespace std; struct ...
Emgucv安装及使用
Emgucv安装最近有个客户联系我,希望我能够为他们做一个识别瓷砖花纹的软件.应用场景是这样的:现场会有一个摄像头去拍摄流水线上运输的瓷砖,如果检测这块瓷砖的花纹不符合要求,则需要给PLC或输出板卡 ...
北京Uber优步司机奖励政策(1月25日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
Hive支持行级update、delete时遇到的问题
Hive从0.14版本开始支持事务和行级更新,但缺省是不支持的,需要一些附加的配置.要想支持行级insert.update.delete,需要配置Hive支持事务.(行级的insert好像不配置也能运 ...
在ubuntu安装python, theano, keras , Spearmint, Mongodb
系统配置: Ubuntu 14 (其他系统也差不多如下操作) 1. 通过anaconda安装 python 地址: https://www.continuum.io/downloads#linux 2 ...
hugepages_settings.sh
#!/bin/bash## hugepages_settings.sh## Linux bash script to compute values for the# recommended HugeP ...
coolshell里的一些c++文章
c++数组不支持多态 https://coolshell.cn/articles/9543.htmlwhy gcc in c++ https://airs.com/ian/cxx-slides.pdf ...
Linux命令大全（非常全，史上最全）
最近学习Linux,最大的体验就是它的很多东西都需要由命令来进行控制,下面是我总结的一些命令,供大家参考: 系统信息 arch 显示机器的处理器架构 uname -m 显示机器的处理器架构 una ...
servlet和Jsp的复习整理
servlet 1.生命周期 a.构造方法.生成一个servlet b.init()方法.当开启服务器时,servlet第一次被装载,servlet引擎调用这个servlet的init()的方法,只调 ...
lintcode172 删除元素
删除元素给定一个数组和一个值,在原地删除与值相同的数字,返回新数组的长度. 元素的顺序可以改变,并且对新的数组不会有影响. 您在真实的面试中是否遇到过这个题? Yes 样例给出一个数组 [0, ...

jquery计算器（改良版）

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

随机推荐

热门专题