JS十进制转二进制

原生代码

主要需求:十进制转二进制,可以控制指定的位数。

转化显示后的二进制数为bin-bit中输入的数字宽度。
dec-number为5,bin-bit为5,则转化后数字为00101。
如果bin-bit小于转化后的二进制本身位数,则使用原本的位数,如dec-number为5,bin-bit为2,依然输出101,但同时在console中报个错。

一、十进制转二进制,不控制位数。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>10进制转2进制,不带位数控制</title>
</head>

<body>
     <input id="dec-number" type="number" placeholder="输入一个十进制非负整数">
     <button id="trans-btn">转化为二进制</button>
     <p id="result">运算结果</p>
     <script>
         //点击事件
         document.getElementById("trans-btn").onclick = function () {
             var x = document.getElementById("dec-number").value;
             dec2bin(x);
         }
 
         function dec2bin(decNumber) {
             // 在这里实现你的转化方法,注意需要判断输入必须为一个非负整数
             if (decNumber < 0) {
                 alert("请输入一个非负整数");
             } else {
                 var q = binary(decNumber);
                 document.getElementById("result").innerHTML = ("计算结果为:" + q);
             }
         }
 
         // 实现党点击转化按钮时,将输入的十进制数字转化为二进制,并显示在result的p标签内
         // Some coding
 
         function binary(num) {
             var resArry = [];
             var xresArry = [];
             i = 0;
             //除2取余
             for (; num > 0;) {
                 resArry.push(num % 2);
                 num = parseInt(num / 2);
                 i++;
             }
             //倒序排列
             for (j = i - 1; j >= 0; j--) {
                 xresArry.push(resArry[j]);
             }
             return xresArry.join().replace(/,/g, "");
         }
     </script>
 </body>
 
 </html>

二、十进制转二进制,控制位数。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>10进制转2进制,带位数控制</title>
</head>

<body>
     <input id="dec-number" type="number" placeholder="输入一个十进制非负整数">
     <input id="bin-bit" type="number" placeholder="输入需要显示的位数">
     <button id="trans-btn">转化为二进制</button>
     <p id="result">运算结果</p>
     <script>
         //点击事件
         document.getElementById("trans-btn").onclick = function () {
             var x = document.getElementById("dec-number").value;
             var y = document.getElementById("bin-bit").value;
             dec2bin(x, y);
         }
 
         function dec2bin(decNumber, bit) {
             // 在这里实现你的转化方法,注意需要判断输入必须为一个非负整数
             if (decNumber < 0) {
                 alert("请输入一个非负整数");
             } else {
                 var q = binary(decNumber, bit);
                 document.getElementById("result").innerHTML = ("计算结果为:" + q);
             }
         }
 
         // 实现党点击转化按钮时,将输入的十进制数字转化为二进制,并显示在result的p标签内
         // Some coding
 
         function binary(num, Bits) {
             var resArry = [];
             var xresArry = [];
             i = 0;
             //除2取余
             for (; num > 0;) {
                 resArry.push(num % 2);
                 num = parseInt(num / 2);
                 i++;
             }
             //倒序排列
             for (j = i - 1; j >= 0; j--) {
                 xresArry.push(resArry[j]);
             }
             //报错
             if (Bits < xresArry.length) {
                 console.log("控制位小于转换位数");
             }
             //补0操作
             if (Bits) {
                 for (r = xresArry.length; r < Bits; r++) {
                     xresArry.unshift("0");
                 }
             }
             return xresArry.join().replace(/,/g, "");
         }
     </script>
 </body>
 
 </html>

涉及的知识点:

十进制转二进制,除2取余,倒序排列。

push()

unshift()

join()

replace()

非原生代码

十进制转换为二进制:

var num = 100;
console.log(num.toString(2));

toString()方法可把一个 Number 对象转换为一个字符串,并返回结果。

语法
NumberObject.toString(radix);

其中,radix为可选。规定表示数字的基数,使 2 ~ 36 之间的整数。若省略该参数,则使用基数 10。但是要注意,如果该参数是 10 以外的其他值,则 ECMAScript 标准允许实现返回任意值。

返回值

数字的字符串。例如,当 radix 为 2 时,NumberObject 会被转换为二进制值表示的字符串。

抛出

当调用该方法的对象不是 Number 时抛出 TypeError 异常。

二进制转十进制:

var num = 1100100;
console.log(parseInt(num,2));
parseInt() 函数可解析一个字符串,并返回一个整数。

语法

parseInt(string, radix);
其中,string为必需。要被解析的字符串。radix为可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0,则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头,将以 16 为基数。如果该参数小于 2 或者大于 36,则parseInt() 将返回 NaN。

返回值

返回解析后的数字。

说明

当参数 radix 的值为 0,或没有设置该参数时,parseInt() 会根据 string 来判断数字的基数。
举例,如果 string 以 “0x” 开头,parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头,那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果 string 以 1 ~ 9 的数字开头,parseInt() 将把它解析为十进制的整数。

提示和注释

注释:只有字符串中的第一个数字会被返回。
注释:开头和结尾的空格是允许的。
提示:如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN。

parseInt(num,8);   //八进制转十进制
parseInt(num,16);   //十六进制转十进制
parseInt(num).toString(8)  //十进制转八进制
parseInt(num).toString(16)   //十进制转十六进制
parseInt(num,2).toString(8)   //二进制转八进制
parseInt(num,2).toString(16)  //二进制转十六进制
parseInt(num,8).toString(2)   //八进制转二进制
parseInt(num,8).toString(16)  //八进制转十六进制
parseInt(num,16).toString(2)  //十六进制转二进制
parseInt(num,16).toString(8)  //十六进制转八进制
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值