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中关于Ajax的几个常用的函数
Jul 17 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
php摘要生成函数(无乱码)
2012/02/04 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python使用mailbox打印电子邮件的方法
2015/04/30 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
Python+django实现简单的文件上传
2016/08/17 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Python解析微信dat文件的方法
2020/11/30 Python
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
《谁的本领大》教后反思
2014/04/25 职场文书
营销总监岗位职责
2014/09/16 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
学生检讨书
2015/01/27 职场文书
物业保洁员管理制度
2015/08/05 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL