我的jQuery倒计时器没有在我的网站上显示

时间：2018-04-18 09:27:38

标签： javascript jquery html css html5

我的HTML：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <title>Event Website</title>
      <link rel="stylesheet" href="main.css">
      <script src="jquery-3.3.1.min.js"></script>
      <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'  type='text/css'>
   </head>
   <body>
      <div class="row" id="horniRow">
         <div class="col-md-6">
            <h3 id="nameH3">
               Event Website
            </h3>
         </div>
         <div class="col-md-6 menu" id="menuDiv">
            <ul id="menuList">
               <li><a href="">HOME</a></li>
               <li><a href="">BLOG</a></li>
               <li><a href="">SPEAKERS</a></li>
               <li><a href="">SCHEDULE</a></li>
               <li><a href="">ATTENDING</a></li>
               <li><a href="">SIGN IN</a></li>
            </ul>
         </div>
      </div>
      <div class="row" id="countdown-row">
         <div class="col-md-2"></div>
         <div class="col-md-8 text-center">
            <p id="countdownTimer"></p>
         </div>
         <div class="col-md-2"></div>
      </div>
      <div class="row" id="dolniRow">
         <div class="col-md-8"></div>
         <div class="col-md-4 id="registerBox">
            <div class="" id="registerBox">
               <h2 style=""><u style="color: #e60000">REGISTER</u></h2>
               <div style=""></div>
            </div>
         </div>
      </div>
      <script src="countdown.js"></script>
   </body>
</html>

我的CSS：

 #countdownTimer {
     font-family: 'Open Sans', sans-serif;
     font-size: 700%;
     background-color:rgba(0, 0, 0, 0.3);
     color: red;
}
 body{
     background-image: url("/img/depo.jpg");
     width: 100%;
     margin: 0;
     overflow: hidden;
}
 #menuList{
     display: inline;
}
 #registerBox{
     background-color: #333333;
     position: fixed;
     right: 0px;
     bottom: 0px;
}
 ul {
     list-style-type: none;
     float: right;
     margin-top: 20px;
     margin-right: 20px;
}
 li {
     float: left;
     margin: 5px;
     text-decoration: none;
}
 #menuDiv {
     text-align: right;
}
 div ul li a {
     text-decoration: none;
     color: black;
}
 #nameH3 {
     margin-left: 10px;
}

我的JS / jQuery：

var countDownDate = new Date("Sep 12, 2018 12:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  $("#countdownTimer").html(days + "d " + hours + "h " +
                            minutes + "m " + seconds + "s ")

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

来自我＆＃34; countdown.js＆＃34;的倒数计时器文件应该出现在页面中间的某个位置，但它不存在。我有jQuery和我的HTML链接的脚本文件。不知道为什么它不起作用。

此行负责将倒数计时器添加到我的#countdownTimer段落。

$("#countdownTimer").html(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");

以下是段落：

<p id="countdownTimer"></p>

3 个答案:

答案 0 :(得分：1)

在头标记中正确包含jquery，如下所示

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

而不是

<script src="jquery-3.3.1.min.js"></script>

答案 1 :(得分：0)

扩展@Arpit答案。这里的问题是你没有足够好地连接Jquery框架。这可能是一些路径错误。

为了防止出现此类问题，我强烈建议您使用CND服务器来链接任何框架。

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

我可以提供的另一个提示是，您可能需要在HTML底部的<body>内添加此标记。

这可以防止一些加载时间问题。

以下是您的完全代码正常运行。

警告：您在两个不同的元素中拥有相同的ID registerBox。请记住，ID应该是唯一的。

var countDownDate = new Date("Sep 12, 2018 12:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  $("#countdownTimer").html(days + "d " + hours + "h " +
                            minutes + "m " + seconds + "s ")

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
 #countdownTimer {
     font-family: 'Open Sans', sans-serif;
     font-size: 700%;
     background-color:rgba(0, 0, 0, 0.3);
     color: red;
}
 body{
     background-image: url("/img/depo.jpg");
     width: 100%;
     margin: 0;
     overflow: hidden;
}
 #menuList{
     display: inline;
}
 #registerBox{
     background-color: #333333;
     position: fixed;
     right: 0px;
     bottom: 0px;
}
 ul {
     list-style-type: none;
     float: right;
     margin-top: 20px;
     margin-right: 20px;
}
 li {
     float: left;
     margin: 5px;
     text-decoration: none;
}
 #menuDiv {
     text-align: right;
}
 div ul li a {
     text-decoration: none;
     color: black;
}
 #nameH3 {
     margin-left: 10px;
}
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <title>Event Website</title>
      <link rel="stylesheet" href="main.css">
      <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'  type='text/css'>
   </head>
   <body>
      <div class="row" id="horniRow">
         <div class="col-md-6">
            <h3 id="nameH3">
               Event Website
            </h3>
         </div>
         <div class="col-md-6 menu" id="menuDiv">
            <ul id="menuList">
               <li><a href="">HOME</a></li>
               <li><a href="">BLOG</a></li>
               <li><a href="">SPEAKERS</a></li>
               <li><a href="">SCHEDULE</a></li>
               <li><a href="">ATTENDING</a></li>
               <li><a href="">SIGN IN</a></li>
            </ul>
         </div>
      </div>
      <div class="row" id="countdown-row">
         <div class="col-md-2"></div>
         <div class="col-md-8 text-center">
            <p id="countdownTimer"></p>
         </div>
         <div class="col-md-2"></div>
      </div>
      <div class="row" id="dolniRow">
         <div class="col-md-8"></div>
         <div class="col-md-4 id="registerBox">
            <div class="" id="registerBox">
               <h2 style=""><u style="color: #e60000">REGISTER</u></h2>
               <div style=""></div>
            </div>
         </div>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="countdown.js"></script>
   </body>
</html>

答案 2 :(得分：-1)

您应该将代码包装在document.ready函数

中 
$(document).ready(function(){
    var countDownDate = new Date("Sep 12, 2018 12:00:00").getTime();

    // Update the count down every 1 second
    var x = setInterval(function() {

        // Get todays date and time
       var now = new Date().getTime();

        // Find the distance between now an the count down date
        var distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Display the result in the element with id="demo"
        $("#countdownTimer").html(days + "d " + hours + "h "
        + minutes + "m " + seconds + "s ")

        // If the count down is finished, write some text
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "EXPIRED";
        }
    }, 1000);

});
相关问题
最新问题