jQuery实现可以计算进制转换的计算器

本文实例为大家分享了jQuery实现可以计算进制转换的计算器，供大家参考，具体内容如下

在案例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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听）

    之前发布了一款简易的计算器,今天做了一下修改,添加了键盘监听事件,不用再用鼠标点点点啦 JS代码: var yunSuan = 0;// 运算符号,0-无运算;1-加法;2-减法;3-乘法;4-除法 var change = 0;// 属于运算符后需要清空上一数值 var num1 = 0;// 运算第一个数据 var num2 = 0;// 运算第二个数据 var cunChuValue = 0;// 存储的数值 $(function() { $(".number").click(f

  • jQuery实现的简单在线计算器功能

    jQuery实现的简单在线计算器功能

    本文实例讲述了jQuery实现的简单在线计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果图: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

  • jQuery实现计算器功能

    本文实例为大家分享了jQuery实现计算器功能的具体代码,供大家参考,具体内容如下 动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script src="../jquery.min.js"></script> <st

  • 一个简单的jQuery计算器实现了连续计算功能

    一个简单的jQuery计算器,只是实现了一个连续计算的功能 <!DOCTYPE html> <html> <head> <meta charset="utf8"/> <title>Javascript计算器</title> </head> <body> <table> <tr> <td colspan="4"><input id=

  • jQuery实现可以计算进制转换的计算器

    本文实例为大家分享了jQuery实现可以计算进制转换的计算器,供大家参考,具体内容如下 在案例8的基础上增加了进制转换功能 动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script src="../jquery.min.js">&l

  • 批处理bat函数：大数字加减乘除、时期时间计算、数字排序、进制转换等

    目录 计算任意位数的正整数加法 计算1000位以内的正整数减法 计算任意位数的正整数乘法 500位内整数除法函数 计算时间差 可以处理0开头的数.重复数及200位以内的超大整数(封装) 计算指定天数 前/后 的日期及星期 进制转换(函数) 1.任意进制互转 二进制转十六进制(封装)(通过4位一段转换,可处理超大数) 十六进制转二进制(封装)(通过4位一段转换,可处理超大数) 二进制转十进制(封装)(只能处理cmd范围内的数,小巧方便代码中调用) 获取10进制数(含负数)的 原码.反码.补码(未封

  • javascript常见数字进制转换实例分析

    本文实例讲述了javascript常见数字进制转换的方法.分享给大家供大家参考,具体如下: 基本思路是先把其他进制的转化成 十进制,然后再转化.这个过程是利用parseInt函数,例如把一个16进制的数字(num)转化成10进制,num = parseInt(num,16). 如果再想把它转化成二进制的,就是如下:num.toString(2) . 这其中关于16进制的一个函数也很特别,escape函数可以将一个字符串转化成16进制的数字. 下面是一个综合的例子: var a = escape(

  • php实现36进制与10进制转换功能示例

    本文实例讲述了php实现36进制与10进制转换功能.分享给大家供大家参考,具体如下: /** * @desc im:十进制数转换成三十六机制数 * @param (int)$num 十进制数 * return 返回:三十六进制数 */ function get_char($num) { $num = intval($num); if ($num <= 0) return false; $charArr = array("0","1","2"

  • PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)

    本文实例讲述了PHP进制转换.分享给大家供大家参考,具体如下: 可以实现: 10进制转换2.8.16.36.62进制 2.8.16.36.62进制转换10进制 有点要注意下,2.8.16进制转换时,使用的是系统的自己的函数. 所以,不管怎么高精度转换值可能大于2147483646. 另外, 32进制低精转换,最大值:2147483646: 32进制高精转换,最大值:77309411327: 64进制高精转换,最大值:133143986175. jinzhi.php文件,自带演示功能. <?php

  • Java实现的进制转换工具类完整示例

    本文实例讲述了Java实现的进制转换工具类.分享给大家供大家参考,具体如下: import java.nio.charset.Charset; /** * 十六进制(简写为hex或下标16)在数学中是一种逢16进1的进位制,一般用数字0到9和字母A到F表示(其中:A~F即10~15).<br> * 例如十进制数57,在二进制写作111001,在16进制写作39.<br> * 像java,c这样的语言为了区分十六进制和十进制数值,会在十六进制数的前面加上 0x,比如0x20是十进制的

  • JS实现的进制转换，浮点数相加，数字判断操作示例

    本文实例讲述了JS实现的进制转换,浮点数相加,数字判断操作.分享给大家供大家参考,具体如下: <script> document.write("整数转换函数:parseInt(数据,底数)<br>"); document.write("10101=>" + parseInt("10101",2)+"<br>"); document.write("77=>" +

  • JavaScript进制转换实现方法解析

    本文实例讲述了JavaScript进制转换实现方法.分享给大家供大家参考,具体如下: JavaScript进制转换 十进制转为其它进制 不带参数调用toString( ),即默认toString(10), 如要以其它进制显示数字,只要作为参数传入toString( )即可,如num.toString(16). // 十进制转其他 var num = 100; console.log(num.toString(2)); // 1100100 console.log(num.toString(8))

  • Java 3种方法实现进制转换

    由其他进制转换为十进制比较简单,下面着重谈一谈十进制如何化为其他进制. 1.使用Java带有的方法Integer,最简单粗暴了,代码如下 //使用java提供的方法 //但仅局限于比较常用的二进制.八进制.十六进制 public static String trans1(int num, int radix) { if(radix == 2) return Integer.toBinaryString(num); else if(radix == 8) return Integer.toOcta

  • C语言的进制转换及算法实现教程

    1.其他进制转十进制 1.1.二进制转十进制 转换规程: 从最低位开始,将每个位上的数提取出来,乘以2的(位数-1)次方,然后求和,例如: 二进制 1011 = 1*2^0 + 1*2^1 + 0*2^2 + 1*2^3 = 1 + 2 + 0 + 8 = 11 1.2.八制转十进制 转换规则: 从最低位开始,将每个位上的数提取出来,乘以8的(位数-1)次方,然后求和,例如: 八进制 0123 = 3*8^0 + 2*8^1 + 1*8^2 = 3+16+64 = 83 1.3.十六进制转十进制

随机推荐