淘宝点击关闭二维码

需求：点击关闭之后，淘宝二维码关闭

分析：
①：点击的是关闭按钮
②：关闭的是父盒子
核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素

<!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;text-align: center;font-size: 12px;color: #f40;}.box img{width: 60px;margin-top: 5px;}.close_btn{position: absolute;top: -1px;left: -11px;width: 8px;height: 14px;line-height: 14px;          border: 2px solid #ccc;cursor: pointer;}</style>
</head>
<body><div class="box">淘宝二维码<img src="./images/code.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>

Web APls 阶段——第四节——案例:关闭淘宝二维码案例相关推荐

JavaScript-154：关闭淘宝二维码案例
样式 .box {position: relative;width: 300px;height: 300px;margin: 0 auto;border: 1px solid #ccc;text-al ...
案例:js实现关闭淘宝二维码
案例:js实现关闭淘宝二维码先看效果演示: js实现过程: 第1步.获取页面元素 var x = document.getElementById('x');//id比较好用,因为id具有唯一性// ...
3.用js实现关闭淘宝二维码
用js实现关闭淘宝二维码 css代码如下: <style> *{ margin:0 ; padding: 0; } .box{ border: 1px solid black; margi ...
案例：js简单实现关闭淘宝二维码
<案例演示> <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
利用js关闭淘宝二维码?
可下载图片 <html lang="en"> <head><meta charset="UTF-8"><meta na ...
前端案例——2.仿淘宝关闭二维码案例
  <! ...
仿淘宝关闭二维码案例
要求 : 当鼠标点击二维码关闭按钮的时候 , 则关闭整个二维码 . 案例分析: 核心思路 : 利用样式的显示和隐藏完成 , display:none隐藏元素 , display:block显示元素 . ...
JS仿淘宝关闭二维码案例
点击关闭按钮可以实现二维码的关闭功能 <!DOCTYPE html> <html lang="en"><head><meta charse ...
OpenCV C++案例实战三《二维码检测》
OpenCV C++案例实战三<二维码检测> 前言一.二维码检测二.二维码识别 1.通过findContours找到轮廓层级关系三.二维码绘制四.源码总结前言本文将使用Ope ...

Web APls 阶段——第四节——案例:关闭淘宝二维码案例

淘宝点击关闭二维码

Web APls 阶段——第四节——案例:关闭淘宝二维码案例相关推荐

最新文章

热门文章