<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. OAuth Implementation for ASP.NET Web API using Microsoft Owin.

    http://blog.geveo.com/OAuth-Implementation-for-WebAPI2 OAuth is an open standard for token based aut ...

  2. 关于C#中的垃圾回收

    http://cnn237111.blog.51cto.com/2359144/1343004    GC.Collect如何影响垃圾回收 主要是 //GC.Collect(); //GC.WaitF ...

  3. JDK 中的监控与故障处理工具-01

    当给系统定位问题的时候, 我们经常需要了解并分析 JVM 的运行时状态 . 那应该从哪些方面入手呢? 答案就是从数据入手 . 这里的数据包括: GC日志,异常堆栈, 线程快照(threaddump) ...

  4. .Net HttpClient form-data格式请求

    var multipartFormDataContent = new MultipartFormDataContent(); multipartFormDataContent.Add(new Stri ...

  5. Java 数据结构之双向链表

    一.概述: 1.什么是双向链表: 链表中的每个节点即指向前面一个节点,也指向后面一个节点,就像丢手绢游戏一样,每个人都手拉手 2.从头部插入 要对链表进行判断,如果为空则设置尾节点为新添加的节点,如果 ...

  6. 如何将JS里变量的值赋给文本框

    举个栗子: <html><HEAD><script type="text/javascript" language="Javascript1 ...

  7. static、final和finalize详解

    一.static 修饰符 数据共享 成员变量(实例变量)和静态变量(类变量)的区别 两个变量的生命周期不同 成员变量随对象的创建而存在,随对象被回收而释放 静态变量随类的加载而存在,随类的消失而消失 ...

  8. QT 样式表基础知识

    1. 何为Qt样式表2. 样式表语法基础3. 方箱模型4. 前景与背景5. 创建可缩放样式6. 控制大小7. 处理伪状态8. 使用子部件定义微观样式 8.1. 相对定位    8.2. 绝对定位 摘要 ...

  9. 机器学习经典书籍&论文

    原文地址:http://blog.sina.com.cn/s/blog_7e5f32ff0102vlgj.html 入门书单 1.<数学之美>PDF6 作者吴军大家都很熟悉.以极为通俗的语 ...

  10. 真正在线编辑的在线web编辑器

    最近正在研究开发一款在线web编辑器架构,这是一款真正傻瓜式的web编辑器,可以在正常浏览页面的情况进行编辑,经过测试,对于一般网页页面来说非常好用方便,操作更简单. 一般的在线web编辑器虽说提供了 ...