百度前端学院。第十七天到第十八天，“如果”可以“重来”

最新推荐文章于 2021-11-24 00:48:53 发布

走在路上的黄鸡鸡

最新推荐文章于 2021-11-24 00:48:53 发布

阅读量395

点赞数

分类专栏： html js 文章标签：百度前端学院学习

本文链接：https://blog.csdn.net/weixin_39571703/article/details/81408099

版权

js 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

一、编码

阅读通过除2取余的方法来把十进制整数转化为二进制，然后做一个小练习，基于下面代码，完成该转化算法，并实现页面交互

编码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScript</title>
</head>
<body>        
    <input id="dec-number" type="number" placeholder="输入一个十进制非负整数">
    <button id="trans-btn">转化为二进制</button>
    <p id="result">运算结果</p>
    <script>

function dec2bin(decNumber) {
    // 在这里实现你的转化方法，注意需要判断输入必须为一个非负整数
}

// 实现党点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内
// Some coding

    </script>
</body>
</html>

需求说明

实现党点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内

编码实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScript</title>
</head>
<body>        
    <input id="dec-number" type="number" placeholder="输入一个十进制非负整数">
    <button id="trans-btn">转化为二进制</button>
    <p id="result">运算结果</p>
    <script>

function dec2bin(decNumber) {
    // 在这里实现你的转化方法，注意需要判断输入必须为一个非负整数
    var y="";
    if(isNaN(decNumber)||decNumber<0){
        console.log(decNumber);
        
        alert("请输入合法数字");
        return false;
    }
    else{
        decNumber=parseInt(decNumber);
        var num2 = decNumber.toString(2);
        return num2;
    }
}

// 实现党点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内
    document.getElementById("trans-btn").onclick = function(){
        var num = dec2bin(document.getElementById("dec-number").value);
        document.getElementById("result").innerHTML = num;
        
    }
// Some coding

    </script>
</body>
</html>

二、编码

基于上一个任务，继续完成更多需求

<!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>

需求说明

新的需求是，转化显示后的二进制数为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>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) {
    // 在这里实现你的转化方法，注意需要判断输入必须为一个非负整数
    // 这里是上一个任务的实现
    var y="";
    if(isNaN(decNumber)||decNumber<0){
        console.log(decNumber);
        
        alert("请输入合法数字");
        return false;
    }
    else{
        decNumber=parseInt(decNumber);
        var num2 = decNumber.toString(2);
        return num2;
    }
}

// 实现党点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内
document.getElementById("trans-btn").onclick = function(){
        var num = dec2bin(document.getElementById("dec-number").value);

        //获取数字二进制长度
        var numlength = num.length;


        // 新的需求是，转化显示后的二进制数为bin-bit中输入的数字宽度，例如
        // dec-number为5，bin-bit为5，则转化后数字为00101
        var length = document.getElementById("bin-bit").value;       
        // 当二进制长度小于要求长度时，前面+0;
        while(numlength<length){   
            num ="0"+num;
            numlength++;
        }
        document.getElementById("result").innerHTML = num;

        // 如果bin-bit小于转化后的二进制本身位数，则使用原本的位数，如dec-number为5，bin-bit为2，依然输出101，但同时在console中报个错
        if(numlength>length){
            console.log("警告！！！bin-bit小于转化后的二进制本身位数");
        }
    }

// Some coding

    </script>
</body>
</html>

三、编码

3的小游戏，练习使用循环和条件语句，实现如下需求：

从1到100，以此在console输出各数字，但是，当数字为3的倍数或者含有3的时候，输出“PA”
比如：1,2,PA,4,5,PA,……,11,PA,PA,14,PA……

编码

<script>
    function papa(){
        var b=100;
        for(var i=1;i<b;i++){
            // i%3==0||String(i).indexOf("3")>=0
            if(i%3==0||String(i).indexOf("3")>=0){
                console.log("PA");
                continue;
            }
            else{
                console.log(i);
            }
        }
    }

四、编码

小练习，练习使用循环实现一个九九乘法表

第一步，最低要求：在Console中按行输出 n * m = t
然后，尝试在网页中，使用table来实现一个九九乘法表

<body onload="a()">

    <table id="table">
    </table>

    <script>
        function a(){
         var t = document.getElementById("table");
            for(i=9;i>0;i--){
                var tr  = document.createElement("tr")
                for(j=1;j<i+1;j++){
                    var td  = document.createElement("td");
                    var node = document.createTextNode(j+'*'+i+'='+j*i);
                    td.appendChild(node);
                    tr.appendChild(td); 
                    t.appendChild(tr);
                }
            }
        }
    </script>
</body>