进制转换器实现

　　说明：支持在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。
　　
　　有什么问题和想法，咨询我哦！

前端精美小Demo之---进制转换器实现相关推荐

小贺同学的进制转换器-微信小程序
小程序已上线:小贺同学的进制转换器 index.wxml   <view id='display'>& ...
android进制之间的转换器,一个Android平台的16进制转换器
<一个Android平台的16进制转换器>由会员分享,可在线阅读,更多相关<一个Android平台的16进制转换器(1页珍藏版)>请在人人文库网上搜索. 1.一个An droi ...
[C++]实现简单无符号整数进制转换器
大家好啊,今天为大家带来的是自己实现的用C++编写的简单进制转换器,用于10进制数和8进制数,16进制数,2进制数的相互转换. 首先,说明一下什么是进制.n进制就是一种用来表示数值的方法,n进制,顾名 ...
寒假用C写了个“万能进制转换器”
漫漫的寒假是无聊的,在家没事,遍用C写了个"万能进制转换器"的小程序,虽然叫万能,但还是不能转换带小数点的.没办法,新手嘛,能力有限·····望大家不要见笑..有兴趣的我们一 ...
用java编写进制转换器_JAVA 简单进制转换器
JAVA作业写了个进制转换器...写出来的东西还蛮怪的 /* * Author:graykido * Coding:GBK * */ package Caculater; import javafx. ...
java进制转换界面,java进制转换器图形用户界面十进制及其相反数诀别转化为二，四，八，十六进制...
java进制转换器图形用户界面十进制及其相反数分别转化为二,四,八,十六进制 package com.rgy.Test; import java.awt.Color; import java.aw ...
C++ 进制转换器：二进制、十进制、十六进制
做了一个C++进制转换器,支持10转2.10转16.2转10.16转10.10转2.2转16,解析都写在代码里哦! #include <bits/stdc++.h> using names ...
进制转换器java程序_Java实现复杂的进制转换器功能示例
本文实例讲述了Java实现复杂的进制转换器功能.分享给大家供大家参考,具体如下: 这是用java写的进制转换器,包括10.2.8.16进制之间共12种的相互转换.输入一个要转换的数之后,按提示选择所采 ...
进制转换器的c代码实现
1.很久没有更新博客了这次想要记录分享一下在这段学习过程中实现的进制转换器 c语言代码里面运用到了一些数据结构和递归的相关知识也算是一个简单的综合运用吧 2.核心思想是将一切进制转换为10进制 ...

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

进制转换器实现

前端精美小Demo之---进制转换器实现相关推荐

最新文章

热门文章