四种常见小程序_jQuery完成可以核算进制转换的核

发布时间:2021-01-05 10:20 作者:jianzhan

摘要: jQuery完成能够测算进制变换的测算器 本文关键为大伙儿详尽详细介绍了jQuery完成能够测算进制变换的测算器,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价值,很

jQuery实现可以计算进制转换的计算器       这篇文章主要为大家详细介绍了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;

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

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


  • 定制网站建设的流程和好

    网站的建设早就越来越越越普遍的了,便于更强的给大家提供网站的建设,有很多模版类型的网立在可以供大伙儿选择。但是,还是有很多的人要选择定制网站的建设,显而易见的,定

  • 有哪些自助建站的网络服

    自助式建网站服务平台能够依据该服务平台的协作实例,模版设计风格,实际操作简单水平,款式是多少去分辨,自然前提条件如果尽量小成本费,比如22官方网站建网站最先完全

  • 网管理自助洗车一体机

    联接互联网管理方法方式自助式式洗车一体机 宇脉红帽沿自助式式洗车载一体机,独立自主创新高新科技高新科技简单生活起居,单独商品产品研发第五代自助式式洗车载一体机,

  • 如何自助申请ICP?

    ICP资质证书验证好像是我国特点之一。目前代理商价钱被炒到三万至8万不一的价钱。这一件事儿难以令人了解,做为开发设计者,做了手机软件只是以便发布“门票费”就必须接近十万

  • 亚马逊运营如何自助创建

    不久前amazon发布了自助式建立限时秒杀的作用。要了解,过去要报名参加个限时秒杀,必须递交申请办理给顾客主管(沒有顾客主管的商家,悄悄痛哭很多年),再历经很多時间等候审