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>

  • 相关阅读:
    Redis学习笔记1:Redis介绍
    《设计模式之禅》读书笔记1:单一职责原则
    如何在Word中设置其中一页为横向(Office 2013)
    Linux CentOS7 升级内核的方法
    升级openSSH
    Windows服务器杀掉端口的方法
    Linux 安装zlib
    Linux升级openssl
    Linux下安装Perl 5
    Linux 安装gcc
  • 原文地址:https://www.cnblogs.com/lsongyang/p/10723165.html
Copyright © 2011-2022 走看看