JS

作者: Jasonyang5201 | 来源:发表于2019-04-25 18:57 被阅读0次

轮播图自动播放

需求：有一组图片，每隔3秒钟，就去切换一张，最终是一直不停的切换

技术分析：

切换图片：
每个三秒钟做一件事：

步骤分析：

1.确定事件：文档加载完成的事件 onload
2.事件要触发：init()
3.函数里面要做一些事情：（通常会去操作元素，提供交互）

1.开启定时器：执行切换图片的函数 changelmg()

4.changelmg()

1.获得要切换图片的那个元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            1. 确定事件: 文档加载完成的事件 onload
            2. 事件要触发 : init()
            3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
               1. 开启定时器: 执行切换图片的函数 changeImg()
            4.  changeImg()
               1. 获得要切换图片的那个元素
        -->
        <script>
            var index = 0;
            
            function changeImg(){
                
                //1. 获得要切换图片的那个元素
                var img = document.getElementById("img1");
                
                //计算出当前要切换到第几张图片
                var curIndex = index%3 + 1;  //0,1,2 
                img.src="../img/"+curIndex+".jpg";  //1,2,3
                //每切换完,索引加1
                index = index + 1;
            }
            
            function init(){
                
                setInterval("changeImg()",1000);
            }
            
        </script>
    </head>
    <body onload="init()">
        <img src="../img/1.jpg" width="100%" id="img1"/>
    </body>
</html>

完成页面定时弹出广告

需求分析

一般网页，当我们打开的时候，它在5之后，显示一个广告，让我们看5秒钟，然后他的广告就自动消失了！

技术分析

定时器

seInterval:每隔多少毫秒执行一次函数
2.setTimeout:多少毫秒之后执行一次函数
3.clearInterval
4,clearTimeout

显示广告 img.style.display = "block"
隐藏广告 img.style.display = "none"

步骤分析

1.确定事件：页面加载完成的事件 onload
2.事件要触发函数 init()
3.init函数里面做一件事情：

1.启动一个定时器：setTimeout()
2.显示一个广告

再去开启一个定时5秒钟之后，关闭广告

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            1. 确定事件: 页面加载完成的事件 onload
            2. 事件要触发函数:  init()
            3. init函数里面做一件事: 
               1. 启动一个定时器 : setTimeout() 
               2. 显示一个广告
                  1. 再去开启一个定时5秒钟之后,关闭广告
        -->
        
        <script>
        
            function init(){
                setTimeout("showAD()",3000);
            }
            
            function showAD(){
                //首先要获取要操作的img
                var img = document.getElementById("img1");
                //显示广告
                img.style.display = "block";
                
                //再开启定时器,关闭广告
                setTimeout("hideAD()",3000);
            }
            
            function hideAD(){
                //首先要获取要操作的img
                var img = document.getElementById("img1");
                //隐藏广告
                img.style.display = "none";
            }
        </script>
    </head>
    <body onload="init()">
        <img id="img1" src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;"/>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //window 对象是一个最顶层对象
//          window.setInterval("alert('123');",2000);
            function test(){
                console.log("setInterval 调用了");
            }
//          setInterval("test()",2000);
//          setTimeout("test()",2000);
            var timerID;
            function startDinshiqi(){
//              timerID = setInterval("test()",2000);
                timerID = setTimeout("test()",3000);
            }
            
            function stopDingshiqi(){
//              clearInterval(timerID);
                clearTimeout(timerID);
            }
            
        </script>
    </head>
    <body>
        <input type="button" value="开启定时器" onclick="startDinshiqi()" /><br />
        <input type="button" value="取消定时器" onclick="stopDingshiqi()"/><br />
    </body>
</html>

表单校验

需求：

当用户输入信息有问题的时候，我们就在输入框的后面给用户一个友好提示。

技术分析：

【HTML中innerHTML属性】
【JS中的常用事件】
onfocus事件：获得焦点事件
onblur:失去焦点
onkeyup:按键抬起事件
步骤分析：
代码实现：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            确认事件
            事件触发函数
            函数操作元素
            
            校验用户名
                1. 当用户鼠标移动到输入框中时候, 请给用户一个提示
                    事件: 焦点事件 onfocus
                    触发函数
                    函数里面要做一些事情
                        span 给用户提示信息
                        
                2. 当用户鼠标移开时候, 校验一下用户输入
                    事件: 失去焦点  onblur
                    触发函数
                    函数要干事情:
                        校验用户输入
                        得到用户输入的值
                        
                3. 当用户按键输入抬起的时候, 校验一下用户输入
        -->
        <script>
            
            function showTips(spanID,msg){
                var span = document.getElementById(spanID);
                span.innerHTML = msg;
            }
            
            function checkUsername(){
                
                /*
                 alert(this)  每一个函数中都隐藏着一个this指针, 指向的是当前事件触发对象 
                */
                var uValue = document.getElementById("username").value;
//              alert(uValue);
                var span = document.getElementById("span_username");
                if(uValue.length < 6){
                    span.innerHTML = "对不起,太短啦!"
                    return false;
                }else{
                    span.innerHTML = "恭喜您,够用!"
                    return true;
                }
            }
            
            function checkForm(){
                var flag = checkUsername();
                return flag;
            }
            
        </script>
    </head>
    <body>
        <form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()">
            用户名:<input type="text" id="username" onblur="checkUsername()"  onfocus="showTips('span_username','用户名长度不能小于6位')" /><span id="span_username"></span> <br />
            <input type="submit" value="注册" />
        </form>
            
    </body>
</html>

表单校验demo：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            引入外部的js文件
        -->
        <script type="text/javascript" src="../js/regutils.js" ></script>
        <script>
            /*
                1. 确定事件 : onfocus
                2. 事件要驱动函数
                3. 函数要干一些事情: 修改span的内容
            */
            function showTips(spanID,msg){
                //首先要获得要操作元素 span
                var span = document.getElementById(spanID);
                span.innerHTML = msg;
            }
            /*
                校验用户名:
                1.事件: onblur  失去焦点
                2.函数: checkUsername()
                3.函数去显示校验结果
            */
            function checkUsername(){
                //获取用户输入的内容
                var uValue = document.getElementById("username").value;
                //对输入的内容进行校验
                //获得要显示结果的span
                var span = document.getElementById("span_username");
                if(uValue.length < 6){
                    //显示校验结果
                    span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
                    return false;
                }else{
                    span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
                    return true;
                }
            }
            
            /*
             密码校验
             */
            function checkPassword(){
                //获取密码输入
                var uPass = document.getElementById("password").value;
                
                var span = document.getElementById("span_password");
                
                //对密码输入进行校验
                if(uPass.length < 6){
                    span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
                    return false;
                }else{
                    span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>";
                    return true;
                }
            }
            
            /*
             确认密码校验
             * */
            function checkRePassword(){
                //获取密码输入
                var uPass = document.getElementById("password").value;
                
                //获取确认密码输入
                var uRePass = document.getElementById("repassword").value;
                
                
                var span = document.getElementById("span_repassword");
                
                //对密码输入进行校验
                if(uPass != uRePass){
                    span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>";
                    return false;
                }else{
                    span.innerHTML = "";
                    return true;
                }
            }
            
            /*
             校验邮箱
             * */
            function checkMail(){
                var umail = document.getElementById("email").value;
                
                var flag = checkEmail(umail);
                
                var span = document.getElementById("span_email");
                //对邮箱输入进行校验
                if(flag){
                    span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
                    return true;
                }else{
                    span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
                    return false;
                }
            }
            
            function checkForm(){
                var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
                return flag;
            }
            
        </script>
    </head>
    <body>
        <form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()" >
            用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
            密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
            确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
            邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" /><span id="span_email"></span><br />
            手机号:<input type="text" id="text" /><br />
            
            <input type="submit" value="提交" />
        </form>
    </body>
</html>

上午回顾：

定时器:
setIntervarl("test（)",3000)每隔多少毫秒执行一次函数
setTimeout("test()",3000)多少毫秒之后执行一次函数
timerID上面定时器调用之后
clearInterval()
clearTimeout()
切换图片
img. src = "图片路径"
事件：文本加载完成的事件 onload事件
显示广告：img.style.display = "block"
隐藏广告：img.style.diplay = "none"

引入一个外部js文件

<script src="js文件的路径" type="text/javascript"/>

表单校验中常用的事件：
获得焦点事件 onfocus
失去焦点事件 onblur
按键抬起事件 onkeyup

JS开发步骤
1.确定事件
2.事件要触发函数：定义函数
3.函数通常都要做一些交互：点击，修改图片，动态修改innerHTML属性...innerTEXT

表格隔行换色

需求分析

我们商品分类的信息太多，如果没一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色

技术分析

改变行的颜色

步骤分析

代码实现

<!DOCTYPE html>
<html lang="en">
<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></title>
    <!-- 
        1.确定事件
        2.事件要触发函数：init（）
        3.函数：操作页面的元素
                要操作表格中每一行
                动态的修改行的背景颜色
    -->
     <script>
     function init(){
         //得到表格
        var tab = document.getElementById("tab");
        //得到表格中每一行
        var rows =tab.rows;
        //便利所有的行，然后根据奇数 偶数
        for(var i=0;i < rows.length; i++){
            var row = rows[i];//得到其中某一行

            if(i%2==0){
                row.bgColor = "yellow";
            }else{
                row.bgColor = "red"

            }
        }


     }
     </script>
</head>
<body onload="init()" >
    <table border="1px" width="600px" id="tab">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>1</td>
            <td>手机数码</td>
            <td>华为，小米，尼康</td>
            <td>黑马数码产品质量最好</td>
            <td>
                <a href="#">修改</a>|<a href="#">删除</a>
            </td>
        
         </tr>
         <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>2</td>
                <td>电脑办公</td>
                <td>联想，小米</td>
                <td>笔记本特卖</td>
                <td><a href="#">修改</a>|<a href="#">删除</a></td>
            
             </tr>
             <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>3</td>
                    <td>馋嘴零食</td>
                    <td>辣条，麻花，黄瓜</td>
                    <td>年货</td>
                    <td><a href="#">修改</a>|<a href="#">删除</a></td>
                
                 </tr>
                 <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>4</td>
                        <td>床上用品</td>
                        <td>床单，被套，四件套</td>
                        <td>都是套子</td>
                        <td><a href="#">修改</a>|<a href="#">删除</a></td>
                    
                     </tr>
                     <tr>
                            <td>
                                <input type="checkbox" />
                            </td>
                            <td>5</td>
                            <td>书</td>
                            <td>儿童，文学，小说</td>
                            <td>特价书</td>
                            <td><a href="#">修改</a>|<a href="#">删除</a></td>
                        
                         </tr>
                         
             </table>
   
</body>
</html>

表格的全选和全不选

<!DOCTYPE html>
<html lang="en">
<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></title>
    <!-- 
        1.确定事件
        2.事件要触发函数：init（）
        3.函数：操作页面的元素
                要操作表格中每一行
                动态的修改行的背景颜色
    -->
     <script>
     function init(){
         //得到表格
        var tab = document.getElementById("tab");
        //得到表格中每一行
        var rows =tab.rows;
        //便利所有的行，然后根据奇数 偶数
        for(var i=1;i < rows.length; i++){
            var row = rows[i];//得到其中某一行

            if(i%2==0){
                row.bgColor = "yellow";
            }else{
                row.bgColor = "red"

                }
            }
        }   
        /*
            全选和全不选步骤分析：
              1.确定事件： onclick 单机事件
              2.事件触发函数：checkAll()
              3.函数要去做一些事情：
                获得当前第一个checkbox的状态
                获得所有分类项的checkbox
                修改每一个checkbox的状态
        */

        function checkAll(){
 //           获得当前第一个checkbox的状态
            var check1 = document.getElementById("check1");
                //得到当前checked状态
                var checked = check1.checked;
   //             获得所有分类项的checkbox
    //        var checks = document.getElementsByTagName("input");
              var checks = document.getElementsByName("checkone");
//              alert(checks.length);
            for(var i = 0 ; i < checks.length;i++){
    //           修改每一个checkbox的状态  
                    var checkone = checks[i];
                    checkone.checked = checked;
            }
        }
     </script>
</head>
<body onload="init()" >
    <table border="1px" width="600px" id="tab">
            <tr>
                    <td>
                        <input type="checkbox" onclick="checkAll()" id="check1" / >
                    </td>
                    <td>分类ID</td>
                    <td>分类名称</td>
                    <td>分类商品</td>
                    <td>分类描述</td>
                    <td>操作</td>
                
                 </tr>
        <tr>
            <td>
                <input type="checkbox" name="checkone" />
            </td>
            <td>1</td>
            <td>手机数码</td>
            <td>华为，小米，尼康</td>
            <td>黑马数码产品质量最好</td>
            <td>
                <a href="#">修改</a>|<a href="#">删除</a>
            </td>
        
         </tr>
         <tr>
                <td>
                    <input type="checkbox" name="checkone"/>
                </td>
                <td>2</td>
                <td>电脑办公</td>
                <td>联想，小米</td>
                <td>笔记本特卖</td>
                <td><a href="#">修改</a>|<a href="#">删除</a></td>
            
             </tr>
             <tr>
                    <td>
                        <input type="checkbox" name="checkone" />
                    </td>
                    <td>3</td>
                    <td>馋嘴零食</td>
                    <td>辣条，麻花，麻瓜</td>
                    <td>年货</td>
                    <td><a href="#">修改</a>|<a href="#">删除</a></td>
                
                 </tr>
                 <tr>
                        <td>
                            <input type="checkbox" name="checkone" />
                        </td>
                        <td>4</td>
                        <td>床上用品</td>
                        <td>床单，被套，四件套</td>
                        <td>都是套子</td>
                        <td><a href="#">修改</a>|<a href="#">删除</a></td>
                    
                     </tr>
                     <tr>
                            <td>
                                <input type="checkbox" name="checkone" />
                            </td>
                            <td>5</td>
                            <td>书</td>
                            <td>儿童，文学，小说</td>
                            <td>特价书</td>
                            <td><a href="#">修改</a>|<a href="#">删除</a></td>
                        
                         </tr>
                         
             </table>
   
</body>
</html>

省市联动

需求分析

技术分析

什么是DOM：Document Object Model:管理我们的文档 增删改查规则

[HTML中的DOM操作]
一些常用的 HTML DOM 方法:
getElementById(id) - 获取带有指令 id 的节点（元素）
appendChiId(node) - 插入新的子节点（元素）
remmoveChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）子节点
attributes - 节点（元素）的属性节点

查找节点：

getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

增加节点：

createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode()创建文本节点。
inserBefore() 在指定的子节点前面插入新的子节点。
appendChild() 把新的子节点添加到指定节点。

JS

轮播图自动播放

需求：有一组图片，每隔3秒钟，就去切换一张，最终是一直不停的切换

技术分析：

步骤分析：

完成页面定时弹出广告

需求分析

技术分析

步骤分析

表单校验

需求：

技术分析：

上午回顾：

表格隔行换色

需求分析

技术分析

步骤分析

代码实现

表格的全选和全不选

省市联动

需求分析

技术分析

查找节点：

增加节点：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读