Javascript在秒消失时显示DIV元素，并在此之后隐藏栏的选项

Javascript show DIV element when seconds goes away and option to hide the bar after that?

本文关键字：在此之后 隐藏 选项 元素 消失 DIV 显示 Javascript      更新时间：2023-09-26

我目前正在研究一个在几秒钟后显示内容的Javascript。

这是我的脚本：

<script type="text/javascript">
$(function () {
var count = 5,
    countdown = setInterval(function () {
        $("p.countdown").html(count);
        if (count == 0) {
            $("p.countdown").html("MY TEXT POPUP");
            clearInterval(countdown);
        }
        count--;
    }, 1000);
});
</script>
<p class="countdown"></p>

所以现在我知道如何在几秒钟消失后显示文本，但我想问一下如果这个元素被隐藏，我如何显示 DIV 元素？

以下是我只想在秒数 = 0 时才显示的元素的CSS代码：

#countblock{
    display:none;
    width:200px;
    height:50px;
    position:absolute;
    background-color:#F1f1f1;
}

那么我如何使这个块出现而不是文本，并且在秒数 = 0 之前不可查看。

我的其他问题是我如何制作带有文本"X"的div 块元素，以及当您单击此"X"以隐藏块时？

我希望我能很好地解释我的问题。

提前感谢！

试试这个

如果要使用元素的类或 id 显示和隐藏元素

前任

$('#ID').show() // by id show
$('.countdown').hide() //by class hide

由于您在 CSS 中使用了display: none，因此您应该使用：

if (count == 0) {
            $("#countblock").css('display','block');
            clearInterval(countdown);
        }
您可以使用

JQuery 的hide()和show()函数：

if (count == 0) {
    $("p.countdown").html("MY TEXT POPUP");
    $("p.countdown").show();
    clearInterval(countdown);
}

或css()功能：

$("#countblock").css('display', 'block');

对于第二个问题，您可以使用函数click()：

<p id="clickToHide"> X </p>
<script>
    $('#clickToHide').click(function() {
        $('.countdown').hide();
    });
</script>
相关文章：