zoukankan      html  css  js  c++  java
  • js DIV延时几秒后消失或显示代码

     

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xiaoya_syt/article/details/54631559
    小编来给大家介绍js DIV延时几秒后消失或显示代码,这里我我介绍了利用js原生态的写法,然后讲述了利用jquery的写法,有需要的朋友可参考。
     
     

    1、最常用的方法:

    1.  
      <script language='javascript' type='text/javascript'>
    2.  
      $(function () {
    3.  
      setTimeout(function () {
    4.  
      $("divid").show();
    5.  
      }, 6000);
    6.  
      })
    7.  
      </script>


    2、第二种方法

    jquery 让一个div延时消失,纯jQuery,不用settimeout,就用jQuery写。

       
       
       
     代码如下 复制代码

     
    <script language='javascript' type='text/javascript'>
    $(document).ready(
        function()
        {
            /**
            *1.delay函数是jquery 1.4.2新增的函数
            *2.hide函数里必须放一个0,不然延时不起作用
            */
            $('#divid').delay(6000).hide(0);
        }
    );
    </script>

    完整实例

     代码如下 复制代码

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>div层延时消失</title>
    <script>
    function operate()
    {
        document.getElementById('div_test').style.display="";
        setTimeout("disappeare()",2000);
    }
    function disappeare(){
        document.getElementById('div_test').style.display="none";
    }
    </script>
    </head>

    <body>
    <input type="button" onclick="javascript:operate()" value="操作"/>
    <div id="div_test" style="display:none;color:white;line-height:25px;position:absolute;z-index:100;left:50%;top:2%;margin-left:-75px;text-align:center;150px;height:25px;font-size:12px;">
        恭喜你,操作成功!
    </div>
    </body>
    </html>

  • 相关阅读:
    MVC4中EasyUI Tree异步加载JSON数据生成树
    Linq语法
    委托的多种写法
    centos7安装Hive2.3.0
    ApacheKylin笔记
    把普通的JavaProject变成MavenProject
    eclipse 手动/自动安装插件
    我的JdbcUtils类
    Druid 连接池 JDBCUtils 工具类的使用
    Maven下载cxf所需要的jar包
  • 原文地址:https://www.cnblogs.com/lsongyang/p/10723165.html
Copyright © 2011-2022 走看看