DOM事件相关案例联系（循环精灵图、密码框验证信息）

一、循环精灵图

案例分析：

1、首先精灵图排布得有规律

2、核心思路：利用for循环改变精灵图的位置background-position

3、计算精灵图的位置，第一个位置是（0,44）

4、让循环里面的i索引号*44就是每个图片的y坐标

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例：循环精灵图</title>
//基本样式
<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style-type: none;
    }
    .box{
        width: 250px;
        margin: 100px auto;
    }
    .box li {
        float: left;
        width: 24px;
        height: 24px;
        background-color: pink;
        margin: 15px;
        background: url(./img/sprite.png) no-repeat;
    }
</style>
</head>
<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script>
    // 1、获取元素
    var lis = document.querySelectorAll('li')
    for(i=0;i<lis.length;i++){
        //让索引号 乘以44就是每个li的背景坐标 
        var index = i * 44
        lis[i].style.backgroundPosition = '0 -'+ index +'px';
    }
</script>
</html>

结果展示：

二、密码框验证信息

案例分析：

1、首先判断的事件是表单失去焦点 onblur

2、如果输入正确则提示正确的信息颜色为绿色小图标变化

3、如果输入不是6到16位，则提示错误信息颜色为红色小图标变化

4、因为里面变化样式较多，我们采取className修改样式

代码展示：

<!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>Document</title>
    //基本样式
    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(./img/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        .error{
            color: red;
            background-image: url(./img/wrong.png);
        }
        .right{
            color: green;
            background-image: url(./img/right.png);
        }
        
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        // 1.获取元素
      var ipt = document.querySelector('.ipt')
      var message = document.querySelector('.message')
        //2. 注册事件 失去焦点
        ipt.onblur = function(){
            // 根据标点里面值的长度
            if(this.value.length < 6 || this.value.length > 16 ){
            // console.log('错误');
            message.className = ('message error')
            message.innerHTML = ('您输入的为数不对，要求输入6-16位')
        }else {
            message.className = ('message right')
            message.innerHTML = ('您输入的位数正确')
        }
        }
    </script>
</body>
</html>

结果展示：

DOM事件相关案例联系（循环精灵图、密码框验证信息）

猜你喜欢