DOM实例1

最新推荐文章于 2024-07-22 08:55:10 发布

晚枫~

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量48

点赞数

分类专栏： js练习文章标签： javascript html html5 css

本文链接：https://blog.csdn.net/IT913913/article/details/122928195

版权

js练习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.循环精灵图背景（精灵图一般会被提前设计好）（仿淘宝）（利用for循环设置一组元素的精灵图背景）

<!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>Document</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>
    <script>
        //1.获取元素 所有的小li
        var lis = document.querySelectorAll('li');
        for(var i =0;i<lis.length;i++){
            //让索引号  乘以 44 就是每个li 的背景y坐标
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -'+index+'px';
        }
    </script>
</body>
</html>

2.点击关闭二维码（仿淘宝）（当鼠标点击二维码关闭按钮的时候，则关闭整个二维码）

<!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>Document</title>
    <style>
        .box{
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* display: block; */
        }
        .box img{
            width: 60px;
            margin-top: 5px;
        }
        .close-btn{
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        晚枫二维码
        <img src="img/二维码.png" alt="">
        <i class="close-btn">x</i>
    </div>
    <script>
        //1.获取元素
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        //2.注册事件  程序处理
        btn.onclick = function(){
            box.style.display = 'none';
        }
    </script>
</body>
</html>

3.显示密码（仿京东）(点击按钮将密码切换为文本框，并可以查看密码明文)

<!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>Document</title>
    <style>
        .box{
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin:100px auto;
        }
        .box input{
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box img{
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <img src="img/不可见 (1).png" alt="" id="eye"> 
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        //1.获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        //2.注册事件  处理程序
        var flag = 0;
        eye.onclick = function(){
            //点击一次之后，flag一定要变化
            if(flag == 0){
                pwd.type = 'text';
                eye.src = 'img/可见.png';
                flag = 1;    //判断
            }else{
                pwd.type = 'password';
                eye.src = 'img/不可见 (1).png';
                flag = 0;    //取反
            }
        }
    </script>
</body>
</html>

晚枫~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM实例1

1.循环精灵图背景（精灵图一般会被提前设计好）（仿淘宝）（利用for循环设置一组元素的精灵图背景）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
复制链接

扫一扫