javascript 十进制转十六进制（利用js实现十进制与二进制相互转换）(1)

前沿：次随笔对应的是第十七天到第十八天的学习任务

任务需求：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IFE ECMAScript</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> function dec2bin(decNumber) { // 在这里实现你的转化方法，注意需要判断输入必须为一个非负整数 // 这里是上一个任务的实现 } // 实现党点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内 // 新的需求是，转化显示后的二进制数为bin-bit中输入的数字宽度，例如 // dec-number为5，bin-bit为5，则转化后数字为00101 // 如果bin-bit小于转化后的二进制本身位数，则使用原本的位数，如dec-number为5，bin-bit为2，依然输出101，但同时在console中报个错 // Some coding </script> </body> </html>

  1. 实现当点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内
  2. 转化显示后的二进制数为bin-bit中输入的数字宽度，例如dec-number为5，bin-bit为5，则转化后数字为00101
  3. 如果bin-bit小于转化后的二进制本身位数，则使用原本的位数，如dec-number为5，bin-bit为2，依然输出101，但同时在console中报个错

首先我们要了解二进制、八进制、十进制、十六进制之间的关联与差异，这些知识是之前学习的，在这里就不做过多解释了。

然后我们看一下相互转换需要用到的方法，以下面代码为例

// 十进制转换成二进制（八进制或十六进制） var num = 111; num.toString(2); //转换成二进制 num.toString(8); //转换成八进制 num.toString(16); //转换成十六进制 //二进制（八进制或十六进制）转换成十进制 var num1 = "111"; parseInt(num1,2); //二进制转换成十进制 parseInt(num1,8); //八进制转换成十进制 parseInt(num1,16); //十六进制转换成十进制

最后我们来通过代码实现需求。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IFE ECMAScript</title> </head> <body> <p>通过除2取余的方法来把十进制整数转化为二进制</p> <input id="dec-number" type="number" placeholder="输入一个十进制非负整数"> <input id="bin-bit" type="number" placeholder="输入转化后二进制数字位数"> <button id="trans-btn">转化为二进制</button> <p id="result">运算结果</p> <script> var transBtn = document.getElementById("trans-btn"), result = document.getElementById("result"); function dec2bin(decNumber) { // 在这里实现你的转化方法，注意需要判断输入必须为一个非负整数 if(decNumber%1===0 && decNumber>=0){ var dec2 = parseInt(decNumber).toString(2), binBit = document.getElementById("bin-bit").value; // 判断转换后的位数与设定位数之间的关系 if(dec2.length<=binBit) { var complete=""; for (let i=0;i<(binBit-dec2.length);i ){ complete ="0"; } dec2 = complete dec2; }else { console.log("二进制位数大于设定的位数") } result.innerHTML = "运算结果:" dec2; }else { alert("请输入非负整数！"); } } // 实现党点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内 // Some coding transBtn.onclick = function(){ var decNum = document.getElementById("dec-number").value; dec2bin(decNum); } </script> </body> </html>

有几点我们需要注意：

  1. 十进制数字类型为number，而二进制、八进制、十六进制字符类型为string；
  2. 能通过上述方式进行进制转换的十进制数字一定是非负整数；
  3. 对十进制数字直接转换时需要用“()”将其包裹起来，比如(111).toString(2)；
  4. 对数字参数进行进制转换时一定要用parseInt包裹参数再转换，否则会得不到想要的结果。

,