jQuery：案例10 一个能够计算进制转换的计算器

最新推荐文章于 2021-11-12 15:22:07 发布
最新推荐文章于 2021-11-12 15:22:07 发布
阅读量859 收藏 5
点赞数 1
分类专栏： 前端 jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/willard_cui/article/details/81592157
版权

在案例8的基础上增加了进制转换功能

动画效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <script src="../jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #calculator{
            position: relative;
            margin: 50px auto;
            padding: 5px;
            width: 230px;
            height: 316px;
            background: rgb(190,210,224);
        }
        #screen{
            width: 230px;
            height: 60px;
            background: rgb(153,153,153);
            border-radius: 5px;
            text-align: right;
            overflow: hidden;
        }
        #txt1{
            height: 20px;
            padding-top: 10px;
            font-size: 10px;
        }
        #txt2{
            height: 30px;
            font-size: 20px;
        }
        #num{
            float:left;
            width: 130px;
        }
        #num input{
            width: 40px;
            height: 40px;
            margin-top: 3px;
        }
        #del{
            float:right;
            width: 70px;
            height: 30px;
        }
        #del input{
            margin-top: 4px ;
            width: 70px;
            height: 31px;
        }
        #operator{
            margin-top: 5px ;
            float:right;
            width: 70px;
            height: 180px;
        }
        #operator input{
            width: 70px;
            height: 31px;
            margin-top: 4px ;
        }
        #converter{
            float:right;
            margin-top: 5px;
            width: 70px;


        }
        #converter .show{
            position: absolute;
            bottom: 5px;
            width: 70px;
            height: 30px;
            font-size: 10px;
        }
        #converter div{
            display: none;
            position: absolute;
            left: 150px;
            top: 100px;
        }
        #converter div input{
            width: 85px;
            height: 25px;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div id="calculator">
    <div id="screen">
        <p id="txt1"></p>
        <p id="txt2"></p>
    </div>

    <div id="workspace">
        <div id="num">
            <input type="button" value="7">
            <input type="button" value="8">
            <input type="button" value="9">
            <input type="button" value="4">
            <input type="button" value="5">
            <input type="button" value="6">
            <input type="button" value="1">
            <input type="button" value="2">
            <input type="button" value="3">
            <input type="button" value="Cle">
            <input type="button" value="0">
            <input type="button" value=".">
            <input type="button" value="A">
            <input type="button" value="B">
            <input type="button" value="C">
            <input type="button" value="D">
            <input type="button" value="E">
            <input type="button" value="F">
        </div>
        <div id="del">
            <input type="button" value="←">
        </div>
        <div id="operator">
            <input type="button" value="+">
            <input type="button" value="-">
            <input type="button" value="*">
            <input type="button" value="/">
            <input type="button" value="=">
        </div>
        <div id="converter">
            <div>
                <input type="button" value="十转十六进制" name="1">
                <input type="button" value="十转八进制" name="2">
                <input type="button" value="十转二进制" name="3">
                <input type="button" value="十六转十进制" name="4">
                <input type="button" value="八转十进制" name="5">
                <input type="button" value="二转十进制" name="6">
            </div>
            <input class="show" type="button" value="进制转换">

        </div>

    </div>
</div>

<script>
    $(function(){
        var i=0;//i为清空标志，i=1时需要清空#txt2的数据
        //获取输入的数字
        $("#num input").click(function () {
            //先判断#txt2中是否保存着上次计算的结果，如果是则将其清空
            if (i===1){
                $("#txt2").text("");
            }
            //保证数字以正确的格式显示
            //使用switch语句实现

            switch ($(this).val()){
                case "Cle":
                    $("#txt2").text("");

                    break;
                case ".":
                    if ($("#txt2").text().indexOf(".") != -1) {
                        break;
                    }else{$("#txt2").append($(this).val());}
                    break;
                default:
                    if ($("#txt2").text() === "0") {
                        $("#txt2").text($(this).val());
                    }else{
                        $("#txt2").append($(this).val());
                    }
            }
            i=0;//将清空标志设为0
        });
        //获取运算符
        $("#operator input:not(:last)").click(function () {
            $("#txt1").text($("#txt2").text()+$(this).val());
            $("#txt2").text("");
        });
        //按下“=”键进行计算
        $("#operator input").last().click(function () {
            //使用eval()函数
            //$("#txt2").text(eval($("#txt1").text()+$("#txt2").text()));
            //使用常规方法
            var str=$("#txt1").text();
            var n1=parseFloat(str);
            var n2=parseFloat($("#txt2").text());
            var cal=str[str.length-1];
            switch (cal){
                case "+":
                    $("#txt2").text( n1+n2);
                    break;
                case "-":
                    $("#txt2").text( n1-n2);
                    break;
                case "*":
                    $("#txt2").text( n1*n2);
                    break;
                case "/":
                    $("#txt2").text( n1/n2);
                    break;
                default: break;
            }
            $("#txt1").text( "");
            i=1;//将清空标志设为1
        });
        //按下“←”回删数字
        $("#del").click(function () {
            var str=$("#txt2").text();
            if (i==0) {
                $("#txt2").text(str.slice(0, str.length - 1));
            }
        });
        //按下“进制转换”，出现几种进制转换按钮
        $("#converter .show").click(function () {
            $("#converter div").toggle();
            $("#operator").toggle();
        });
        //进行进制转换
        $("#converter div input").click(function () {
            var index=this.name;
            var n=$("#txt2").text();
            switch (index){
                case "1":
                    n=parseInt(n,10);
                    $("#txt2").text(n.toString(16));
                    break;
                case "2":
                    n=parseInt(n,10);
                    $("#txt2").text(n.toString(8));
                    break;
                case "3":
                    n=parseInt(n,10);
                    $("#txt2").text(n.toString(2));
                    break;
                case "4":
                    n=parseInt(n,16);
                    $("#txt2").text(n.toString(10));
                    break;
                case "5":
                    n=parseInt(n,8);
                    $("#txt2").text(n.toString(10));
                    break;
                case "6":
                    n=parseInt(n,2);
                    $("#txt2").text(n.toString(10));
                    break;

            }
          i=1;//将清空标志设为1
        });
    });
</script>
</body>
</html>
willard_cui
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
进制转换器的c代码实现
weixin_44839962的博客
01-03 1198
1.很久没有更新博客了 这次想要记录分享一下在这段学习过程中实现的进制转换器 c语言代码 里面运用到了一些数据结构和递归的相关知识 也算是一个简单的综合运用吧 2.核心思想是将一切进制转换为10进制 再由十进制转换为其他进制数据 本代码支持一切进制之间的运算 3.思路和关键步骤的含义再源代码中标注的很详细 这里不再过述 代码如下： Test.c #include"SeqList.h" ...
MySQL、JDBC、HTML、CSS、JavaScript、jQuery、tomcat、Http、Servlet、JSP、EL、JSTL、Maven、Cookie、Session（框架第一部分）
wrh0740的博客
07-10 4998
第一章 MySQL 1. 数据库 1、什么是数据库？ 所谓的数据库就是指存储和管理数据的仓库 2、数据库有哪些分类？ 3、什么是关系型数据库？ 底层以二维表的形式保存数据的库就是关系型数据库 stu-学生表 4、常见的关系型数据库有哪些？ Sql Server：微软提供，收费，适用于一些中型或大型的项目中，在java中的使用占比不高（.NET中使用的较多） Oracle：甲骨文公司提供，收费，适用于一些大型或者超大型的项目中，在java中的使用占比非常高 mysql：瑞典MySQLAB公司提
进制转换计算器（VS,C#编写，附源码工程）
10-10
进制转换计算器，用VS2017,c#编写，附带源码工程，欢迎试用！ 360等杀毒软件会报毒，没做杀免！ ps （24.4.12）：不要再下载了！你们下载的分全部落入了csdn的口袋中！坚决抵制csdn的这种行为！
html进制转换器
10-28
纯JavaScript编写的各种常见进制转换器，例如：二进制转换为八进制，八进制转十六进制，此转换器都能实现！
jQuery二进制、十进制、十六进制转换
LiGuogang
11-12 1987
十进制数 d = 15，转为二进制数 b ？ // 十进制数 var d = 15; // 二进制数 var b = d.toString(2); // '1111' 十进制数 d = 15，转为十六进制数 h ？ // 十进制数 var d = 15; // 十六进制数 var h = d.toString(16); // 'f' 二进制数 b = ‘1111’，转为十进制数 d ？ // 二进制数 var b = "1111"; // 十进制数 var d = parseInt("1111", .
JavaScript十进制转十六进制及反转的几种方法
zero_person_xianzi的博客
07-22 2076
// 10进制转16进制 function handler(params) { typeof params == "string" ? params = Number(params) : '' console.log(params.toString(16)) //a8 } handler('168') // 16进制转10进制 function handler2(params) { console.log(Number('0x' + params)) //168 }
jQuery实现可以计算进制转换的计算器
01-18
本文实例为大家分享了jQuery实现可以计算进制转换的计算器，供大家参考，具体内容如下 在案例8的基础上增加了进制转换功能 动画效果： <!DOCTYPE html> <html lang=en> <head> <meta charset=...
java计算器进制转换
最新发布
10-19
这里提供一个使用jQuery实现的可以计算进制转换的计算器。在案例8的基础上增加了进制转换功能。需要注意的是，表达式1 && 表达式2，必须保证两个表达式都为真，整体才为真。具体实现可以参考引用中的代码。如果你想...
python编程入门与案例详解-"Python小屋”免费资源汇总（截至2018年11月28日）...
q6q6q的专栏
10-28 8278
原标题："Python小屋”免费资源汇总（截至2018年11月28日）为方便广大Python爱好者查阅和学习，特整理汇总微信公众号"Python小屋”开通29个月以来推送过的700多篇文章清单，如果需要本清单的电子版，可以在公众号后台发送消息"资源汇总”获取下载地址。非计算机专业《Python程序设计基础》教学参考大纲计算机相关专业"Python程序设计”教...
Javascript与Jquery知识点
weixin_WH841320859的博客
01-07 1258
前端Javascript与Jquery知识点
十进制转二进制流程图
11-17
十进制转二进制流程图 新手开始做流程图，有的没有学过的，刚拿到手里很茫然。。就像我一样。。。到处找，人家都只给你源代码。。。我们又还没入门，看都不懂，有和我一样需要的新手可以下来看看。
使用MFC编写的计算器，支持进制转换
02-10
使用MFC写的一个简易计算器，可以实现科学计算和进制转换
科学计算器（进制转换）
05-24
可以实现+，—，*，%，mod,sin,cos,tan,EXP,m+,m-,mr,mc,x^y 十进制二进制相互转换 换肤
一个多功能可进制转换计算器
04-11
本计算器能够实现二进制、八进制、十进制和十六进制的相互转换；二进制、八进制、十进制和十六进制的加减乘除运算；以及十进制的简单科学计算：sin,cos,tan,sqrt,ln,exp。
基于MFC的进制转换计算器
03-09
基于MFC的进制转换计算器使用Visual C++ 6.0 (C++)环境编写，在二进制、八进制、十六进制之间能相互进行转换。可以在复选框中选择输入数据加进制符号或转换结果加进制符号等。
js实现二进制与十进制的相互转换
hety119的专栏
06-08 3万+
var a = 1010; alert(a.toString(2)); //转成二进制  alert(parseInt( "101110100 ",2)) ;//转成十进制
16进制位运算
淘淘小窝
11-28 5106
public class T { public static void main(String[] args) { String a ="00000110"; int parseInt = Integer.parseInt(a,16); System.out.println("10进制"+parseInt); String hexString = Integer.toBinary
switch用法和原理
热门推荐
ywl470812087的博客
11-14 11万+
switch用法 int val; printf("请输入你要到的楼层:\n"); scanf_s("%d", &val); switch (val){ case 1: printf("1层开!\n"); break; case 2: printf("2层开!\n"); break; case 3: printf("3层开!\n"); break;...
javascript 16进制的字符串 转换为 10进制整数 hex int2hex
fareast_mzh的博客
10-17 9436
16进制的字符串 转换为整数 function hex2int(hex) { var len = hex.length, a = new Array(len), code; for (var i = 0; i < len; i++) { code = hex.charCodeAt(i); if (48<=code &&...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值