前端精美小Demo之---进制转换器实现

最新推荐文章于 2023-01-23 14:47:22 发布
最新推荐文章于 2023-01-23 14:47:22 发布
阅读量1.1k 收藏 3
点赞数 3
分类专栏： HTML-CSS 精美小Demo JavaScript 文章标签： 进制转换器 实用小Demo HTML-CSS JavaScript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangchengiii/article/details/79495143
版权

进制转换器实现

　　说明：支持在2~36进制之间进行任意转换，支持浮点型。完全通过HTML、CSS和JavaScript实现2~36进制之间的同步转换，其中部分样式使用bootstrap框架，js实现通过jquery实现。
　　实现代码：可到https://github.com/wangchengiii/My_BHD_Converter获取。
　　下面为同步进制转换器实现的部分效果图：
　　这里写图片描述
　　以上为进制转换器的实现界面，可通过选择需要转换数字的进制，再在转换数字的输入框中输入待转换的数字，则同步的在转化结果中显示出来，还可以随机的改变转换结果的进制。
　　以下为结果测试：
　　
　　通过同步进制转换器可以很好的解决计算机编程过程中需要解决的进制转换问题，不用再劳心费神的去笔算心算转换了^_^。
　　如果你比较懒，下面有代码哟。。。
　　1> 进制转换器.html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> 
<head> 
<title>在线进制转换</title> 
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 
<meta http-equiv="Content-Language" content="zh-CN" /> 
<script type="text/javascript" src='./js/jquery-3.2.1.js'></script>
<script type="text/javascript" src='./js/jquery-3.2.1.min.js'></script>
<link rel="stylesheet" href='./css/bootstrap.min.css'/>
<script src='./js/bootstrap.min.js'></script>


<link rel="stylesheet" type="text/css" href="./进制转换器.css">
<script type="text/javascript" src="./进制转换器.js"></script>
</head>
<body>
<!--     头部header开始    -->
<div class="box">
    <div class="header">
        <h1>进制转换器</h1> 
    </div>
    <!--     头部header结束    -->
    <div id="mainContent" class="tool_content wrapper">
        <div style="margin:20px 0 0 3rem;font-size: 18px;font-family: 楷体">支持在2~36进制之间进行任意转换，支持浮点型
        </div>
        <table>
            <tr>
                <td>
                    <div class="content_area" id="input_area">
                    <ul>
                        <li><label class="radio"><input type="radio" name='input_' value="2"/>2进制</label></li>
                        <li><label class="radio"><input type="radio" name='input_' value="4"/>4进制</label></li>
                        <li><label class="radio"><input type="radio" name='input_' value="8"/>8进制</label></li>
                        <li><label class="radio"><input type="radio" name='input_' value="10" checked="checked"/>10进制</label></li>
                        <li><label class="radio"><input type="radio" name='input_' value="16"/>16进制</label></li>
                        <li><label class="radio"><input type="radio" name='input_' value="32"/>32进制</label></li>
                        <li><select id="input_num" class="input-small">
                            <option value="2">2进制</option>
                            <option value="3">3进制</option>
                            <option value="4">4进制</option>
                            <option value="5">5进制</option>
                            <option value="6">6进制</option>
                            <option value="7">7进制</option>
                            <option value="8">8进制</option>
                            <option value="9">9进制</option>
                            <option value="10" selected>10进制</option>
                            <option value="11">11进制</option>
                            <option value="12">12进制</option>
                            <option value="13">13进制</option>
                            <option value="14">14进制</option>
                            <option value="15">15进制</option>
                            <option value="16">16进制</option>
                            <option value="17">17进制</option>
                            <option value="18">18进制</option>
                            <option value="19">19进制</option>
                            <option value="20">20进制</option>
                            <option value="21">21进制</option>
                            <option value="22">22进制</option>
                            <option value="23">23进制</option>
                            <option value="24">24进制</option>
                            <option value="25">25进制</option>
                            <option value="26">26进制</option>
                            <option value="27">27进制</option>
                            <option value="28">28进制</option>
                            <option value="29">29进制</option>
                            <option value="30">30进制</option>
                            <option value="31">31进制</option>
                            <option value="32">32进制</option>
                            <option value="33">33进制</option>
                            <option value="34">34进制</option>
                            <option value="35">35进制</option>
                            <option value="36">36进制</option>
                            </select></li>
                        </ul>
                        <div class="input-group">
                            <span class="input-group-addon">转换数字</span>
                            <input id="input_value" type="text" value="" onpropertychange="px()" onchange="px()" oninput="px()" size="75" class="form-control num_value" placeholder="在此输入待转换数字"/>
                        </div>
                        </div>
                    </td>
                </tr>
                <tr><td>
                    <div class="content_area" id="output_area">
                    <ul>
                        <li><label class="radio"><input type="radio" name='output_' value="2"/>2进制</label></li>
                        <li><label class="radio"><input type="radio" name='output_' value="4"/>4进制</label></li>
                        <li><label class="radio"><input type="radio" name='output_' value="8"/>8进制</label></li>
                        <li><label class="radio"><input type="radio" name='output_' value="10"/>10进制</label></li>
                        <li><label class="radio"><input type="radio" name='output_' value="16" checked="checked"/>16进制</label></li>
                        <li><label class="radio"><input type="radio" name='output_' value="32"/>32进制</label></li>
                        <li>
                            <select id="output_num" onchange="px(1);" class="input-small">
                                <option value="2">2进制</option>
                                <option value="3">3进制</option>
                                <option value="4">4进制</option>
                                <option value="5">5进制</option>
                                <option value="6">6进制</option>
                                <option value="7">7进制</option>
                                <option value="8">8进制</option>
                                <option value="9">9进制</option>
                                <option value="10">10进制</option>
                                <option value="11">11进制</option>
                                <option value="12">12进制</option>
                                <option value="13">13进制</option>
                                <option value="14">14进制</option>
                                <option value="15">15进制</option>
                                <option value="16" selected>16进制</option>
                                <option value="17">17进制</option>
                                <option value="18">18进制</option>
                                <option value="19">19进制</option>
                                <option value="20">20进制</option>
                                <option value="21">21进制</option>
                                <option value="22">22进制</option>
                                <option value="23">23进制</option>
                                <option value="24">24进制</option>
                                <option value="25">25进制</option>
                                <option value="26">26进制</option>
                                <option value="27">27进制</option>
                                <option value="28">28进制</option>
                                <option value="29">29进制</option>
                                <option value="30">30进制</option>
                                <option value="31">31进制</option>
                                <option value="32">32进制</option>
                                <option value="33">33进制</option>
                                <option value="34">34进制</option>
                                <option value="35">35进制</option>
                                <option value="36">36进制</option>
                            </select>
                        </li>
                    </ul>
                    <div class="input-group">
                            <span class="input-group-addon">转换结果</span>
                            <input id="output_value" type="text" value="" onpropertychange="px()" onchange="px()" oninput="px()" size="75" class="form-control num_value" placeholder="转换结果"/>
                        </div>
                    </div>
                    </td>
                </tr>
            </table>
</div>
</div>
</body>
</html>

　　2> 进制转换器.js代码

// 第一段
$(document).ready(function() {
    $('[name="input_"]').click(function (){
        $('#input_num').val($(this).val());
        $('#input_value').val("");
        $('#output_value').val("");
    });
    $('[name="output_"]').click(function (){
        $('#output_num').val($(this).val());
        px(1);
    });
    $("#input_num").change(function(){
        $("#input_area input").removeAttr("checked");
        var val = $(this).val();
        $("#input_area input[value="+val+"]").attr("checked","checked");
        $('#input_value').val("");
        $('#output_value').val("");
    });
    $("#output_num").change(function(){
        $("#output_area input").removeAttr("checked");
        var val = $(this).val();
        $("#output_area input[value="+val+"]").attr("checked","checked");
        px(1);
    });
});
function pxparseFloat(x,y){
    x=x.toString();
    var num=x;
    var data=num.split(".");
    var you=data[1].split(""); //将右边转换为数组 得到类似 [1,0,1]
    var sum=0;  //小数部分的和
    for(var i=0;i<data[1].length;i++){
        sum+=you[i]*Math.pow(y,-1*(i+1))
    }
    return parseInt(data[0],y)+sum;
}
function zhengze(x){
    var str;
    x=parseInt(x);
    if(x<=10){
        str=new RegExp("^[+\\-]?[0-"+(x-1)+"]*[.]?[0-"+(x-1)+"]*$","gi");
    }else{
        var letter="";
        switch(x){
            case 11:letter="a";break;
            case 12:letter="b";break;
            case 13:letter="c";break;
            case 14:letter="d";break;
            case 15:letter="e";break;
            case 16:letter="f";break;   
            case 17:letter="g";break;
            case 18:letter="h";break;
            case 19:letter="i";break;
            case 20:letter="j";break;
            case 21:letter="k";break;
            case 22:letter="l";break;
            case 23:letter="m";break;
            case 24:letter="n";break;
            case 25:letter="o";break;
            case 26:letter="p";break;   
            case 27:letter="q";break;
            case 28:letter="r";break;
            case 29:letter="s";break;
            case 30:letter="t";break;
            case 31:letter="u";break;
            case 32:letter="v";break;
            case 33:letter="w";break;
            case 34:letter="x";break;
            case 35:letter="y";break;
            case 36:letter="z";break;   
        }
        str=new RegExp("^[+\\-]?[0-9a-"+letter+"]*[.]?[0-9a-"+letter+"]*$","gi");
    }       
    return str;
}
var n=50;
var shurukuang="";
var flag="";
function px(y){
    if($("#input_value").val()!=flag||y){
        flag=$("#input_value").val();
        if($("#input_num").selectedIndex<n){
            $("#input_value").val("");
            $("#output_value").val("");
        }else{
            var px00=$("#input_value").val();
            var px0=px00.match(zhengze($("#input_num").val()));
            if(px0){
                if(px0[0].indexOf(".")==-1){
                    var px1=parseInt(px0,$('#input_num').val());
                }else{
                    var px1=pxparseFloat(px0,$('#input_num').val());
                }
                px1=px1.toString($('#output_num').val());
                $("#output_value").val(px1);
                shurukuang=px00;
            }else{
                $("#input_value").val(shurukuang);
            }
        }
        n=$("#input_num").selectedIndex;   
    }
    if($("#input_value").val()==""){
        $("#output_value").val("");
  }
}

　　3> 进制转换器.css代码

/*head的css*/
.box{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin:7rem auto;
    border:1px solid #06f;
    width:48%;height:350px;
}
.header{text-align: center;background-color: #06a;line-height: 1rem;width: 100%;}
.radio{font-weight: 300;font-size: 13px;}
.tool_content ul li{width:80px;height:30px;display:inline-block;}
.tool_content a{outline: none;}
.content_area{margin:20px 0 0 0;font-size: 13px;}
.input-group{margin-left: 2rem;}

　　当然相关的bootstrap和jquery相关资源包就需要自己搞定了。
　　
　　GitHub路径：https://github.com/wangchengiii/My_BHD_Converter。
　　
　　有什么问题和想法，咨询我哦！

萌主_iii
关注
专栏目录
GitHub热门开源项目-2024版
生活在别处
07-15 749
前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。中英文敏感词、语言检测、中外手机/电话归属地/运营商查询、名字推断性别、手机号抽取、身份证抽取、邮箱抽取、中日文人名库、中文缩写库、拆字词典、词汇情感值、停用词、反动词表、暴恐词表、繁简体转换、英文模拟中文发音、汪峰歌词生成器、职业名称词库、同义词库、反义词库、否定词库、汽…互联网 Java 工程师进阶知识完全扫盲：涵盖高并发、分布式、高可用、微服务、海量数据处理等领域知识。各取所需，高效学习。
[前端案例]百行代码实现炫酷时钟
爱编程的糖小猫之博客
11-25 5384
百余行代码实现炫酷时钟 电脑右下角的时间是不是早就看腻了，字小而且样式单调，今天，就用百余行HTML + CSS + JavaScript代码实现一个网页版的炫酷时钟，当然也可以使用Electron封装前端代码，实现桌面版的炫酷时钟应用程序，话不多说，直接上效果图： 1.构造盒子雏形 在HTML标签中，我们可以把div比喻成一个盒子，在div标签中还可以嵌套div标签，这就好比大盒子中还装着一个或若干个小的盒子。每一个盒子都有一个边框(border)，盒子内容与边框之间的距离称之为内边距(paddi
进制转换demo
08-22
java编写的进制转换demo，可以转十进制二进制八进制十六进制
Web前端：JavaScript基础篇之进制转换
XZ85201的博客
01-06 914
首先需要明确知道进制转换是一种计数的方式，也不代表只有二进制、八进制、十进制、十六进制！比如时分秒的流失进制，天是二十四进制等等！ 我们习惯于十进制（0~9）的计数规则，但是计算机用的是二进制（0~1）的计数规则。要理解陈旭时，必须先理解它们之间的进制转换，才可以理解为什么要这样进行！
进制转化器。
Wanghao_666的博客
08-25 390
能够进行二，八，十，十六进制之间的转化。 #include &lt;stdio.h&gt; #include &lt;string.h&gt; void turn1() { int a,b[30],c,i=0,d; printf("请输入十进制数:"); scanf("%d",&amp;a); while(a!=0) { b[i]=a%...
3GPConverter_Demo 视频转换器
10-29
支持wmv`rmvb等视频文件转换成3gp格式
demo链接转换工具
12-26
支持快车，旋风链接转换为迅雷链接工具，欢迎下载。
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6428
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
总结前端常用的网址
weixin_44366185的博客
01-14 9101
Bookmarks Bookmarks 手机收藏 收藏栏 网址大全 百度 百度翻译在线_百度搜索 框架 MUI-最接近原生APP体验的高性能前端框架 SUI Mobile 纯CSS绘制三角形（各种角度）_基础教程_脚...
java串口通讯，可实现javaWeb页面同时控制多个串口，有demo
weixin_39442506的博客
09-11 4389
java串口通讯，可实现javaWeb页面控制串口，调用串口数据，发送串口指令 前言 随着UI越来越强大，外观越来越精美酷炫，无论是做软件的还是客户，都越来越喜欢web制作的页面。今年有个项目，客户指定要用Web做工控系统，让工控系统不再死板枯燥，要美观大方跟上时代潮流。本来计划是让.net工程师给我们写个控件了事，我们也懒得去研究什么串口通讯、485协议啥的，但因为一系列原因与.net工程师解除...
格式转换demo
03-20
这是一个简单的QQ聊天程序，分为服务器和客户端
WIN32打造自绘进制转换器
03-30
这是一个用WIN32做的进制转换器，十进制和十六进制的转换。 其实功能不是重点，这个DEMO重点是展示如果用WIN32做出好看的界面。 里面的代码可能稍微有点多，不过我都尽量注释了的，希望能对新手朋友们有所帮助！ 最后， C/C++/VC/MFC交流学习 大家有不明白的也可以在群里问我，我也会在群里，把这里面用到的界面技术等分开的详细的给各位 用很多小DEMO分解讲解下的！
js脚本实现的进制转换工具
09-01
使用javascript脚本实现的简单进制转换工具，仍有缺陷，欢迎一起完善
java编写的进制转换器（带图形界面）
12-11
一个用java写的进制转换器，有图形界面。 主要是调用java的lang类进行转换。
时间转换函数demo
08-06
时间转换demo，能计算用户浏览器时区，时区时间转换，计算昨天、今天、前天
机器学习数据转换 - 自定义转换器、转换流水线demo 特征缩放
Dave_lzw的博客
07-11 580
from sklearn.pipeline import Pipeline from sklearn.preprocessing import StandardScaler from sklearn.base import BaseEstimator , TransformerMixin rooms_ix , bedrooms_ix , population_ix , household_ix = 3 , 4 , 5 , 6 # 自定义转换器：添加组合后的属性 class CombinedAttri.
各种进制的相互转换【进制转换器】【进制转换】【算法】
最新发布
在猴站学算法
01-23 1246
通过两种方式进行各种进制的相互转换，十分详细、容易理解。
万能进制转换器
11-11
万能转换工具，我感觉还不错 发布下！
大前端技术选型：Native、React-Native、Flutter、微信小程序对比
"大前端产品选型.pptx" 是一份关于大前端技术选型的演示文稿，主要探讨了在开发跨平台移动应用时如何选择适合的技术框架，包括Native原生iOS、Android、React-Native、Flutter以及微信小程序。这份文档由JohnChen在...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值