js to realize the conversion from decimal real number to binary

During the holiday, in Baidu front-end College (a very excellent free learning platform), there is a whole set of learning routes on the front-end of zero basic learning. You can do it while watching. In the process of doing it, you can find many unexpected problems. While correcting the mistakes, you are also accumulating experience. Today, you are covered by a decimal to binary conversion problem. Therefore, although JavaScript is An interpretative language also has many grammatical norms and restrictions.

Stop talking. Post the code first.

<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
        function greetings() {
            var time = new Date();
            var timeNow = time.getHours();    //Get current time
                alert("Good morning!");
                    alert("Good Afternoon!");
                    alert("Good evening!");
<body onload='greetings()'>
<input id="dec-number" type="number" placeholder="Enter a decimal nonnegative real number"><br/>
<input id="bin-bit" type="number" placeholder="Enter the number of binary digits after conversion"><br/>
<button id="trans-btn">Convert to binary</button>
<p id="result">Operation result</p>
    //Decimal to binary
    function dec2bin(decNumber) {
        // In order to realize your conversion method, you need to judge that the input must be a non negative real number

        var numberString;
        var numberArray = [];
        /*The parameter passed in is a real number, because the integer part of the real number and the decimal part are not converted to binary in the same way,
        Therefore, to separate processing, first convert this real number to a string and separate it with a decimal point*/
        var newNumber = decNumber.toString().split(".");
        var integer = Number(newNumber[0]);                     //Integral part
        var decimals = Number('0.' + newNumber[1]);             //Fractional part
        var binBit = document.getElementById("bin-bit").value;
            alert("The number entered is less than zero, which does not meet the requirements. Please re-enter");
        else {
            while (integer >0) {
                var number1 = integer % 2;
                integer = Math.floor(integer/2);
            if (decimals !== 0)
            while (decimals !== 0) {
                var dNumber = decimals * 2;
                var number2 = dNumber.toString().split(".")[0];   //Method 1:
                /*Because the decimal part must be between 0 and 2 and less than 2,
                 So you can use Math.floor() to round down to get 0 or 1*/
                // var number2 = Math.floor(dNumber); / / method 2,
                decimals = dNumber - number2;

        /*sLength The position of is important because the length of numberArray has changed before, if at the beginning of the function
        Get, an error occurred because it was initialized to []*/
        var sLength = numberArray.length;
        if(binBit>sLength) {
            for (var i = 0; i < (binBit-sLength); i++)
        else {
            alert("The dec-number is larger than bin-bit");
            numberString =  numberArray.join("");
            document.getElementById("result").innerHTML = numberString;

    // When the implementation party clicks the conversion button, the input decimal number will be converted to binary and displayed in the p tag of the result
    // Some coding
    function getValue(){
        var value1 = document.querySelector('input').value;
    var btn = document.getElementById("trans-btn");
    btn.addEventListener('click',getValue);     //Add time listener, trigger event when clicking button

Most of the notes have been annotated in the code, as a summary of learning.

Tags: less Javascript ECMAScript

Posted on Mon, 06 Jan 2020 09:54:55 -0800 by bigscanner