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


Posted in jQuery onOctober 19, 2020

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

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

动画效果:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery遮罩层实例讲解
May 11 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery实现计算器功能
Oct 19 #jQuery
jQuery实现推拉门效果
Oct 19 #jQuery
jQuery实现图片切换效果
Oct 19 #jQuery
jQuery实现回到顶部效果
Oct 19 #jQuery
jQuery实现放大镜案例
Oct 19 #jQuery
jQuery插件实现图片轮播效果
Oct 19 #jQuery
jquery插件实现轮播图效果
Oct 19 #jQuery
You might like
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
php下获取http状态的实现代码
2014/05/09 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
python连接字符串的方法小结
2015/07/13 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
python跳出双层for循环的解决方法
2019/06/24 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
继承公证书
2014/04/09 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
党小组考察意见
2015/06/02 职场文书
高一作文之暖冬
2019/11/09 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL