JavaScript

最新推荐文章于 2021-12-30 15:40:54 发布

木子葭

最新推荐文章于 2021-12-30 15:40:54 发布

阅读量258

点赞数

本文链接：https://blog.csdn.net/qq_42725815/article/details/86766697

版权

JavaScript 是属于网络的脚本语言，被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

一 JS简介

1.注册表单校验雏形

需求:
1). 用户在注册的时候会输入一些信息，但是用户输入的内容有可能不合法，会导致服务器端压力过大;
2). 当用户填写信息之后，对填写的信息进行校验（前端校验，只能防君子不能防小人）后台校验: 也是需要校验的
需要掌握的技能:
如何在加载页面时执行指定函数?
如何获取指定元素对象?
如何弹出一个警告框?

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            // 1. 获取用户输入的用户名的标签对象;
            var uEle = document.getElementById('username');
            alert(uEle);
            // 2. 获取这个对象里面的值；
            var uValue = uEle.value;
            alert(uValue);
//
//            alert("这是一个用户名!");        弹出一个警示框

        }

    </script>

</head>
<body>

<form action="#" method="get">
    <!--get: 填写的信息会在url里面显示，对于重要的数据来说是不安全的；
        post: 填写的信息不会在url里面显示
        -->
    用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
    密码: <input type="password" name="passwd" placeholder="密码"><br/>
    <input type="submit" value="注册">

</form>

</body>
</html>

在这里插入图片描述
上面的只是一个雏形，并没有对注册信息提出任何要求,现在的需求如下:
1）判断用户名是否为空?
2）校验密码是否大于6位，如果不满足则不合法？

实现步骤：

1). 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
2). 对这个事件绑定一个函数(执行的操作写在函数里面);
3).函数的核心功能: 校验用户名是否为空?

1.获取输入用户名标签提交的内容；
2. if判断用户名是否为空?
3. 如果数据合法， 继续执行， 提交表单；
4. 如果数据不合法， 不让表单提交? (显示弹出框报错) — alert

2.校验用户名是否为空及密码是否合法

//  1. 校验用户名是否为空? 
//        需求:
//          1. 判断用户名是否为空?
//          2. 校验密码是否大于6位， 如果不满足则不合法?
        // 定义一个函数
        function checkForm() {
//        1). 获取输入用户名标签提交的内容；
            var user = document.getElementById('username').value;

//        2). if判断用户名是否为空?
//        3). 如果数据合法， 继续执行， 提交表单；
//        4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert
            if (user === '') {
                alert("用户名不能为空!");
                return false;
            }

// 2. 校验密码长度是否小于6
// 难点: 获取密码长度(http://www.w3school.com.cn/js/js_obj_string.asp)
//            var passwdlen = document.getElementById('passwd').value.length;
            var passwdlen = document.getElementsByName('passwd')[0].value.length;
            if (passwdlen < 6){
                alert("密码不合法: 长度小于6！");
                return false;
            }
        }
    </script>

</head>
<body>

<!--
实现步骤:
    1. 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
    2. 对这个事件绑定一个函数(执行的操作写在函数里面);
    3. 函数的核心功能: 校验用户名是否为空?
        1). 获取输入用户名标签提交的内容；
        2). if判断用户名是否为空?
        3). 如果数据合法， 继续执行， 提交表单；
        4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert
-->
<form action="#" method="get" onsubmit="return checkForm()">
    <!--get: 填写的信息会在url里面显示， 对于重要的数据来说是不安全的；
        post: 填写的信息不会在url里面显示
        -->
    用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
    密码: <input type="password" name="passwd" placeholder="密码" id="passwd"><br/>
    <input type="submit" value="注册">

</form>
</body>
</html>

在这里插入图片描述

3.比较 == 与 ===

两个等号做比较时，会将字符串转换为整形进行比较
三个等号做比较时，都作为字符串进行比较

<head>
    <meta charset="UTF-8">
    <title>Title</title>

     <script>
        window.onload = function () {
            /*
            var x = 5;
            var y = '5';
            var z = 5;
            alert(x == y);     // 两个等号做比较时，会将字符串转换为整形进行比较;
            alert(x === y);
            */

            var a =(5 === '5')?'ok': 'not ok';
            alert(a);
        }

    </script>
</head>
<body>

</body>
</html>

三个等号：
在这里插入图片描述
两个等号：

二实现图片的切换

确定事件类型为onclick事件；
并跟对应的函数changeImg绑定在一起；
实现函数功能；
当点击下一页按钮之后，修改img标签里面的src属性内容;

<head>
    <meta charset="UTF-8">
    <title>Title</title>

     <!--
    块级元素居中:margin: 0 auto;
    行内元素居中:  text-align: center;
     -->
    <style>
        #sowing_map{
            width: 590px;
            height:500px;
            margin: 0 auto;
            text-align: center;

        }

    </style>


    <script>
        // 1. 定义一个变量， 控制图片的循环顺序;
        var i = 1;
        function  changeImg() {

            // 2. 当点击下一页时， i+1, 这个时候， 图片变成img2;
            i += 1;
            // 3.  修改img标签里面的src属性内容;
            document.getElementById('img').src = 'img/img' + i + '.jpg';

            // 4. 如果图片轮播结束， 从头开始轮播；
            if (i === 6){
                i = 0;
            }
        }

    </script>
</head>
<body>

<!--思路:
    1. 确定事件类型为onclick事件；
    2. 并跟对应的函数changeImg绑定在一起；
    3. 实现函数功能；
        1). 当点击下一页按钮之后， 修改img标签里面的src属性内容;
-->
<div id="sowing_map"><img src="img/img7_ad.jpg" height="80" width="1190"/>
    <img src="img/img1.jpg" id="img">
    <input type="button" value="下一页" onclick="changeImg()">
</div>
</body>
</html>

在这里插入图片描述
加入定时模块，产生轮播图效果,隔1s切换一次图片

<head>
    <meta charset="UTF-8">
    <title>Title</title>

     <style>
        #sowing_map{
            width: 590px;
            height:500px;
            margin: 0 auto;
            text-align: center;

        }
    </style>

    <script>
        window.onload = function () {
            // 每隔1s自动执行某一个函数
            setInterval('changeImg()', 1000);
        };

        // 1. 定义一个变量， 控制图片的循环顺序;
        var i = 1;
        function  changeImg() {

            // 2. 当点击下一页时， i+1, 这个时候， 图片变成img2;
            i += 1;
            // 3.  修改img标签里面的src属性内容;
            document.getElementById('img').src = 'img/img' + i + '.jpg';

            // 4. 如果图片轮播结束， 从头开始轮播；
            if (i === 6){
                i = 0;
            }
        }

    </script>
</head>
<body>

<div id="sowing_map">
    <img src="img/img1.jpg" id="img">
</div>

</body>
</html>

和上边的相比，轮播图是每隔一秒自动播放，不用手动点击下一页

三定时弹出广告

目标:

实现网页定时弹出广告，并定时取消弹出的广告;

步骤:

在页面设置一个隐藏的图片; style=“display: none”
确定事件类型为onload，为其绑定一个函数;
设置定时执行显示图片的函数showAd();
编写定时任务里面的函数showAd()----
获取标签的样式display=‘block’;
清除显示广告的定时任务;
编写隐藏广告图片的定时任务;
实现定时任务里面的函数hiddenAd();
获取标签的样式display=‘none’;
清除隐藏广告的定时任务;

主代码：

<head>
    <meta charset="UTF-8">
    <title>Title</title>

     <!--
    块级元素居中:margin: 0 auto;
    行内元素居中:  text-align: center;
   Js的引入方式:
        - 内部引入: 直接在head标签里面的<script>写的内容;
        - 外部引入:<script src="js/main.js" ></script
     -->
    <link href="css/main.css" rel="stylesheet">
    <script src="js/main.js" ></script>
</head>
<body>

<div id="sowing_map">
    <img src="img/img1.jpg" id="img">
    <!--<input type="button" value="下一页" onclick="changeImg()">-->
</div>

<div id="ad">
    <img src="img/img7_ad.jpg" id="ad_img" style="display: none">

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

CSS里面的代码：

#sowing_map{
    width: 590px;
    height:500px;
    margin: 0 auto;
    text-align: center;

}

#ad{
    width: 1190px;
    height: 80px;
    margin: 0 auto;
    text-align: center;
}

JS的代码：

window.onload = function () {
    // 每隔1s自动执行某一个函数
    setInterval('changeImg()', 1000);

    //每隔1s执行显示广告的函数;
    // 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
    //(http://www.w3school.com.cn/jsref/met_win_setinterval.asp)
    // 在js的函数里面。 变量名没有var时， 是一个全局变量;
    adtime = setInterval('showAd()', 1000);

};

// 1. 定义一个变量， 控制图片的循环顺序;
var i = 1;

function changeImg() {

    // 2. 当点击下一页时， i+1, 这个时候， 图片变成img2;
    i += 1;
    // 3.  修改img标签里面的src属性内容;
    document.getElementById('img').src = 'img/img' + i + '.jpg';

    // 4. 如果图片轮播结束， 从头开始轮播；
    if (i === 6) {
        i = 0;
    }
}


// 编写显示隐藏图片的函数
function showAd() {
    // 获取到广告图片对应的标签对象
    var adEle = document.getElementById('ad_img');
    //修改广告图片元素里面的style属性里面的display
    adEle.style.display = 'block';

    // 清除显示图片的定时操作；
    clearInterval(adtime);

    // 设置隐藏广告图片的定时任务；
    hiddentime = setInterval('hiddenAd()', 1000);

}

function hiddenAd() {
    // 获取到广告图片对应的标签对象
    var adEle = document.getElementById('ad_img');
    //修改广告图片元素里面的style属性里面的display
    adEle.style.display = 'none';
    //清除隐藏图片的定时任务;
    clearInterval(hiddentime);
}

这样可以减轻主代码的冗杂程度，使代码更加清晰
在这里插入图片描述
1s后执行广告产生函数

四用户注册页面

填写用户名和密码时，旁边需有提示；
用户名或者密码注册时，离开当前填写框时，立即作出判断，填写内容是否符合要求

<head>
     <script>
        function  showUserTip() {
            // 1. 获取标签对象;
            document.getElementById('userTip').innerHTML = '<b style="color: lightgray;">用户名不能为空</b>';
        }


        function showPwdTip() {
       // 1. 获取标签对象;
            document.getElementById('pwdTip').innerHTML = '<b style="color: lightgray;">密码必须大于6位</b>';
        }

        function  checkUser() {
            //1. 离焦时判断用户名是否为空?
            var name = document.getElementById('user').value;
            // 2. 如果为空， 右边来一个红色的提示;
            // 3. 如果不为空， 则取消所有提示;
            if (name === ''){
                document.getElementById('userTip').innerHTML = '<b style="color: #f10180">用户名不能为空</b>'
                return false;

            }else{
                document.getElementById('userTip').innerHTML = '<b style="color:  green"> ok </b>'
                return true;
            }
        }
        function  checkPwd() {
//            alert('离焦');
             //1. 离焦时判断用户名是否为空?
            var pwdLen = document.getElementById('pwd').value.length;
            // 2. 如果为空， 右边来一个红色的提示;
            // 3. 如果不为空， 则取消所有提示;
            if (pwdLen < 6){
                document.getElementById('pwdTip').innerHTML = '<b style="color: #f10180">密码必须大于等于6位</b>'
                return false;

            }else{
                document.getElementById('pwdTip').innerHTML = '<b style="color:  green"> ok </b>'
                return true;

            }
        }
    </script>

</head>
<body>

<!--步骤:-->
    <!--1). 确定事件类型(onfocus-聚焦事件)，并为其绑定一个函数;-->
    <!--2). 确定事件类型(onblur-离焦事件)，并为其绑定一个函数;-->

<form action="#" method="get">
    <input type="text" id='user' placeholder="输入用户名" name="username" onfocus="showUserTip()"
           onblur="checkUser()">
    <span id="userTip"></span><br/>
    <input type="password" id="pwd" placeholder="密码" name="passwd" onfocus="showPwdTip()"
           onblur="checkPwd()">
    <span id="pwdTip"></span><br/>
    <input type="submit" value="注册">
</form>
</body>
</html>

五 JS实现表单选项的全选与全不选

需求:
实现批量选中和批量不选中

步骤分析:
1). 确定事件类型:鼠标单击单选按钮时(onclick事件)，绑定一个函数；
2). 编写函数checkAll()

当选中编号前面的方框时，不管下面的选没选，都会被自动选择；
同理当取消选中编号前面的方框时，下面选则的，都会被自动取消

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function  checkAll() {

            //1. 获取全选框对象
            var checkAllEle = document.getElementById('checkAll');

          //alert(checkAllEle);
          //判断该单选框是否被选中，
           //alert(checkAllEle.checked);

            // 2. 对编号前面的复选框的状态进行判断;
            //      - 如果状态为选中，则设置所有的单选框为选中状态;
            //      - 如果状态为没有选中，则设置所有的单选框为没有选中状态;
            if (checkAllEle.checked){
                    //- 如果状态为选中,则设置所有的单选框为选中状态;
                    var checkOnes = document.getElementsByName('checkOne');
                    // 依次遍历所有的单选框，设置状态为选中;li = [1,2,3,4]
                    for(var i =0; i<checkOnes.length; i++){
                        // li[0] li[1] li[2] li[3]
                        checkOnes[i].checked = true;

                    }
            }else{
                    //- 如果状态为未选中，则设置所有的单选框为未选中状态;
                    var checkOnes = document.getElementsByName('checkOne');
                    // 依次遍历所有的单选框，设置状态为选中;li = [1,2,3,4]
                    for(var i =0; i<checkOnes.length; i++){
                        // li[0] li[1] li[2] li[3]
                        checkOnes[i].checked = false;

                    }
            }
        }

    </script>
</head>
<body>

<table style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;" border="1px">
    <th style="text-align: center;" colspan="5">
        <input type="button" value="添加">
        <input type="button" value="删除">
    </th>
    <tr>

        <th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>1</td>
        <td>Marry</td>
        <td>女</td>
        <td>10</td>
    </tr>
    <tr>
        <td><input type="checkbox"  ></td>
        <td>2</td>
        <td>Tom</td>
        <td>男</td>
        <td>9</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>3</td>
        <td>Sari</td>
        <td>女</td>
        <td>10</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>4</td>
        <td>Jack</td>
        <td>男</td>
        <td>11</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>5</td>
        <td>Angel</td>
        <td>女</td>
        <td>9</td>
    </tr>
</table>

</body>
</html>

在这里插入图片描述

六动态添加城市

1. 需求:

点击一个按钮，动态实现添加城市;

2. 实现步骤:

确定事件类型onclick
对于事件绑定一个函数addLiElement()
1). 获取到用户在input输入框中填写的信息;

            city  = document.getElementById("city").value
            city  = document.getElementsByName("city")[0].value

2). 创建一个城市的文本节点；document.createTextNode(‘xxxx’)
3). 创建一个li的元素节点; document.createElement(‘xxxx’)
4). 将文本节点添加到li元素节点里面去;
5). 将整体添加到ul标签里面去;

         使用appendChild()来添加子节点;

如下：

<head>
    <meta charset="UTF-8">
    <title>动态添加城市</title>

    <script>
        function addCity() {
//            1). 获取到用户在input输入框中填写的信息；
            var city = document.getElementById("city").value;
//            2). 创建一个城市的文本节点；
            var textNode = document.createTextNode(city);
//            3). 创建一个li的元素节点；
            var liEleNode = document.createElement('li');
//            4). 将文本节点添加到li元素节点里面去；
            liEleNode.appendChild(textNode);
//            5). 将整体添加到ul标签里面去;
            var ulEleNode = document.getElementById('ul_city');
            ulEleNode.appendChild(liEleNode);
        }

    </script>
</head>
<body>

    <input type="text" placeholder="请输入城市" name="city" id="city">
    <input type="submit" value="添加城市" onclick="addCity()">
    
<ul id="ul_city">
    <li>北京</li>
    <li>上海</li>

</ul>
</body>
</html>

在这里插入图片描述

七实现省市的二级联动

步骤分析：

确定事件类型onchange, 并为其绑定一个函数;
修改下拉列表内容;
2-1). 获取用户选择的省份;
2-2). 创建一个二维数组，用来存储省份和城市的对应关系;
2-3). 遍历二维数组中的省份；
2-4). 遍历时省份编号和用户选择的省份编号进行比较，
2-5). 如果相同，遍历该省份下的所有城市;
将每一个城市以城市名添加到select里面去;
2-6). 如果不相同，继续循环遍历省份;

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            margin: 0 auto;
            text-align: center;
            margin-top: 10%;
        }
    </style>

    <script>
        function changeCity() {

            // 1. 获取用户选择的省份;
            var choiceProvince = document.getElementById('province').value;
//            alert(choiceProvince);
            // 2. 创建一个二维数组， 用来存储省份和城市的对应关系;
            // 如何创建二维数组？
            var cites=new Array(3);
            // 默认的规则： 索引为0， 存储陕西的城市;
            cites[0] = new Array("西安","渭南","咸阳","宝鸡","延安");
            cites[1] = new Array("成都","乐山","绵阳","攀枝花");
            cites[2] = new Array("济南","青岛","烟台","枣庄");


            //8. 找出关于城市的下拉列表(根据id=“city”)
            var selectEleNode = document.getElementById('city');
            // 9. 清空第二个下拉列表里面的所有option标签;
            selectEleNode.options.length = 0;

            // 3. 遍历时省份编号和用户选择的省份编号进行比较
            for(var i = 0; i < cites.length; i++){
                //此处比较的是省份编号
                if  (choiceProvince == i){
                 // 4. 如果相同， 遍历该省份下的所有城市  ；
                 for(var j=0; j<cites[i].length; j++){
//                     alert(cites[i][j]);
                     //5. 创建城市的文本节点;
                     var textNode = document.createTextNode(cites[i][j]);

                     //6. 创建option的元素节点
                     var optionEleNode = document.createElement("option");

                     //7. 将城市的文本节点追加到option元素节点里面去;
                     optionEleNode.appendChild(textNode);

                     //9. 将option节点内容追加到select节点里面去;
                     selectEleNode.appendChild(optionEleNode);
                 }
                }
                // 5. 如果不相同，继续循环遍历省份;
            }
        }

    </script>
</head>
<body>

<form>
    <div>
        <span>籍贯：</span>
        <select id='province'  onchange="changeCity()">
            <option>--选择省份--</option>
            <option value="0">陕西省</option>
            <option value="1">四川省</option>
            <option value="2">山东省</option>
        </select>
        <select id="city">
            <option>--选择市区--</option>
        </select>
    </div>
</form>
</body>
</html>

在这里插入图片描述