javascript - Javascript 在秒数消失时显示 DIV 元素，然后选择隐藏栏？

Question

我目前正在研究一种在几秒钟后显示内容的 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 元素？

这是CSS我只想在秒为 = 0 时显示的元素的代码：

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

那么我怎样才能让这个块出现而不是文本，并且在秒数 = 0 之前不可见。

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

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

提前致谢！

Answer 1

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

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

Answer 2

尝试这个

如果您想通过使用它们的类或 id 来显示和隐藏元素

前任

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

Answer 3

您可以使用JQueryhide()的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>