JS基础练习

最新推荐文章于 2024-09-04 20:18:34 发布

Hello World️

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量278

点赞数

分类专栏：前端学习文章标签： javascript

本文链接：https://blog.csdn.net/m0_51318597/article/details/126260586

版权

前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

排他思想

请添加图片描述

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        //获取button标签对象
        var butArr = document.getElementsByTagName("button");
        for (let i = 0; i < butArr.length; i++) {
            //设置点击事件
            butArr[i].onclick = function() {
                for (let j = 0; j < butArr.length; j++) {
                    //在点击下一个按钮前 将之前的按钮样式修改
                    butArr[j].style.backgroundColor = "";
                }
                //设置点击按钮的样式
                this.style.backgroundColor = "blue";
            }
        }
    </script>
</body>

百度换肤

请添加图片描述

<body>
    <ul class="baidu">
        <li><img src="img/1.jpg"></li>
        <li><img src="img/2.jpg"></li>
        <li><img src="img/3.jpg"></li>
        <li><img src="img/4.jpg"></li>
    </ul>
    <script>
        //先获取img标签对象 body标签对象
        var imgArr = document.getElementsByTagName("img");
        var body = document.body;
        for (let i = 0; i < imgArr.length; i++) {
            //设置背景图片
            imgArr[i].onclick = function() {
                //this代表点击的图片
                body.style.backgroundImage = "url(" + this.src + ")";
            }
        }
    </script>
</body>

<!-- css样式 -->
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url(img/1.jpg) no-repeat center top;
        }

        li {
            list-style: none;
        }

        .baidu {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }

        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }

        .baidu img {
            width: 100px;
        }
    </style>
</head>

表格各行换色

请添加图片描述

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    
    <script>
        //获取表格的每一行
        var trs = document.getElementsByTagName("tr");
        //遍历每一行
        for (let i = 1; i < trs.length; i++) {
            //如果鼠标移动上行 就变色
            trs[i].onmouseover = function() {
                //上面CSS已经有样式 只需要设置类名即可
                this.className = "bg";
            }
            //如果鼠标移走 颜色就变会去
            trs[i].onmouseout = function() {
                this.className = "";
            }
        }
    </script>
    
</body>

<head>
    <!-- css样式 -->
    <style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }

        thead tr {
            height: 30px;
            background-color: skyblue;
        }

        tbody tr {
            height: 30px;
        }

        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }

        .bg {
            background-color: pink;
        }
    </style>
</head>

全选反选

请添加图片描述

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        //所有框对象
        var allInput = document.getElementsByTagName("input");
        //大框对象
        var j_cbAll = document.getElementById("j_cbAll");
        //大框选中 全选中 大框不选 都不选
        j_cbAll.onclick = function(e) {
            if (j_cbAll.checked) {
                for (let i = 1; i < allInput.length; i++) {
                    allInput[i].checked = "true";
                }
            } else {
                for (let i = 1; i < allInput.length; i++) {
                    allInput[i].checked = "";
                }
            }
        }

        for (let i = 1; i < allInput.length; i++) {
            //小框全选 大框选
            allInput[i].onclick = function() {
                //定义一个开关
                var flag = true;
                //每一个小框 都去判断其他的小框
                for (let j = 1; j < allInput.length; j++) {
                    if (allInput[j].checked == false) {
                        flag = false;
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>

<!-- css样式 -->
<head lang="en">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>

tab栏切换

请添加图片描述

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
</body>

<script>
    //标题栏
    var lis = document.getElementsByTagName("li");
    //内容栏
    var items = document.getElementsByClassName("item");

    for (let i = 0; i < lis.length; i++) {
        lis[i].onclick = function() {
            //排他思想 点击谁 谁改变样式
            //样式class="current"已经在css中写过 只改变其名就行
            for (let j = 0; j < lis.length; j++) {
                lis[j].className = "";
            }
            this.className = "current";

            //显示div文本
            for (let j = 0; j < items.length; j++) {
                //none隐藏
                items[j].style.display = "none";
            }
            //block块元素 显示出来
            items[i].style.display = "block";
        }
    }
</script>

<!-- css样式 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
</head>

表单校验

请添加图片描述

<body>
    <table width="700px" height="600px" border="0" cellspacing="0" align="center">
        <form action="#" method="GET" onsubmit="return checkForm()">
            <tr>
                <td>用户名:</td>
                <td><input type="text" name="username" value="" placeholder="请输入用户名(6~18字母)"
                           onblur="checkUserName()"></td>
                <td><span id="usp"></span></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" name="password" value="" placeholder="请输入密码(6~18数字)"
                           onblur="checkUserPwd()"></td>
                <td><span id="psp1"></span></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" name="password2" value="" placeholder="确认密码" onblur="UserPwd()"></td>
                <td><span id="psp2"></span></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <input type="radio" name="sex" id="men" value="1" onblur="UserSex()"><label for="men">男</label>
                    &nbsp;
                    <input type="radio" name="sex" id="women" value="0" onblur="UserSex()"><label
                                                                                                  for="women">女</label>
                </td>
                <td><span id="ssp"></span></td>
            </tr>
            <tr>
                <td>爱好:</td>
                <td>
                    <input type="checkbox" name="hobby" id="run" value="run" onblur="UserHobby()"><label
                                                                                                         for="run">跑步</label>
                    &nbsp;
                    <input type="checkbox" name="hobby" id="sing" value="sing" onblur="UserHobby()"><label
                                                                                                           for="sing">唱歌</label>
                    &nbsp;
                    <input type="checkbox" name="hobby" id="book" value="book" onblur="UserHobby()"><label
                                                                                                           for="book">看书</label>
                </td>
                <td><span id="csp"></span></td>
            </tr>
            <tr>
                <td>个人描述:</td>
                <td>
                    <input type="text" name="userDes" style="width:300px; height:150px" value="" placeholder="请输入个人描述(10个字以上)" onblur="Describe()">
                </td>
                <td><span id="tsp"></span></td>
            </tr>
            <tr>
                <td><input type="submit" value="注册"></td>
                <td colspan="2"><input type="reset" value="重置"></td>
            </tr>
        </form>
    </table>
</body>

<script>
    //是否成功注册
    function checkForm() {
        return checkUserName() && checkUserPwd() && UserPwd() && UserSex() && UserHobby() && Describe();
    }

    //用户名格式
    function checkUserName() {
        var regx = /^[a-zA-Z]{6,18}$/;
        var value = document.getElementsByName("username")[0].value;
        var flag = regx.test(value)
        var usp = document.getElementById("usp");
        if (flag) {
            usp.innerHTML = "<b style='color:green'>用户名格式正确✔</b>"
        } else {
            usp.innerHTML = "<b style='color:red'>用户名格式错误✘</b>"
        }
        return flag;
    }

    //密码格式
    function checkUserPwd() {
        var regx = /^[0-9]{6,18}$/;
        var value = document.getElementsByName("password")[0].value;
        var flag = regx.test(value)
        var psp = document.getElementById("usp");
        if (flag) {
            psp1.innerHTML = "<b style='color:green'>密码格式正确✔</b>"
        } else {
            psp1.innerHTML = "<b style='color:red'>密码格式错误✘</b>"
        }
        return flag;
    }
    //确认密码
    function UserPwd() {
        var value = document.getElementsByName("password")[0].value;

        var value2 = document.getElementsByName("password2")[0].value;
        var regx = /^[0-9]{6,18}$/;
        var flag = (value === value2) && (regx.test(value2));

        if (flag) {
            psp2.innerHTML = "<b style='color:green'>密码正确✔</b>"
        } else {
            psp2.innerHTML = "<b style='color:red'>密码错误✘</b>"
        }
        return flag;
    }

    //性别
    function UserSex() {
        var menFlag = document.getElementById("men").checked;
        var womenFlag = document.getElementById("women").checked;
        if (menFlag || womenFlag) {
            ssp.innerHTML = "<b style='color:green'>已勾选性别</b>"
            return true;
        } else {
            ssp.innerHTML = "<b style='color:red'>未勾选性别</b>"
            return false;
        }
    }

    //爱好
    function UserHobby() {
        var runFlag = document.getElementById("run").checked;
        var singFlag = document.getElementById("sing").checked;
        var bookFlag = document.getElementById("book").checked;
        if (runFlag || singFlag || bookFlag) {
            csp.innerHTML = "<b style='color:green'>已勾选爱好</b>"
            return true;
        } else {
            csp.innerHTML = "<b style='color:red'>未勾选爱好</b>"
            return false;
        }
    }

    //个人描述
    function Describe() {

        var value = document.getElementsByName("userDes")[0].value;
        var flag = value.length >= 10;
        if (flag) {
            tsp.innerHTML = "<b style='color:green'>个人描述输入完成</b>"
        } else {
            tsp.innerHTML = "<b style='color:red'>个人描述不少于10字</b>"
        }
        return flag;
    }
</script>