需求:打开页面只看到DIV2,等完秒数之后在显示DIV3。手动关闭DIV3后在重新数秒

我设置的间隔时间是3秒,代码如下:

html+css:

1: <!DOCTYPE HTML>

html>
head>
meta http-equiv="content-type" content="text/html;charset=utf-8">
title>Test</title>
style type="text/css">
   8:         height: 300px;
  10:         margin:0 auto;
  12:       }
  14:         margin:10px;
  16:       .div2{
  18:         height: 100px;
  20:       }
  22:         border: 1px dashed red;
  24:         height: 100px;
  26:       }
style>
head>
body>
div class="div1" id="div1">这是div1
<span id="showTime"></span> -->
div class="div2" id="div2">这是div2</div>
div class="div3" id="div3">这是div3
button id="closeDiv3">关闭div3</button>
div>
div>
body>
html>

js:

1: window.onload =function() {

   3:        var div2 = document.getElementById("div2");
   5:        var closeDiv3 = document.getElementById('closeDiv3');
   7:  
   9:        var countTime = 6;
  11:        function controlTime()
  13:          /*showTime.innerHTML = countTime +"秒后div2隐藏,div3显示";*/
  15:          countTime--;
  17:          {
  19:            div2.style.display = "none";
  21:            /*showTime.innerHTML = countTime1 +"秒后div3隐藏,div2显示";*/
  23:            {
  25:              div3.style.display = "none";
  27:            }
  29:        }
  31:        div3.onmouseover = function(){
  33:          closeDiv3.onclick = function(){
  35:            div3.style.display = "none";
  37:            /*showTime.innerHTML = countTime+"秒后div2隐藏,div3显示";*/
  39:        }
  40:       }

效果截图:

来源:http://www.ido321.com/582.html

问题:关于坛友的一个定时重复显示和隐藏div的实现的更多相关文章

  1. 问题:关于坛友的一个js轮播效果的实现

    需求:点击向前按钮进行向前翻页,向后按钮进行向后翻页,点击中间蓝色小圆圈可以来回自由切换 我的大概思路:先默认显示一个div  然后在原位置在隐藏一个div   给按钮添加click事件,转到下一个时 ...

  2. JQuery:怎么动态切换一个元素的显示、隐藏呢?原来隐藏就显示,原来显示就隐藏

    使用toggle() 方法:<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"& ...

  3. 用switch组件控制一个元素的显示和隐藏状态

    微信小程序开发(交流QQ群:604788754) WXML: <view class="body-view"> <switch bindchange=" ...

  4. 问题:关于一个坛友的html布局实现

    来源:http://www.ido321.com/888.html 坛友的需求如图 这个跟上次贴友分类菜单的实现类似 html: 1: <body> 2: <div class=&q ...

  5. 由一位坛友的布局想到的定位问题:absolute和relative

    坛友的问题和相关代码如下: 看看下面的代码.运行有问题.但是如果我把 style=”position:absolute; top:20px;left:10px改成 style=”float:left; ...

  6. js生成一个不重复的ID的函数的进化之路

    在MongoDB中的ObjectID,可以理解为是一个不会重复的ID,这里有个链接http://blog.csdn.net/xiamizy/article/details/41521025感兴趣可以去 ...

  7. java 多线程——一个定时调度的例子

    java 多线程 目录: Java 多线程——基础知识 Java 多线程 —— synchronized关键字 java 多线程——一个定时调度的例子 java 多线程——quartz 定时调度的例子 ...

  8. 【PHP】php生成一个不重复的数字(订单号、会员号)

    1.目的:利用php的do .. while 生成一个不重复的字符串或者数组,比如(订单号.会员号) 2.不废话,代码来: $repeat_order = array(); do{ $ordersn ...

  9. Key-Value是用一个不可重复的key集合对应可重复的value集合

    Key-Value是用一个不可重复的key集合对应可重复的value集合.(典型的例子是字典:通过页码的key值找字的value值). 例子: key1—value1; key2—value2; ke ...

随机推荐

  1. 1196: [HNOI2006]公路修建问题 - BZOJ

    Description OI island是一个非常漂亮的岛屿,自开发以来,到这儿来旅游的人很多.然而,由于该岛屿刚刚开发不久,所以那里的交通情况还是很糟糕.所以,OIER Association组织 ...

  2. Java 8 vs. Scala(一): Lambda表达式

    [编者按]虽然 Java 深得大量开发者喜爱,但是对比其他现代编程语言,其语法确实略显冗长.但是通过 Java8,直接利用 lambda 表达式就能编写出既可读又简洁的代码.作者 Hussachai ...

  3. python参考手册--第4、5、6、7章

    1.zip zip(s,t):将序列组合为一个元组序列[(s[0],t[0]), (s[1],t[1]), (s[2],t[2]), (s[3],t[3]),...] >>> s = ...

  4. Eclipse 插件开发 —— 深入理解查找(Search)功能及其扩展点

    引言 查找功能是计算机语言开发环境 / 平台的一个非常重要的特性.Eclipse 也不例外,它提供了丰富的查找功能(用户可以输入正则表达式或任意字符串,指定查找范围和匹配选项等等),并且提供了简单易用 ...

  5. hdu 3864 D_num

    思路:给一个数n,是否只有4个约数(包括1),也就是找3个大于1的约数. 而任何一个数都可由质数表示,所以对于给定的数,只需要进行质因数分解.这里有 2种情况:如果有3个一样的质因数,则满足条件:否则 ...

  6. IOS 系统API---NSJSONSerialization四个枚举什么意思

    IOS 系统API---NSJSONSerialization四个枚举什么意思 NSJSONReadingMutableContainers:返回可变容器,NSMutableDictionary或NS ...

  7. mongoDB入门必读

    一.概述 MongoDB是一个基于分布式文件存储的数据库开源项目. 由C++语言编写,旨在为WEB应用提供可护展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产品. ...

  8. CentOS7.1 JDK安装 和 CentOS7.1配置yum源

    1.卸载自带OPENJDK #查看自身jdk java -verson #查看自身安装的java  rpm -qa | grep java #显示如下 python-javapackages-3.4. ...

  9. Java面试题-锁

    1. 什么是可重入锁(ReentrantLock)?  答:  java.util.concurrent.lock 中的 Lock 框架是锁定的一个抽象,它允许把锁定的实现作为 Java 类,而不是作 ...

  10. git设置忽略某些文件或文件夹

    在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改 .gitignore 文件的方法.如果没有 .gitignore 文件,就自己创建一个,手动创建会提示你输入文件名称,因此,你 ...