js的一些练习

派_大星

已于 2023-07-31 22:26:25 修改

阅读量40

点赞数

文章标签： javascript 前端 java

于 2023-07-29 23:44:33 首次发布

本文链接：https://blog.csdn.net/m0_59844638/article/details/131998029

版权

switch语句

switch语句的case只能为整数，以下给出一个范围的判断例子：

        // switch练习:大于60分为合格；否则为不合格。
        var score = prompt("请输入学生成绩：");
        switch (parseInt(score/10)) {
            case (10):
            case (9):
            case (8):
            case (7):
            case (6):
                console.log("成绩合格。");
                break;
            case (5):
            case (4):
            case (3):
            case (2):
            case (1):
            case (0):
                console.log("成绩不合格");
            }

正则表达式练习

    <script type="text/javascript">
        var exp1 = new RegExp("a","i");
        console.log(exp1.test("bc"));

        var exp2 = /a/i;//与构造器等价
        console.log(exp2.test("bc"));

        var exp3 = /a[de]c/;
        console.log(exp3.test("awvaec"));

        var exp4 = /\W/;
        console.log(exp4.test("asdf"))
        
        //邮箱：xxx.xxx@xx.xx.xx
        var mailExp = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.([A-z]){2,10}){1,2}$/;
        console.log(mailExp.test("llyt.ds@fiberhomr.com"))
    </script>

DOM增删改练习

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>元素节点增删改练习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 72px;
            margin: 40px auto;
            padding: auto;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){  
            //添加新元素“广州”   
            myClick("btn01",function(){
                //主要练习新元素生成（包括li标签节点（createElement）、文本节点（createTextNode）），节点添加（appendChild）
                var newLi = document.createElement("li");
                var newText = document.createTextNode("广州");
                newLi.appendChild(newText);

                var city = document.getElementById("city");
                city.appendChild(newLi);
            })

            //将“广州”添加到北京前面：练习insertBefore
            myClick("btn02",function(){
                var newLi = document.createElement("li");
                var text = document.createTextNode("广州");
                newLi.appendChild(text);

                var cities = document.getElementById("city");
                var bj = document.getElementById("bj");


                cities.insertBefore(newLi,bj);
            })

            //使用广州替换北京：练习replaceChild
            myClick("btn03",function(){
                var newLi = document.createElement("li");
                var newText = document.createTextNode("广州");
                newLi.appendChild(newText);

                var cities = document.getElementById("city");
                var bj = document.getElementById("bj");
                //格式：(替换所属对象).replaceChild(新节点，原节点)
                cities.replaceChild(newLi,bj);
            })

            //删除某一节点
            myClick("btn04",function(){
                //对于不支持remove的浏览器，需要找到其父节点才能删除。
                //parent.removeChild(child);
                var bj = document.getElementById("bj");
                bj.remove();
            })


        }

        function myClick(idStr , fun) {
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        }         
    </script>
</head>
<body>
    <div id = "total">
        <div class="inner">
            <p>
                你最喜欢哪座城市？
            </p>

            <ur id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ur>
        </div>
        <div id="btnList">
            <div>
                <button id="btn01">创建一个广州节点，添加到#city下</button>
            </div>
            <div>
                <button id="btn02">将广州节点插入到#bj前面</button>
            </div>
            <div>
                <button id="btn03">使用广州替换#bj</button>
            </div>
            <div>
                <button id="btn04">删除#bj节点</button>
            </div>
            <div>
                <button id="btn05">设置#bj内的HTML代码</button>
            </div>
        </div>
    </div>
</body>

</html>

全选练习

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>图片切换练习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 72px;
            margin: 40px auto;
            padding: auto;
        }
    </style>
    <script type="text/javascript">
        //实现全选、全不选、反选、提交功能
        window.onload = function(){
            //全选
            var checkedAllBox = document.getElementById("checkedAllBtn");
            checkedAllBox.onclick = function(){
                //获取四个选项，并将其checked设置为true
                var items = document.getElementsByName("items");
                for(var i = 0; i < items.length; i++) {
                    items[i].checked = true;
                }
            }

            //全不选，其逻辑与全选一致
            var checkedNoBox = document.getElementById("checkedNoBtn");
            checkedNoBox.onclick = function(){
                //获取四个选项，并将其checked设置为false
                var items = document.getElementsByName("items");
                for(var i = 0; i < items.length; i++) {
                    items[i].checked = false;
                }
            }

            //反选
            var checkedRevBox = document.getElementById("checkedRevBtn");
            checkedRevBox.onclick = function(){
                //获取四个选项，并将其checked设置为相反
                var items = document.getElementsByName("items");
                for(var i = 0; i < items.length; i++) {
                    // console.log(items[i].checked);
                    items[i].checked = !items[i].checked;
                    // if(items[i].checked){
                    //     items[i].checked = false;
                    // }else{
                    //     items[i].checked = true;
                    // }
                }
            }


        }
         
    </script>
</head>
<body>
    <form method="post" action="">
        你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
        <br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br />
        <input type="button" id="checkedAllBtn" value="全选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反选" />
        <input type="button" id="sendBtn" value="提交" />
    </form>
</body>

</html>

图片切换练习

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>图片切换练习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 72px;
            margin: 40px auto;
            padding: auto;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){

            var imgs = ["img/地球.jpg","img/房间.png","img/空.jpg","img/人.jpg"]
            var index = 0;
            var img = document.getElementsByTagName("img")[0];
            var ptext = document.getElementById("info");

            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            
            function text(length , index){
                return "一共有"+length+"张图片，当前是第"+(index+1)+"张图片。"
            }

            prev.onclick = function(){
                index--;
                if(index < 0) index = imgs.length - 1;
                img.src=imgs[index];
                ptext.innerText = text(imgs.length,index);
                console.log(img.src);
            }

            next.onclick = function(){
                index ++;
                if(index >= imgs.length) index = 0;
                img.src=imgs[index];
                ptext.innerText = text(imgs.length,index);
                console.log(img.src);
            }

            
        }
         
    </script>
</head>
<body>
    <div id = "outer">
        <img src = "img/地球.jpg" alt = "地球" />

        <button id = "prev" >上一张</button>
        <button id = "next" >下一张</button>
        <p id="info">一共4张图片，当前是第1张图片</p>
    </div>
</body>

</html>