Question

我试图每小时显示一次<div>元素，但是当我添加以下内容时，代码不起作用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='showOnceAnHour' style='display: none'>
<script>
$(document).ready(function() {
    setInterval(function() {
        $("#showOnceAnHour").fadeIn().delay(10000).fadeOut();
    }, 60*60*1000);
});
</script>

没有它，此代码可以正常工作，但我想每小时显示一次该内容。请看看，让我知道我要去哪里了。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>

.btnadpop {
    background: #428bca;
    border: #357ebd solid 1px;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    padding: 8px 15px;
    text-decoration: none;
    text-align: center;
    min-width: 60px;
    position: relative;
    transition: color .1s ease;
}
.btnadpop:hover {
    background: #357ebd;
}
.btnadpop.btn-big {
    font-size: 18px;
    padding: 15px 20px;
    min-width: 100px;
}
.btn-close {
    color: #aaaaaa;
    font-size: 30px;
    text-decoration: none;
    position: absolute;
    right: 5px;
    top: 0;
}
.btn-close:hover {
    color: #919191;
}
.modaladpop:target:before {
    display: none;
}
.modaladpop:before {
    content:"";
    display: block;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}
.modaladpop .modal-dialoger {
    background: #fefefe;
    border: #333333 solid 1px;
    border-radius: 5px;
    margin-left: -200px;
    position: fixed;
    left: 50%;
    z-index: 11;
    width: 360px;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -moz-transition: -moz-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    top: 20%;
}
.modaladpop:target .modal-dialoger {
    top: -100%;
    -webkit-transform: translate(0, -500%);
    -ms-transform: translate(0, -500%);
    transform: translate(0, -500%);
}
.modal-bodyadpop {
    padding: 20px;
}
.modal-headeradpop, .modal-footer {
    padding: 10px 20px;
}
.modal-headeradpop {
    border-bottom: #eeeeee solid 1px;
}
.modal-headeradpop h2 {
    font-size: 20px;
}
.modal-footeradpop {
    border-top: #eeeeee solid 1px;
    text-align: center;
}
</style>
</head>

<body>
<div id='showOnceAnHour' style='display: none'>
<script>
$(document).ready(function() {
    setInterval(function() {
        $("#showOnceAnHour").fadeIn().delay(10000).fadeOut();
    }, 60*60*1000);
});
</script>

<!-- Modal -->
<div class="modaladpop" id="modal-one" aria-hidden="true">
    <div class="modal-dialoger">
        <div class="modal-headeradpop">
             <h2>Welcome</h2>
 

        </div>
        <div class="modal-bodyadpop">
            <p>This is an Example</p>
        </div>
        <div id="butnclose" class="modal-footeradpop"> <a href="#modal-one" class="btnadpop">Close</a>
        <script>
        document.getElementById("butnclose").style.display = "none";

        function showStuff() {
            document.getElementById("butnclose").style.display = "block";
        }


        setTimeout(showStuff, 5000);
    
</script>

        </div>
    </div>
</div>
</div>

</body>
</html>

Answer 1

您尝试使用jQuery选择器，但未导入jQuery库，可以通过在HTML头中添加它来实现：

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Answer 2

您只是在代码中缺少JQuery CDN或静态导入。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='showOnceAnHour' style='display: none'><h1>Div</h1></div>
<script>
$(document).ready(function() {
    setInterval(function() {
        $("#showOnceAnHour").fadeIn().delay(10).fadeOut();
    }, 60);
});
</script>



<h3>I Just changes the fadeIn and fadeOut time for demo purpose</h3>

每小时显示一次<div>

2 个答案: