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 Validate 校验多个相同name的方法
May 18 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
jQuery实现动态操作table行
Nov 23 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
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
javascript中传统事件与现代事件
2015/06/23 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
Python登录注册验证功能实现
2018/06/18 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
python批量爬取下载抖音视频
2019/06/17 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
python如何获取apk的packagename和activity
2020/01/10 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
Python3读写ini配置文件的示例
2020/11/06 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
最新茶叶店创业计划书
2014/01/14 职场文书
一月红领巾广播稿
2014/02/11 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
自查自纠整改报告
2014/11/06 职场文书
PHP中->和=>的意思
2021/03/31 PHP
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
vue使用element-ui按需引入
2022/05/20 Vue.js