javascript 十进制转十六进制（利用js实现十进制与二进制相互转换）
前沿：次随笔对应的是第十七天到第十八天的学习任务
任务需求：
<!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>
- 实现当点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内
- 转化显示后的二进制数为bin-bit中输入的数字宽度，例如dec-number为5，bin-bit为5，则转化后数字为00101
- 如果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>
有几点我们需要注意：
- 十进制数字类型为number，而二进制、八进制、十六进制字符类型为string；
- 能通过上述方式进行进制转换的十进制数字一定是非负整数；
- 对十进制数字直接转换时需要用“()”将其包裹起来，比如(111).toString(2)；
- 对数字参数进行进制转换时一定要用parseInt包裹参数再转换，否则会得不到想要的结果。
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
