假期在百度前端学院(一个非常优秀的免费学习平台)零基础学习前端,上面有整套的学习路线,可以边看边做,在做的过程中可以发现很多意想不到的问题,改正错误的同时也在积累经验,今天就被一道十进制向二进制转化的题蒙住了,由此发现,JavaScript虽然是一种解释型语言,也是有很多语法规范和限制的。
不再多说话,先把代码贴出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
<script>
function greetings() {
var time = new Date();
var timeNow = time.getHours(); //得到当前时间
if(timeNow<12)
alert("Good morning!");
else{
if(timeNow<18)
alert("Good Afternoon!");
else
alert("Good evening!");
}
}
</script>
</head>
<body onload='greetings()'>
<input id="dec-number" type="number" placeholder="输入一个十进制非负实数"><br/>
<input id="bin-bit" type="number" placeholder="输入转化后二进制数字位数"><br/>
<button id="trans-btn">转化为二进制</button>
<p id="result">运算结果</p>
<script>
//十进制转换成二进制
function dec2bin(decNumber) {
// 在这里实现你的转化方法,注意需要判断输入必须为一个非负实数
var numberString;
var numberArray = [];
/*传入的参数是一个实数,因为实数的整数部分和小数部分转化为二进制的方法不太一样,
因此要分开处理,先把此实数转化为字符串,用小数点进行分隔*/
var newNumber = decNumber.toString().split(".");
var integer = Number(newNumber[0]); //整数部分
var decimals = Number('0.' + newNumber[1]); //小数部分
var binBit = document.getElementById("bin-bit").value;
if(decNumber<0)
{
alert("输入的数字小于零,不符合要求,请重新输入");
document.getElementById("dec-number").focus();
}
else {
while (integer >0) {
var number1 = integer % 2;
numberArray.unshift(number1);
integer = Math.floor(integer/2);
}
if (decimals !== 0)
numberArray.push(".");
while (decimals !== 0) {
var dNumber = decimals * 2;
var number2 = dNumber.toString().split(".")[0]; //方法1:
/*因为小数部分肯定介于0~2之间,且小于2,
所以可使用Math.floor()向下取整,得到0或者1.*/
// var number2 = Math.floor(dNumber); //方法2,
numberArray.push(number2);
decimals = dNumber - number2;
}
}
/*sLength的位置很重要,因为numberArray的长度在此前是变化的,若在函数开始时
获取,则因为它初始化为[]而产生错误*/
var sLength = numberArray.length;
if(binBit>sLength) {
for (var i = 0; i < (binBit-sLength); i++)
{
numberArray.unshift('0');
}
}
else {
alert("The dec-number is larger than bin-bit");
}
numberString = numberArray.join("");
document.getElementById("result").innerHTML = numberString;
}
// 实现党点击转化按钮时,将输入的十进制数字转化为二进制,并显示在result的p标签内
// Some coding
function getValue(){
var value1 = document.querySelector('input').value;
dec2bin(value1);
}
var btn = document.getElementById("trans-btn");
btn.addEventListener('click',getValue); //添加时间监听器,点击按钮时触发事件
</script>
</body>
</html>
该注意的事项大都已经注释在代码里面了,作为学习的总结吧。