淘宝关闭二维码案例

Bertha 。 2023-02-17 06:18 23阅读 0赞

![在这里插入图片描述][20200612212552816.gif]  
素材：  
![在这里插入图片描述][20200612212616650.png]![在这里插入图片描述][20200612212653128.png]

<!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> .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="images/tao.png" alt="">
            <i class="close-btn">×</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>

[20200612212552816.gif]: https://img-blog.csdnimg.cn/20200612212552816.gif
[20200612212616650.png]: https://img-blog.csdnimg.cn/20200612212616650.png
[20200612212653128.png]: https://img-blog.csdnimg.cn/20200612212653128.png