夏日博客

A-A+

js DIV延时几秒后消失或显示代码

2016年10月16日 前端设计 暂无评论 阅读 6 views 次

小编来给大家介绍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写,代码如下:

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

完整实例,代码如下:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>div层延时消失</title>  
  6. <script>  
  7. function operate()  
  8. {  
  9.     document.getElementById('div_test').style.display="";  
  10.     setTimeout("disappeare()",2000);  
  11. }  
  12. function disappeare(){  
  13.     document.getElementById('div_test').style.display="none";  
  14. }  
  15. </script>  
  16. </head>  
  17. <body>  
  18. <input type="button" onclick="javascript:operate()" value="操作"/>  
  19. <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;width:150px;height:25px;background-color:green;font-size:12px;">  
  20.     恭喜你，操作成功！  
  21. </div>  
  22. </body>  
  23. </html>  
标签：

给我留言