HTML编写2进制转换计算器,jQuery实现可以计算进制转换的计算器
本文实例为大家分享了jQuery实现可以计算进制转换的计算器,供大家参考,具体内容如下
在案例8的基础上增加了进制转换功能
动画效果:
计算器
*{
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;
}
$(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
});
});
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
HTML编写2进制转换计算器,jQuery实现可以计算进制转换的计算器相关推荐
- 能转16进制的计算机软件,16进制计算器能否完成各种不同进制的转换?
在使用16进制计算器的时候,并没有复杂的步骤,整个操作是非常简单的,而且还支持多款安卓手机下载使用,它占用的空间是比较小的,凭借着非常好用的特色,成为众多用户提升工作效率的一款必备工具. 16进制计算 ...
- html进制转换js代码,JS中的进制转换以及作用
js的进制转换, 分为2进制,8进制,10进制,16进制之间的相互转换, 我们直接利用 对象.toString()即可实现: 运行下面代码 //10进制转为16进制 (10).toString(16) ...
- Bailian2710 数制转换(POJ NOI0113-01)【进制】
问题链接:POJ NOI0113-01 数制转换. 原题出处:Bailian2710 数制转换. 总时间限制: 1000ms 内存限制: 65536kB 描述 求任意两个不同进制非负整数的转换(2进制 ...
- Java005-二进制、八进制、十进制和十六进制之间的转换
Java005-二进制.八进制.十进制和十六进制之间的转换 一.Java中的进制转换 1)在Java中各进制的输入 (1)二进制输入,需要在开头加0B或0b,如0B1101. (2)八进制输入,需要在 ...
- C++实现10进制转换2,8,16进制
C++实现10进制转换2,8,16进制 (1)使用c++实现10进制int型转换到2,8,16进制,其中int型最大值为2147483647,所以输入转换的数不能大于该数. (2)使用数组进行转换时使 ...
- 怎么用计算机的计算器转换进位制,怎么用电脑计算器将带小数的二进位制转换为十进位制...
怎么用电脑计算器将带小数的二进位制转换为十进位制以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 怎么用电脑计算器将带小数 ...
- 单项式计算机在线使用,16进制(CRC16)(多项式异或,多种)校验(2),循环冗余校验在线计算器_三贝计算网_23bei.com...
本工具用于快速求出通信中CRC16校验值,包括: 1)CRC-16/DECT-R(别名:R-CRC-16). 2)CRC-16/DECT-X(别名:X-CRC-16). 3)CRC-16/GENIBU ...
- python实现十进制转换成十六以内任意进制
十进制转换成二进制 十进制转换成二进制,采用的是"除以2求余数"的计算方法,如下所示: "除以2"的过程,得到的余数是从低到高的次序,而需要的带的输出是从高位到 ...
- 5.IDA-文本搜索、二进制搜索(16进制字节序列)、替换16进制
1.文本搜索 IDA文本搜索相当于对反汇编列表窗口进行子字符串搜索.通过Search▶Text(热键:ALT+T)命令启动文本搜索 选择Find all occurences(查找所有结果),IDA将 ...
最新文章
- Xiki:一个开发人员寻求增强命令行界面的能力
- 如何优化linux服务器,手把手教你如何优化linux服务器
- FPGA之道(57)状态机的实现方式
- 比特币现金被3.1万多家餐厅接受
- oracle 删除列 大数据_Oracle 删除指定sql的执行计划。
- android中viewpager+fragment,Android开发之ViewPager+Fragment
- 设计趋势|几何元素增加Banner版面率
- paip.软件版本完善计划VC423
- asp.net生成店铺推广二维码,二维码中间加logo(源码)
- 【大数据】分布式机器学习平台
- Excel转shape file
- 2021年 阿里云商标注册申请的相关详情及分类介绍
- 逻辑面试题:猴子搬香蕉
- Python实现求众数的三种方法
- 二阶系统参数用matlab,实验一基于MATLAB的二阶系统动态性能分析
- mmdetection3d的安装和使用
- Dubbo---升级Dubbo2.7.13依赖问题
- 机器学习实战——K均值
- 从词嵌入到文档距离论文笔记(From Word Embeddings To Document Distances)
- 关于电脑插上耳机后扬声器与耳机同时播放声音。
热门文章
- rust低配设置图片_西部题材生存玩法,Steam这款免费游戏疑似低配版大表哥2?...
- 6 RabbitMQ之死信队列
- node中的 url.parse()方法
- 为什么有人可以在“屎”一样混乱的几千行代码里加功能?不重构能驾驭“屎山”吗?...
- vue中调用摄像头拍照,并把拍照的base64格式转换为file传递后台
- 手机拍照对比——原来相机的软件算法是如此重要!
- 华为mate40pro有几种颜色
- 【转载】笔记:计算机_体系结构_操作系统_软件_操作系统内核_GNU_Linux_C_Python_Latex_Java_TCP/IP_MacOS_Windows这些词语的历史,关系
- 将方形图片转换成为圆形图片的工具类
- CSDN密码找回方法