关闭二维码

JS实现关闭图片窗口

有趣的小案例池子：
JS实现定时器
 JS实现关闭图片窗口
 JS实现输入检验
 获取焦点后隐藏提示内容的输入框
 JS实现获取鼠标在画布中的位置
 聊天信息框显示消息
 JS点击切换背景图
 自动切换背景的登录页面
 JS制作跟随鼠标移动的图片
 JS实现记住用户密码

结果演示

在这里插入图片描述

概述

通过事件的绑定来实现，关闭网页中某个图片窗口的效果。

构建HTML框架

<body>
    <div class="box">
        图片
        <img src="https://upload-bbs.mihoyo.com/upload/2021/03/11/73281682/f810fbc2e4806aab8176e96feee0078e_5530265271028193466.jpg" alt="">
        <i class="close-btn">×i>
    div>
body>
1
2
3
4
5
6
7

CSS样式

JS逻辑

<script>
        // 1. 获取元素 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2.注册事件 程序处理
        btn.onclick = function() {
            // 设置display为none 也就是不再显示二维码
            box.style.display = 'none';
        }
    </script>
1
2
3
4
5
6
7
8
9
10

完整代码

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>Documenttitle>
    <style>
        .box {
            /* 设置相对定位 */
            position: relative;
            /* 设置盒子的宽高 */
            width: 74px;
            height: 88px;
            /* 设置边框的样式 */
            border: 1px solid #ccc;
            /* 设置距离上方100px 左右居中 */
            margin: 100px auto;
            /* 设置字体大小为12px */
            font-size: 12px;
            /* 设置文本排列居中 */
            text-align: center;
            
            /* 设置颜色为橙色 */
            color: #f40;            
        }
        
        .box img {
            /* 设置图片的宽度 */
            width: 60px;
            height: 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="https://upload-bbs.mihoyo.com/upload/2021/03/11/73281682/f810fbc2e4806aab8176e96feee0078e_5530265271028193466.jpg" alt="">
        <i class="close-btn">×i>
    div>
    <script>
        // 1. 获取元素 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2.注册事件 程序处理
        btn.onclick = function() {
            // 设置display为none 也就是不再显示二维码
            box.style.display = 'none';
        }
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历等内容，让大家更好学习编程，我的抖音，B站也叫极客李华。大家喜欢也可以关注一下

相关阅读:
单一职责原则
 数据仓库规范
 修复vite中使用react提示Fast refresh only works when a file only exports components.
C++系统相关操作3 - 获取操作系统的平台类型
 葡萄糖-聚乙二醇-6-羧甲基荧光素 Glucose-PEG-6-FAM
SpringMvc如何向Session域中设置数据
 单片机电子元器件-按键
 C++ 20 协程（一）
华为机试 - 考古学家
 找准方向选CRM客户管理系统！2023年排行榜推荐
原文地址：https://blog.csdn.net/qq_51447496/article/details/128195955