求JS大神慷慨,我想要实现,一个DIV根据时间自动隐藏显示,具体如下:
一个DIV一开始是显示的,上面有关闭按钮,如果点击关闭按钮,5秒后自动再次显示,如果没有点击关闭按钮,显示15秒后自动关闭,5秒后显示,一直这样循环;目前我就只能弄关闭后...
一个DIV一开始是显示的,上面有关闭按钮,如果点击关闭按钮,5秒后自动再次显示,如果没有点击关闭按钮,显示15秒后自动关闭,5秒后显示,一直这样循环;目前我就只能弄 关闭后显示,可是第二个不关闭然他显示和隐藏不行。
<script type="text/javascript">
function hide_Window(){
$('#bigdiv').css('display','none');
window.setTimeout("show_Window()",5000);
}
function show_Window(){
$('#bigdiv').css('display','block');
window.setTimeout("hide_Window()",15000);
}
</script>
<div id="bigdiv" style="width:230px; height:80px; display:block; position:fixed; _position:absolute; margin-left:-120px; margin-top:-100px;z-index: 9999; top:50%; left:50%;">
<div style="background-color:#96C;color:#fff;height:80px;">dfsdf</div>
<div style="position: absolute;right:0px;top:0px;cursor:pointer;"><a onclick="hide_Window()">X</a></div>
</div> 展开
<script type="text/javascript">
function hide_Window(){
$('#bigdiv').css('display','none');
window.setTimeout("show_Window()",5000);
}
function show_Window(){
$('#bigdiv').css('display','block');
window.setTimeout("hide_Window()",15000);
}
</script>
<div id="bigdiv" style="width:230px; height:80px; display:block; position:fixed; _position:absolute; margin-left:-120px; margin-top:-100px;z-index: 9999; top:50%; left:50%;">
<div style="background-color:#96C;color:#fff;height:80px;">dfsdf</div>
<div style="position: absolute;right:0px;top:0px;cursor:pointer;"><a onclick="hide_Window()">X</a></div>
</div> 展开
2个回答
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
.hide{
display: none;
}
#bigdiv{
width:230px;
height:80px;
position:fixed;
_position:absolute;
margin-left:-120px;
margin-top:-100px;
z-index: 9999;
top:50%;
left:50%;
}
</style>
</head>
<body>
<div id="bigdiv" style="">
<div style="background-color:#96C;color:#fff;height:80px;">dfsdf</div>
<div style="position: absolute;right:0px;top:0px;cursor:pointer;"><a class="close">X</a></div>
</div>
</body>
<script src='jq.js'></script>//这是jquery库,用你原来的就行
<script type="text/javascript">
var $div = $('#bigdiv'),
si = null,
$close = $('.close');
$close.on('click', function() {
close();
});
function close() {
$div.addClass('hide');
setTimeout(function() {
$div.removeClass('hide');
sv($div, si);
}, 5000);
}
function sv($div, si) {
si = setTimeout(function() {
close();
}, 15000);
}
//init
sv($div, si);
</script>
</html>
追问
哥,不行,跟我之前弄的遇到一样的问题,就是点击关闭后,再次显示的显示时间有问题,比如你打开页面是4秒后关闭,然后5秒后显示,出现一个问题就是,他显示的时间是11秒然后自动关闭 不是15秒
追答
function close() {
clearTimeout(si);
$div.addClass('hide');
setTimeout(function() {
$div.removeClass('hide');
sv($div);
}, 5000);
}
function sv($div) {
si = setTimeout(function() {
close();
}, 15000);
}
把这两个方法替换下
展开全部
用hide和show,别用css操作。$('#bigdiv').show()
更多追问追答
追问
不行呀,求给详细代码,目前就是可以实现点击关闭,然后5秒后显示,但是不能实现不点击关闭 显示15秒后 隐藏
追答
var hideshow;
function hide_Window(){
clearTimeout(hideshow);
hideshow = window.setTimeout("show_Window()", 4000);
$('#bigdiv').hide();
}
function show_Window() {
clearTimeout(hideshow);
hideshow = window.setTimeout("hide_Window()", 8000);
$('#bigdiv').show();
}
show_Window();
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询