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>

原文地址:https://www.cnblogs.com/lsongyang/p/10723165.html