<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         * {

             margin: 0;

             padding: 0;

         }

         .site-nav {

             height: 30px;

             background-color: #ccc;

         }

         .top-banner {

             background-color: orange;

         }

         .w {

             width: 1200px;

             height: 80px;

             background-color: pink;

             margin: 0 auto;

             position: relative;

         }

         .search {

             width: 1200px;

             height: 80px;

             background-color: lemonchiffon;

             margin: 0 auto;

         }

         a {

             position: absolute;

             top: 10px;

             right: 10px;

             width: 25px;

             height: 25px;

             text-align: center;

             line-height: 25px;

             background-color: #000;

             color: #fff;

             text-decoration: none;

         }

     </style>

 </head>

 <body>

     <div class="site-nav"></div>

     <div class="top-banner" style="opacity: 1">

         <div class="w">

             <a href="#">×</a>

         </div>

     </div>

     <div class="search"></div>

     <script>

         //获取事件源

         var topBanner = document.getElementsByClassName("top-banner")[0];

         var a = topBanner.children[0].firstElementChild || topBanner.children[0].firstChild;

         //定义定时器

         var timer = null;

         a.onclick = function(){

             timer = setInterval(function(){

                 topBanner.style.opacity -=.1;

                 if (topBanner.style.opacity < 0) {

                     topBanner.style.display = "none";

                     clearInterval(timer);

                 }

             },50);

         }

     </script>

 </body>

 </html>

javascript 模拟京东关闭广告栏的更多相关文章

  1. 项目总结15：JavaScript模拟表单提交(实现window.location.href-POST提交数据效果)

    JavaScript模拟表单提交(实现window.location.href-POST提交数据效果) 前沿 1-在具体项目开发中,用window.location.href方法下载文件,因windo ...

  2. Javascript模拟继承（赠送.net吐槽一段）

    首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...

  3. 用原生javascript模拟经典FC游戏公路争霸

    #用原生javascript模拟经典FC游戏公路争霸 前几天看了园子里面的随笔 [原生javascript开发仿微信打飞机小游戏](http://www.cnblogs.com/Mr-Nobody/p ...

  4. [原创]Javascript模拟“类”的综合实现方式以及部分细节【截至ES6】

    [原创]Javascript模拟“类”的综合实现方式以及部分细节[截至ES6] 前言   最近几个旧项目里使用的图片编辑插件出现Bug, 经Review 后确定需要在其内外均做些改动,但是头疼的发现部 ...

  5. JavaScript 模拟键盘事件

    JavaScript 模拟键盘事件和鼠标事件(比如模拟按下回车等) 2016年09月08日 15:23:25 神秘_博士 阅读数:41158 标签: javascript鼠标键盘事件模拟更多 个人分类 ...

  6. python+selenium模拟京东登录后台

    python+selenium模拟京东登录后台 import json from time import sleep from selenium import webdriver #from sele ...

  7. JavaScript中setInterval关闭问题

    这篇博客主要记录下学习中碰到的一些问题(以防忘记). JavaScript中,在setInterval中关闭该定时器,但是此次执行也会完成,用语言描述不太容易,直接看代码: var i=1; var ...

  8. 模拟京东商城登陆HttpRequest

    利用Winform HttpRequest 模拟登陆京东商城 目前只获取订单信息,可以获取图片等其他信息 using System; using System.Collections.Generic; ...

  9. 用Javascript模拟微信飞机大战游戏

    最近微信的飞机大战非常流行,下载量非常高. 利用JS进行模拟制作了一个简单的飞机大战[此源码有很多地方可以进行重构和优化] [此游戏中没有使用HTML5 任何浏览器都可以运行]. 效果图: 原理:利用 ...

随机推荐

  1. HDOJ2032_杨辉三角

    这是一道水题,思路很简单,把杨辉三角先求出来,然后按照输入将相应的层数的杨慧三角输出即可. HDOJ2032_杨辉三角 #include<stdio.h> #include<stdl ...

  2. PAT 1019 数字黑洞

    https://pintia.cn/problem-sets/994805260223102976/problems/994805302786899968 给定任一个各位数字不完全相同的4位正整数,如 ...

  3. ECSHOP广告调用广告位添加到首页顶部通栏教程

    ECSHOP广告调用广告位添加到首页顶部通栏教程 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2012-05-26   ECSHOP系统默认预留的广告位很少,如何才能 ...

  4. 关于Windows 2019 antimalware 进程占用CPU 过多的处理方法 关闭windows 病毒防护的方法

    0. 客户端打开报错 重启之后 响应速度很慢. 解决办法: 1. 打开组策略 gpedit.msc 2.  选择位置为 3. 查看 进程里面后台程序 antimalware 进程消失 即可

  5. [转帖] cnblog新闻区 “40岁以上的员工，请自觉离开”

    “40岁以上的员工,请自觉离开” 投递人 itwriter 发布于 2018-04-29 22:36 评论(9) 有2733人阅读 原文链接 [收藏] « » “准确地说,华为目前要裁掉的.清退的,是 ...

  6. live-server

    live-server的安装与使用 初始化npm:npm init 安装live-server:cnpm install -g live-server 根目录启动live-server:live-se ...

  7. Jquery 组 tbale表格隔行变色

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  8. 配置自己的Maven方式并使用Maven 运行项目Idea的maven的项目

    (1) 当安装了 maven之后,需要导入项目代码,然后编译执行: 打开Idea ==>然后点击小扳手==>在搜索框中输入maven==>然后找到 Maven home direct ...

  9. MSSQL约束【转】

    为了减少数据冗余和使数据库内容变的严谨,MSSQL数据库里引入了关系和约束.我们平时做一些小程序,需要使用到MSSQL数据库的时候大多没有严格去规划一下数据库的设计,但是真正开发的时候需要你严格的进行 ...

  10. 【Java】 枚举类

    如果要定义一个枚举类: public enum Size { SAMLL, MEDIUM, LARGE, EXTRA, EXTRA_LARGE}; 实际上,这个声明定义的类型是一个类,它刚好有4个实例 ...