<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>广告自动关闭</title>

    </head>

    <style>

        .tip{

            position: fixed;

            top: 100px;

            left: 400px;

            display: block;

            width: 400px;

            height: 200px;

            border-style: dotted;

            border-width: thin;

            border-color: darkgreen;

            background: #f0c;

            z-index: 100;

        }

    </style>

    <script type="text/javascript" src="js/base.js"></script>

    <script>

        /*

        window.onload = function(){

            var timer = setInterval(function(){

                var _span = document.getElementsByTagName("span")[0];

                _span.innerHTML -= 1;

                if(_span.innerHTML == 0){

                    clearInterval(timer);

                    document.getElementById("ad").style.display = "none";

                }

            },1000);

        }

        */

        window.onload = function(){

            var num = 5;

            var oDiv = document.getElementById("ad");

            var t = setInterval(function(){

                countDown();

                if(num == 0) {

                    clearInterval(t);

                    oDiv.style.display = "none";

                }

            },1000);

            function countDown(){

                oDiv.children[0].innerHTML -= 1;

                num--;

            }

        }

    </script>

    <body>

        <div id="ad" class="tip">

            我是一条广告，谢谢！

            <span style="color:yellow; font-weight:bold;">5</span>秒钟后自动关闭

        </div>

    </body>

</html>

　　

 

js之侧边栏分享的更多相关文章

  1. 基于jquery的侧边栏分享导航

    今天给大家分享一款基于jquery的侧边栏分享导航.这款分享钮一直固定于左侧,鼠标经过的时候凸出显示,这款分享按钮适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  2. JS模拟百度分享侧边栏效果

    模拟百度分享侧边栏的弹出与滑入效果.当鼠标移入#div1分享侧边栏,#div1分享侧边栏区块匀速滑出直至其全部露出.当鼠标移除#div1分享侧边栏,#div1分享侧边栏区块匀速滑入隐藏,直至恢复初始位 ...

  3. js动画实现侧边栏分享

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  4. JS组件系列——分享自己封装的Bootstrap树形组件：jqTree

    前言:之前的一篇介绍了下如何封装自己的组件,这篇再次来体验下自己封装组件的乐趣.看过博主博客的园友应该记得之前分享过一篇树形菜单的使用JS组件系列——Bootstrap 树控件使用经验分享,这篇里面第 ...

  5. [JS] HTML QQ分享界面js代码

    @ - @ :可以自己指定分享内容等....内含JS脚本 <html> <head> <title></title> <script type=& ...

  6. 微信js接口自定义分享内容

    最近客户有个要求,需要给网页添加微信分享功能,当然指的是用微信自带浏览器的时候,希望用户在最后一页点击分享的时候是分享的首页.曾经无意中看到过微信公众开发者平台提供了js接口,所以试着做了做,果然,跌 ...

  7. JS前端的分享功能

    给网页加上分享代码,借助网友的力量推广网站,目前已经很流行了 以下是网页代码 QQ空间分享代码如下: <a href="javascript:void(0);" onclic ...

  8. 工作中常用的JS函数整理分享（欢迎大家补充）

    今年在渣X工作整理的常用JS函数 今年来了渣X工作,我所在这个部门分工很奇怪,CSS竟然有专门的人在搞,开发PHP的人员需要处理JS,以至于有时候开发起来不是那么得心应手,感觉把JS和CSS拆开就像是 ...

  9. jweixin-1.1.0.js微信接口“分享给朋友”文字和图片配置

    在npm官网找到了:微信官方 js-sdk CommonJS 版https://www.npmjs.com/package/weixin-js-sdk 步骤一:引入JS文件在需要调用JS接口的页面引入 ...

随机推荐

  1. Hibernate的懒加载session丢失解决方法

    在web.xml加入spring提供的过滤器,延长session的生命周期 <!--Hibernate的懒加载session丢失解决方法 --> <filter> <fi ...

  2. static变量、static方法之间的异同

        private SchemeBean getEmptyScheme() {        SchemeBean scheme = new SchemeBean();        scheme ...

  3. 【bzoj5177】[Jsoi2013]贪心的导游（分块）

    题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=5177 在网上看到的题解基本都是用主席树,也就是带点骚操作的暴力直接艹过去的.这里分享一 ...

  4. Mysql CASE WHEN 用法

    select sum(1) as col_0_0_, sum(case vciinfo.useable when -1 then 1 else 0 end) as col_1_0_, sum(case ...

  5. LeetCode——Largest Rectangle in Histogram

    Question Given n non-negative integers representing the histogram's bar height where the width of ea ...

  6. （局部刷新）jquery.ajax提交并实现单个div刷新

    web开发中我们经常会遇到局部刷新页面的需求,以前我经常使用ajax和iframe实现局部刷新,后来做政府的项目,对页面的样式要求比较多,发现使用iframe控制样式什么的很麻烦,所以就采用了新的办法 ...

  7. SVN 与Eclipse 关联 || 安装beyond 插件

    1.让本地svn代码与库建立联系   右击项目名称,Team -  share project 2.本地svn版本一般与Eaclipse svn插件 版本一致!http://subclipse.tig ...

  8. Java循环跳转语句之 break

    生活中,我们经常会因为某些原因中断既定的任务安排.如在参加 10000 米长跑时,才跑了 500 米就由于体力不支,需要退出比赛.在 Java 中,我们可以使用 break 语句退出指定的循环,直接执 ...

  9. 【三小时学会Kubernetes！（零） 】系统结构及相关示例微服务介绍

    写在前面 牢牢占据容器技术统治地位的 Kubernetes,其重要性想必不言而喻,我保证本文是最详尽的 Kubernetes 技术文档,从我在后台排版了这么漫长的时间就能看出来.废话不多说 — — 以 ...

  10. UVALive-3713 Astronauts (2-SAT)

    题目大意:有三个任务A.B.C,n个已知年龄的人.A任务只能被年龄不小于平均年龄的人做,B任务只能被平均年龄以下的人做,C任务不限,相互讨厌的两个人不能做同一件任务,现在已知厌恶关系,求一种任务分配方 ...