小编来给大家介绍js DIV延时几秒后消失或显示代码,这里我我介绍了利用js原生态的写法,然后讲述了利用jquery的写法,有需要的朋友可参考。
1、最常用的方法:
<script language='javascript' type='text/javascript'>
$(function () {
setTimeout(function () {
$("divid").show();
}, 6000);
})
</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" οnclick="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;width:150px;height:25px;background-color:green;font-size:12px;"> 恭喜你,操作成功! </div> </body> </html> |