原生代码
主要需求:十进制转二进制,可以控制指定的位数。
转化显示后的二进制数为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) //十六进制转八进制