DOM ------ 仿淘宝关闭二维码

简介: DOM ------ 仿淘宝关闭二维码

仿淘宝关闭二维码

完成效果如下:

8e83a8d73852472db76a154785e5e0b2.png

    //css代码
    .box{
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: blue;
        }
        .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;
        }
    //html代码
    <div class="box">
          二维码
          <img src="../Picture/二维码.png">
          <i class="close-btn">x</i>
      </div>
      //js代码
      var btn = document.querySelector('.close-btn')
        var box = document.querySelector('.box')
        // 2.注册事件 程序处理
        btn.onclick = function() {
            box.style.display = 'none'  //隐藏二维码
        }
相关文章
|
小程序 JavaScript
微信小程序向左滑动删除操作(类仿微信、QQ)
微信小程序向左滑动删除操作(类仿微信、QQ)
139 0
|
6月前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
432 0
|
8月前
|
小程序 容器
微信小程序echart图片不显示 问题解决
微信小程序echart图片不显示 问题解决
77 0
|
移动开发 小程序 JavaScript
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
604 0
|
8月前
|
JSON 小程序 JavaScript
【微信小程序】-- 页面事件 - 下拉刷新(二十五)
【微信小程序】-- 页面事件 - 下拉刷新(二十五)
|
缓存 资源调度 小程序
微信小程序(二十五)微信小程序富文本编辑器editor上传图片
一般在做网站开发的时候,最开始使用的一般都是百度的ueditor,但是这个玩意好久不更新了,功能到时够用,就是UI以及其他的一些套件的视觉效果稍差。
321 0
|
JSON 小程序 前端开发
微信小程序首页-----布局(详细教程赶快收藏吧)
微信小程序首页-----布局(详细教程赶快收藏吧)
195 0
|
小程序 前端开发
uniapp 微信小程序v-show 不显示
uniapp 微信小程序v-show 不显示
462 0
|
小程序 测试技术
微信小程序接收富文本编辑器图片大小解决方法
1、jmeter --大家用的比较多一些 2、postman或者newman --看到这里有的同学就说,这个是接口功能测试的,但是实际你并不懂,它也是博大精深的 3、java+httpclient,通过代码实现 4、java+restassured,通过代码实现 5、python+urllib2,用的很少了现在 6、python+requests,目前比较火一些 7、httprunner,好工具,可以改造,用的地方
266 0
|
移动开发 定位技术 API
手机端H5地图调起开发实战案例解析(百度高德腾讯地图调起、底部弹出层、提示安装地图导航APP)
手机端H5地图调起开发实战案例解析(百度高德腾讯地图调起、底部弹出层、提示安装地图导航APP)
626 0