jquery制作简单计算器

最新推荐文章于 2022-01-15 21:26:40 发布
最新推荐文章于 2022-01-15 21:26:40 发布
阅读量1.4k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/doubeizhucele/article/details/9673693
版权

<!-- 1366 x 768 -->
<!DOCTYPE html>
<html>
        <head>
                <style>
                        input {width:35px;height:30px;border-right: 1px solid;}
                </style>
                <script src="jquery.min.js"></script>
                <script>
                        var num1="0";
                        var num2="0";
                        var result="0";
                        var op="";
                        
                        function init(){
                                        num1 = "0";
                                        op = "";
                                        num2 = "0";        
                        }
                        
                        $(document).ready(function(){
                          $("input.num").click(function(){
                                  var reg = /^0/;
                                  if((op=="")&&(num2=="0")){
                                          num1 += this.value;
                                                if(reg.test(num1)) num1 = num1.substring(1);
                                          document.getElementById("value").value = num1;
                                  }else if(op!=null||op!=""){
                                          num2 += this.value;
                                          if(reg.test(num2)) num2 = num2.substring(1);
                                          document.getElementById("value").value = num2;
                                  }
                                  
                          });
                          $("input.oper").click(function(){
                                  op = this.value;
                                  document.getElementById("value").value = op;
                          });
                          $("input.singleoper").click(function(){
                                  var operTxt = this.value;
                                  var reg = /^\-/;
                                  if(operTxt=="±"){
                                          if(num1=="0"){
                                                  num1 == "0"
                                          }else if(reg.test(num1)){
                                                  num1 = num1.substring(1);
                                          }else{
                                                  num1 = "-"+num1;
                                          }                                                                                          
                                  }else if(operTxt=="1/x"){
                                          num1 = 1 / num1;
                                  }
                                  document.getElementById("value").value = num1;
                          });
                          $("input.backone").click(function(){
                                        if(num1!="0"&&num2=="0"){
                                                var len = num1.length;
                                                if(len==1){
                                                        num1 = "0";
                                                }else{                                                        
                                                        num1 = num1.substring(0,len-1);
                                                }
                                                document.getElementById("value").value = num1;
                                        }else if(num2!=""&&num2!=null){
                                                var len = num2.length;
                                                if(len==1){
                                                        num2 = "0";
                                                }else{
                                                        num2 = num2.substring(0,len-1);
                                                }
                                                document.getElementById("value").value = num2;
                                        }                
                          });
                          $("input#clear").click(function(){
                                        document.getElementById("value").value = 0;  
                                        init();                
                          });
                          $("input.nofun").click(function(){
                                        alert("未开发");
                          });
                          $("input#square").click(function(){
                                        num1 = Math.sqrt(num1);
                                        document.getElementById("value").value = num1;
                          });
                          $("input#clearnum").click(function(){
                                  //alert("num1>>"+num1);
                                  //alert("num2>>"+num2);
                                        if(op==null||op==""){
                                                num1 = "0";
                                                document.getElementById("value").value = num1;
                                        }else if(!isNaN(document.getElementById("value").value)){
                                                num2 = "0";
                                                document.getElementById("value").value = num2;
                                        }
                          });
                          $("input#calc").click(function(){
                                        result = eval(num1+op+num2);
                                        document.getElementById("value").value = result;  
                                        init();
                                        num1 = String(result);
                          });
                          
                        });
                </script>
        </head>
        <body>        
                <div style="width:175px;height:150px;">
                        <div><input type="text" id="value" value="0" style="width:100%;text-align:right;font-size:20px;"></div>
                        <div><input type="button" class="nofun" value="MC"><input type="button" class="nofun" value="MR"><input type="button" class="nofun" value="MS"><input type="button" id="mplus" class="nofun" value="M+"><input type="button" class="nofun" value="M-"></div>
                        <div><input type="button" class="backone" value="←"><input type="button" id="clearnum" value="CE"><input type="button" id="clear" value="C"><input type="button" class="singleoper" id="opposite" value="±"><input type="button" id="square" value="√"></div>
                        <div><input type="button" class="num" id="num7" value="7"><input type="button" class="num" id="num8" value="8"><input type="button" class="num" id="num9" value="9"><input type="button" class="oper" id="devide" value="/"><input type="button" class="nofun" value="%"></div>
                        <div><input type="button" class="num" id="num4" value="4"><input type="button" class="num" id="num5" value="5"><input type="button" class="num" id="num6" value="6"><input type="button" class="oper" id="multiply" value="*"><input class="singleoper" type="button" id="reciprocal" value="1/x"></div>
                        <div style = "float:left;">
                                <div><input type="button" class="num" id="num1" value="1"><input type="button" class="num" id="num2" value="2"><input type="button" class="num" id="num3" value="3"><input type="button" class="oper" id="minus" value="-"></div>
                                <div><input type="button" class="num" id="num0" value="0" style="width:70px"><input type="button" class="num" id="dot" value="."><input type="button" class="oper" id="plus" value="+"></div>
                        </div>
                        <div style = "float:left;">                
                                <input type="button" id="calc" value="=" style="height:60px;">                
                        </div>
                <div>
        </body>
</html>


Simon612
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用jquery编写简易计算器
weixin_46486269的博客
04-04 3226
一、jQuery 选择器 1，基本选择器（#id ，.class ，element ） 2，层次选择器（祖先后代，父子） （简易计算器主要了解基本选择器和层次选择器） 二、jq的html,val,css,attr html：设置与获取内容 <span>dxxxx</span> <div>aaaa</div> <button>ok</button> val：设置与获取值 <input type="text" value="123"
使用jQuery制作一个简单的计算器
2302_78250455的博客
09-11 392
【代码】使用jQuery制作一个简单的计算器。
用jQuery做的一个计算器代码很实用
10-23
用jQuery做的一个计算器代码很实用用jQuery做的一个计算器代码很实用
jQuery 计算器
Get old
03-02 906
#calculate{ display: inline-block; padding: 3px 7px 10px; font-size: 14px; line-height: 30px; outline: none; border-radius: 3px; margin: 5px; background-color: #31b0d5;
jquery做的一个web计算器
02-19
我用jquery做的一个web计算器，只实现了一些最简单加减乘除功能，供大家参考一下，开发环境是Aptana Studio,jquery1.2.6
jQuery写一个简单的计算器
qq_44089530的博客
01-15 1780
简易计算机
Jquery做的一个简单的计算器例子
06-29
JQuery的资料大家可以下载下载 学习啊
jQuery简易计算器
04-13
jQuery简易计算器是一个基于JavaScript库jQuery实现的简单计算工具，它为用户提供了一个直观的界面来执行基本的算术运算。这个项目对于初学者来说是很好的学习材料，因为它涉及到前端开发中的DOM操作、事件处理以及...
jquery制作简易计算器
最新发布
06-27
要使用jQuery制作一个简易计算器，你可以按照以下步骤进行： 1. 引入jQuery：在HTML文件的`<head>`部分添加`<script>`标签引入jQuery库。 ```html <script src="https://ajax.googleapis.com/ajax/libs/jquery/...
jquery实现简易计算器源码下载
09-22
【jQuery 实现简易计算器】 jQuery 是一款广泛应用于前端开发的 JavaScript 库，它简化了 JavaScript 的 DOM 操作、事件处理和动画制作等任务。在这个项目中，我们将探讨如何使用 jQuery 来实现一个简易计算器，这...
jQuery简单计算器
08-13
一个基于jQuery的网页计算器项目，可供初学者下载练手学习。
简单网页计算器（jQuery)
10-11
网页计算器 有计算器的界面。实现简单的加减乘除。可进行连续运算。button点击获取数字及运算符号。
用jQuery实现简单的网页计算器（内含详细注解的jQuery源码）
03-07
用jQuery实现网页上简单计算器，包括鼠标移动到数字上时变色，点击计算等操作。
jquery计算器
01-17
jquery计算器 html css 计算器可以实现基础功能：开关机，简单数学计算
蜗牛—JQuery学习之简易计算器
树上的大腰子
05-17 1527
简易计算器 $(function(){ $("input[type='button']").click(function(){ var opt = $(this).val(); var num1 = parseInt($("#txtNum1").val()); var num2 = parseInt($("#txtNum2").val()); var re
jQuery完成简易计算器
weixin_44810547的博客
03-21 787
jQuery完成简易计算器 <script type="text/javascript"> function jia() { var s1 = $("#s1").val(); var s2 = $("#s2").val(); var jg = Number(s1)+Number(s2); $("#jg").val(jg); } function ji...
jQuery实现一个简单的计算器
weixin_30471561的博客
05-21 349
现在是下午2点50分，眼睛和肩膀都有点酸，脑子有点木。 整理下做计算器的过程和结果： 1，表格布局按键和区域： 一个6行的表格。第一和第二行分别是两个type=“text”的<input>，宽度占据了四列的宽度，colspan="4"，分别是输入和输出的显示行。第三行有两列，分别是清零和退位按键。给每个按键标记id和value. 2，脚本写的时候思路真的很...
jquery实现简易的计算器
dengluandai1740的博客
11-21 224
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值