百度前端技术学院—零基础学院   第二十二天到第二十四天：JavaScript里面的居民们

于 2019-05-28 17:47:20 发布
阅读量501 收藏 1
点赞数 2
分类专栏： JS 文章标签： 百度前端技术学院练习题 第二十二天到第二十四天 js JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kong_xiang/article/details/90545153
版权

百度前端技术学院—零基础学院   第二十二天到第二十四天：JavaScript里面的居民们

1.数字类型操作

  • 按照HTML中按钮的描述以此实现功能
  • 计算结果显示在 id 为 result 的 P 标签中
  • 除了第一个按钮，其它按钮操作时，都需要判断输入是否为数字，否则在 console 中输出错误信息
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Dom</title>
</head>

<body>
    <div>
        <label>Number A:<input id="radio-a" type="radio" name="math-obj" value="a"></label><input id="num-a" type="text">
        <label>Number B:<input id="radio-b" type="radio" name="math-obj" value="b"></label><input id="num-b" type="text">
    </div>

    <div>
        <button id="p0" onclick="aa()">判断当前选中的输入框输入内容是否为数字</button>
        <br>
        <button id="p1" onclick="bb()">把 A 四舍五入为 B 个小数位数的数字</button>
        <br>
        <button id="p2" onclick="cc()">当前选中数字的绝对值</button>
        <br>
        <button id="p3" onclick="dd()">对当前选中的数字进行上舍入</button>
        <br>
        <button id="p4" onclick="ee()">对当前选中的数字进行下舍入</button>
        <br>
        <button id="p5" onclick="ff()">把当前选中的数字四舍五入为最接近的整数</button>
        <br>
        <button id="p6" onclick="gg()">返回 A 和 B 中的最高值</button>
        <br>
        <button id="p7" onclick="hh()">返回 A 和 B 中的最低值</button>        
        <br>
    </div>
    <p id="result"></p>
    
    <script type="text/javascript">
        function aa(){                              //判断当前选中的输入框输入内容是否为数字
            console.log("判断当前选中的输入框输入内容是否为数字");
            var radios = document.getElementsByName("math-obj");
            var j=0;
            for(var i=0;i<radios.length;i++){
                if(radios[i].checked==true){
                    j=1;
                }
            }
            if(j==0){
                alert("没有选中！");
                return ;
            }
            var val = document.getElementById("radio-a");
            if(val.checked==true){
                var va = document.getElementById("num-a");
                if(va.value==""){
                    alert("输入为空");
                }
                else{
                    if(isNaN(va.value)){
                        var texts = document.getElementById("result");
                        texts.innerHTML =va.value + "不是数字";
                        //console.log(va.value + "不是数字");       
                    }
                    else{
                        //console.log(va.value + "是数字");
                        var texts = document.getElementById("result");
                        texts.innerHTML =va.value + "是数字";
                    }
                }
            }
            else{
                var va = document.getElementById("num-b");
                if(va.value==""){
                    alert("输入为空");
                }
                else{
                    if(isNaN(va.value)){
                        //console.log(va.value + "不是数字");
                        var texts = document.getElementById("result");
                        texts.innerHTML =va.value + "不是数字";
                    }
                    else{
                        //console.log(va.value + "是数字");
                        var texts = document.getElementById("result");
                        texts.innerHTML =va.value + "是数字";
                    }
                }
            }
        }
        function bb(){                                          //把 A 四舍五入为 B 个小数位数的数字
            console.log("把 A 四舍五入为 B 个小数位数的数字");
            var v1 = document.getElementById("num-a");
            var v2 = document.getElementById("num-b");
            //console.log("把 A 四舍五入为 B 个小数位数的数字" + parseFloat(v1.value).toFixed(parseInt(v2.value)));
            var texts = document.getElementById("result");
            texts.innerHTML ="把 A 四舍五入为 B 个小数位数的数字" + parseFloat(v1.value).toFixed(parseInt(v2.value));
        }
        function cc(){                                          //当前选中数字的绝对值
            console.log("当前选中数字的绝对值");
            var radios = document.getElementsByName("math-obj");
            var j=0;
            for(var i=0;i<radios.length;i++)
            {
                if(radios[i].checked==true)
                {
                    j=1;
                }
            }
            if(j==0)
            {
                alert("未选中");
                return ;
            }
            var val = document.getElementById("radio-a");
            if(val.checked==true)
            {
                var va = document.getElementById("num-a");
                //console.log("当A中数字的绝对值" + Math.abs(Number(va.value)));
                var texts = document.getElementById("result");
                texts.innerHTML ="当A中数字的绝对值" + Math.abs(Number(va.value));
            }
            else
            {
                var vb = document.getElementById("num-b");
                //console.log("当B中数字的绝对值" + Math.abs(Number(vb.value)));
                var texts = document.getElementById("result");
                texts.innerHTML ="当B中数字的绝对值" + Math.abs(Number(vb.value));
            }
        }
        function dd(){                                              //对当前选中的数字进行上舍入,这里只适用于正数
            console.log("对当前选中的数字进行上舍入");
            var radios = document.getElementsByName("math-obj");
            var j=0;
            for(var i=0;i<radios.length;i++)
            {
                if(radios[i].checked==true)
                {
                    j=1;
                }
            }
            if(j==0)
            {
                alert("未选中");
                return ;
            }
            var val = document.getElementById("radio-a");
            if(val.checked==true)
            {
                var va = document.getElementById("num-a");
                var vaI = parseInt(va.value);
                var vaF =  parseFloat(va.value);
                if(vaI < vaF)
                {
                    vaI=vaI+1;
                    //console.log("对A中的数字进行上舍入" + vaI);
                    var texts = document.getElementById("result");
                    texts.innerHTML ="对A中的数字进行上舍入" + vaI;
                }
                else if(vaI == vaF)
                {
                    //console.log("对A中的数字进行上舍入" + vaI);
                    var texts = document.getElementById("result");
                    texts.innerHTML ="对A中的数字进行上舍入" + vaI;
                }
            }
            else{
                var vb = document.getElementById("num-b");
                var vbI = parseInt(vb.value);
                var vbF =  parseFloat(vb.value);
                if(vbI < vbF)
                {
                    vbI=vbI+1;
                    //console.log("对B中的数字进行上舍入" + vbI);
                    var texts = document.getElementById("result");
                    texts.innerHTML ="对B中的数字进行上舍入" + vbI;
                }
                else if(vbI == vbF)
                {
                    //console.log("对B中的数字进行上舍入" + vbI);
                    var texts = document.getElementById("result");
                    texts.innerHTML ="对B中的数字进行上舍入" + vbI;
                }
            }
        }
        function ee(){                                                  //对当前选中的数字进行下舍入
            console.log("对当前选中的数字进行下舍入");
            var radios = document.getElementsByName("math-obj");
            var j=0;
            for(var i=0;i<radios.length;i++)
            {
                if(radios[i].checked==true)
                {
                    j=1;
                }
            }
            if(j==0)
            {
                alert("未选中");
                return ;
            }
            var val = document.getElementById("radio-a");
            if(val.checked==true)
            {
                var va = document.getElementById("num-a");
                var vaI = parseInt(va.value);
                //console.log("对A中的数字进行下舍入" + vaI);
                var texts = document.getElementById("result");
                texts.innerHTML ="对A中的数字进行下舍入" + vaI;
               
            }
            else{
                var vb = document.getElementById("num-b");
                var vbI = parseInt(vb.value);
                //console.log("对B中的数字进行下舍入" + vbI);
                var texts = document.getElementById("result");
                texts.innerHTML ="对B中的数字进行下舍入" + vbI;
            }
        }
        function ff(){                                                    //把当前选中的数字四舍五入为最接近的整数
            console.log("把当前选中的数字四舍五入为最接近的整数");
            var radios = document.getElementsByName("math-obj");
            var j=0;
            for(var i=0;i<radios.length;i++)
            {
                if(radios[i].checked==true)
                {
                    j=1;
                }
            }
            if(j==0)
            {
                alert("未选中");
                return ;
            }
            var val = document.getElementById("radio-a");
            if(val.checked==true)
            {
                var va = document.getElementById("num-a");
                //console.log("把A中的数字四舍五入为最接近的整数" + (Number(va.value)).toFixed(0));
                var texts = document.getElementById("result");
                    texts.innerHTML ="把A中的数字四舍五入为最接近的整数" + (Number(va.value)).toFixed(0);
            }
            else{
                var vb = document.getElementById("num-b");
                //console.log("把B中的数字四舍五入为最接近的整数" + (Number(vb.value)).toFixed(0));
                var texts = document.getElementById("result");
                texts.innerHTML ="把B中的数字四舍五入为最接近的整数" + (Number(vb.value)).toFixed(0);
            }
        }
        function gg()                                                   //返回 A 和 B 中的最高值
        {
            console.log("返回 A 和 B 中的最高值");
            var va = document.getElementById("num-a");
            var vb = document.getElementById("num-b");
            if(va.value>=vb.value)
            {
                //console.log("A，B中最大值：" + va.value);
                var texts = document.getElementById("result");
                texts.innerHTML ="A，B中最大值：" + va.value;
            }
            else
            {
                //console.log("A，B中最大值：" + vb.value);
                var texts = document.getElementById("result");
                texts.innerHTML ="A，B中最大值：" + vb.value;
            }
        }
        function hh()                                                   //返回 A 和 B 中的最低值
        {
            console.log("返回 A 和 B 中的最低值");
            var va = document.getElementById("num-a");
            var vb = document.getElementById("num-b");
            if(va.value>=vb.value)
            {
                //console.log("A，B中最小值：" + vb.value);
                var texts = document.getElementById("result");
                texts.innerHTML ="A，B中最小值：" + vb.value;
            }
            else
            {
                //console.log("A，B中最小值：" + va.value);
                var texts = document.getElementById("result");
                texts.innerHTML ="A，B中最小值：" + va.value;
            }
        }
    </script> 
</body>

2.字符串类型操作

  • 按照HTML中按钮的描述以此实现功能
  • 计算结果显示在 id 为 result 的 P 标签中
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom</title>
</head>

<body>
    <div>
        <label>String A:
            <input id="radio-a" type="radio" checked="true" name="str-obj" value="a">
        </label>
        <textarea id="str-a"></textarea>
        <label>String B:
            <input id="radio-b" type="radio" name="str-obj" value="b">
        </label>
        <textarea id="str-b"></textarea>        
        <label>Num A：<input id="num-a" type="number" value="0"></label>
        <label>Num B：<input id="num-b" type="number" value="1"></label>
    </div>
    <div>
        <button onclick="aa()">获取当前选中输入的内容长度</button>
        <button onclick="bb()">当前选中输入中的第3个字符</button>
        <button onclick="cc()">把两个输入框的文字连接在一起输出（concat）</button>
        <button onclick="dd()">输入B中的内容，在输入A的内容中第一次出现的位置（indexOf）</button>
        <button onclick="ee()">输入A中的内容，在输入B的内容中最后一次出现的位置（lastIndexOf）</button>
        <button onclick="ff()">使用slice获取选中输入框内容的部分内容，参数为num-a及num-b</button>
        <button onclick="gg()">当前选中输入框的行数</button>
        <button onclick="hh()">使用substr获取选中输入框内容的子字符串，参数为num-a及num-b</button>
        <button onclick="ii()">把所选输入框中的内容全部转为大写</button>
        <button onclick="jj()">把所选输入框中的内容全部转为小写</button>
        <button onclick="kk()">把所选输入框中内容的半角空格全部去除</button>
        <button onclick="ll()">把所选输入框中内容的a全部替换成另外一个输入框中的内容</button>
    </div>
    <p id="result"></p>
    <!-- 
    var text_p = document.getElementById("result");
        text_p.innerHTML="";
    -->
    <script>
        function Print(s){                                      //在p标签输出
            var text_p = document.getElementById("result");
            text_p.innerHTML=s;
        }
        function aa(){
            var radios = document.getElementsByName("str-obj");
            var j=0;
            for(var i=0;i<radios.length;i++)
            {
                if(radios[i].checked==true)
                {
                    j=1;
                }
            }
            if(j==0)
            {
                console.log("未选中！");
                return ;
            }
            var radioA = document.getElementById("radio-a");
            if(radioA.checked==true)
            {
                var texts = document.getElementById("str-a");
                Print("A当前选中输入的内容长度:" + texts.value.length);
            }
            else
            {
                var texts = document.getElementById("str-b"); 
                Print("A当前选中输入的内容长度:" + texts.value.length);
            }
        }
        function bb(){
            var radios = document.getElementsByName("str-obj");
            var j=0;
            for(var i=0;i<radios.length;i++)
            {
                if(radios[i].checked==true)
                {
                    j=1;
                }
            }
            if(j==0)
            {
                console.log("未选中！");
                return ;
            }
            var radioA = document.getElementById("radio-a");
            if(radioA.checked==true)
            {
                var texts = document.getElementById("str-a");
                Print(texts.value[2]);
            }
            else
            {
                var texts = document.getElementById("str-b");
                Print(texts.value[2]);
            }
        }
        function cc(){
            var va = document.getElementById("str-a");
            var vb = document.getElementById("str-b");
            Print(va.value.concat(vb.value));
        }
        function dd(){
            var va = document.getElementById("str-a");
            var vb = document.getElementById("str-b");
            Print(va.value.indexOf(vb.value));
        }
        function ee(){
            var va = document.getElementById("str-a");
            var vb = document.getElementById("str-b");
            Print(va.value.lastIndexOf(vb.value));
        }
        function ff(){
            var va = Number(document.getElementById("num-a").value);
            var vb = Number(document.getElementById("num-b").value);
            Print(texts.value.slice(va,vb));
        }
        function gg(){
            
        }
        function hh(){
            var texts = document.getElementById("str-a");
            var va = Number(document.getElementById("num-a").value);
            var vb = Number(document.getElementById("num-b").value);
            Print(texts.value.substr(va,vb));
        }
        function ii()
        {
            var texts = document.getElementById("str-a");
            Print(texts.value.toUpperCase());
        }
        function jj()
        {
            var texts = document.getElementById("str-a");
            Print(texts.value.toLowerCase());
        }
        function kk()
        {
            var texts = document.getElementById("str-a");
            Print(texts.value.replace(/\s*/g,""));
        }
        function ll()
        {
            var texts = document.getElementById("str-a");
            var text_b = document.getElementById("str-b");
            var text = texts.value;
            var texts_new;
            for(var i=0;i<texts.value.length;i++){
                texts_new = text.replace("a",text_b.value);
                if(text == texts_new)
                {
                    Print(texts_new);
                    return ;
                }
                text=texts_new;
            }
        }
    </script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        /*
        实现一个字符串头尾去除空格的函数
        注意需要去除的空格，包括全角、半角空格
        暂时不需要学习和使用正则表达式的方式
        */
       
        function diyTrim(str) {
            var result = "";
            result = str.replace(/^\s*|\s*$/g,"");
            return result
        }
        
        // 测试用例
        console.log(diyTrim(' a f b    ')); // ->a f b
        console.log(diyTrim('    ffdaf    ')); // ->ffdaf
        console.log(diyTrim('1    ')); // ->1
        console.log(diyTrim('　　f')); // ->f
        console.log(diyTrim('  　  a f b 　　 ')); // ->a f b
        console.log(diyTrim(' ')); // ->
        console.log(diyTrim('　')); // ->
        console.log(diyTrim('')); // ->
        
        /*
        去掉字符串str中，连续重复的地方
        */
        
        function removeRepetition(str) {
            var result = "";
            for(var i=0 ; i < str.length ; i++)
            {
                result += str[i];
                for(var j=i+1 ; j < str.length ; j++)
                {
                    if(str[i] != str[j])
                    {
                        i=j-1;
                        break ;
                    }
                    if(j==str.length-1)
                        return result;
                }
            }      
            return result;
        }
        
        // 测试用例
        console.log(removeRepetition("aaa")); // ->a
        console.log(removeRepetition("abbba")); // ->aba
        console.log(removeRepetition("aabbaabb")); // ->abab
        console.log(removeRepetition("")); // ->
        console.log(removeRepetition("abc")); // ->abc
        
    </script>
</body>
</html>

3.二叉树

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        var tree = {
        "id": 0,
        "name": "root",
        "left": {
            "id": 1,
            "name": "Simon",
            "left": {
                "id": 3,
                "name": "Carl",
                "left": {
                    "id": 7,
                    "name": "Lee",
                    "left": {
                        "id": 11,
                        "name": "Fate"
                    }
                },
                "right": {
                    "id": 8,
                    "name": "Annie",
                    "left": {
                        "id": 12,
                        "name": "Saber"
                    }
                }
            },
            "right": {
                "id": 4,
                "name": "Tony",
                "left": {
                    "id": 9,
                    "name": "Candy"
                }
            }
        },
        "right": {
            "id": 2,
            "name": "right",
            "left": {
                "id": 5,
                "name": "Carl",
            },
            "right": {
                "id": 6,
                "name": "Carl",
                "right": {
                    "id": 10,
                    "name": "Kai"
                }        
            }
        }
        }
        
        // 假设id和name均不会重复，根据输入name找到对应的id
        function findIdByName(tree,name) {
            if(tree.name==name)
            {
                console.log(name+"-->"+tree.id);
            }
            if(tree.left!=null)
            {
                findIdByName(tree.left,name);
            }
            if(tree.right!=null)
            {
                findIdByName(tree.right,name);
            }
        }
        
        // 假设id和name均不会重复，根据输入id找到对应的name
        function findNameById(tree,id) {
            if(tree.id==id)
            {
                console.log(id+"-->"+tree.name);
            }
            if(tree.left!=null)
            {
                findNameById(tree.left,id);
            }
            if(tree.right!=null)
            {
                findNameById(tree.right,id);
            }
        }
        
        // 把这个对象中所有的名字以“前序遍历”的方式全部输出到console中
        function getListWithDLR(tree) {
            console.log(tree.id);
            if(tree.left!=null)
            {
                getListWithDLR(tree.left);
            }
            if(tree.right!=null)
            {
                getListWithDLR(tree.right);
            }
        }
        
        // 把这个对象中所有的名字以“中序遍历”的方式全部输出到console中
        function getListWithLDR(tree) {
            if(tree.left!=null)
            {
                getListWithLDR(tree.left);
            }
            
            console.log(tree.id);
    
            if(tree.right!=null)
            {
                getListWithLDR(tree.right);
            }
        }
        
        // 把这个对象中所有的名字以“后序遍历”的方式全部输出到console中
        function getListWithLRD(tree) {
            if(tree.left!=null)
            {
                getListWithLRD(tree.left);
            }
    
            if(tree.right!=null)
            {
                getListWithLRD(tree.right);
            }
            
            console.log(tree.id);
        }
        console.log("通过name找id：")
        findIdByName(tree,"Candy");
        console.log("通过id找name：")
        findNameById(tree,10);
        console.log("先序遍历（根，左，右）：");
        getListWithDLR(tree);
        console.log("中序遍历（左，根，右）：");
        getListWithLDR(tree);
        console.log("后序遍历（左，右，根）：");
        getListWithLRD(tree);
    </script>
</body>
</html>

4.栈操作

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input id="stack-input" type="text">
    <p id="stack-cont">栈内容：apple-&gt;pear</p>    
    <button id="push-btn" onclick="aa()">进栈</button>
    <button id="pop-btn" onclick="bb()">退栈</button>
    <button id="font-btn" onclick="cc()">打印栈顶元素内容</button>
    <button id="empty-btn" onclick="dd()">判断栈是否为空</button>
    
    <script>
    
        var stack = ["apple", "pear"];

        function Print(){
            var text = document.getElementById("stack-cont");
            text.innerHTML=stack;
        }

        function aa(){
            var text = document.getElementById("stack-input");
            stack.push(text.value);
            Print();
        }

        function bb(){
            stack.pop();
            Print();
        }
        function cc(){
            console.log(stack[stack.length-1]);
            Print();
        }
        function dd(){
            if(stack[0]==null)
            {
                console.log("为空！");
            }
            else
            {
                console.log("不为空！");
            }
            Print();
        }

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

5.队列

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input id="queue-input" type="text">
    <p id="queue-cont">队列内容：apple-&gt;pear</p>    
    <button id="in-btn" onclick="aa()">入队</button>
    <button id="out-btn" onclick="bb()">出队</button>
    <button id="font-btn" onclick="cc()">打印队头元素内容</button>
    <button id="empty-btn" onclick="dd()">判断队列是否为空</button>
    
    <script>

        var queue = ["apple", "pear"];
 
        function Print(){
            var text = document.getElementById("queue-cont");
            text.innerHTML=queue;
        }

        function aa(){
            var text = document.getElementById("queue-input");
            queue.push(text.value);
            console.log("添加元素成功："+text.value);
            Print();
        }
        function bb(){
            console.log("出队成功："+queue.shift());
            Print();
        }
        function cc(){
            console.log(queue[0]);
            Print();
        }
        function dd(){
            if(queue[0] == null)
            {
                console.log("空");
                Print();
            }
            else{
                console.log("不为空");
                Print();
            }
        }

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

 

空巷挽清风
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值