主要需求：十进制转二进制，可以控制指定的位数。
转化显示后的二进制数为bin-bit中输入的数字宽度。
dec-number为5，bin-bit为5，则转化后数字为00101。
如果bin-bit小于转化后的二进制本身位数，则使用原本的位数，如dec-number为5，bin-bit为2，依然输出101，但同时在console中报个错。
一、十进制转二进制，不控制位数。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>10进制转2进制，不带位数控制</title> 7 </head> 8 9 <body> 10 <input id="dec-number" type="number" placeholder="输入一个十进制非负整数"> 11 <button id="trans-btn">转化为二进制</button> 12 <p id="result">运算结果</p> 13 <script> 14 //点击事件 15 document.getElementById("trans-btn").onclick = function () { 16 var x = document.getElementById("dec-number").value; 17 dec2bin(x); 18 } 19 20 function dec2bin(decNumber) { 21 // 在这里实现你的转化方法，注意需要判断输入必须为一个非负整数 22 if (decNumber < 0) { 23 alert("请输入一个非负整数"); 24 } else { 25 var q = binary(decNumber); 26 document.getElementById("result").innerHTML = ("计算结果为：" + q); 27 } 28 } 29 30 // 实现党点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内 31 // Some coding 32 33 function binary(num) { 34 var resArry = []; 35 var xresArry = []; 36 i = 0; 37 //除2取余 38 for (; num > 0;) { 39 resArry.push(num % 2); 40 num = parseInt(num / 2); 41 i++; 42 } 43 //倒序排列 44 for (j = i - 1; j >= 0; j--) { 45 xresArry.push(resArry[j]); 46 } 47 return xresArry.join().replace(/,/g, ""); 48 } 49 </script> 50 </body> 51 52 </html>
二、十进制转二进制，控制位数。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>10进制转2进制，带位数控制</title> 7 </head> 8 9 <body> 10 <input id="dec-number" type="number" placeholder="输入一个十进制非负整数"> 11 <input id="bin-bit" type="number" placeholder="输入需要显示的位数"> 12 <button id="trans-btn">转化为二进制</button> 13 <p id="result">运算结果</p> 14 <script> 15 //点击事件 16 document.getElementById("trans-btn").onclick = function () { 17 var x = document.getElementById("dec-number").value; 18 var y = document.getElementById("bin-bit").value; 19 dec2bin(x, y); 20 } 21 22 function dec2bin(decNumber, bit) { 23 // 在这里实现你的转化方法，注意需要判断输入必须为一个非负整数 24 if (decNumber < 0) { 25 alert("请输入一个非负整数"); 26 } else { 27 var q = binary(decNumber, bit); 28 document.getElementById("result").innerHTML = ("计算结果为：" + q); 29 } 30 } 31 32 // 实现党点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内 33 // Some coding 34 35 function binary(num, Bits) { 36 var resArry = []; 37 var xresArry = []; 38 i = 0; 39 //除2取余 40 for (; num > 0;) { 41 resArry.push(num % 2); 42 num = parseInt(num / 2); 43 i++; 44 } 45 //倒序排列 46 for (j = i - 1; j >= 0; j--) { 47 xresArry.push(resArry[j]); 48 } 49 //报错 50 if (Bits < xresArry.length) { 51 console.log("控制位小于转换位数"); 52 } 53 //补0操作 54 if (Bits) { 55 for (r = xresArry.length; r < Bits; r++) { 56 xresArry.unshift("0"); 57 } 58 } 59 return xresArry.join().replace(/,/g, ""); 60 } 61 </script> 62 </body> 63 64 </html>
涉及的知识点：
十进制转二进制，除2取余，倒序排列。
push()
unshift()
join()
replace()
<input placeholder="请输入">