Mein 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>

Mein 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;
}

Meine 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);

Der Countdown-Timer aus meiner Datei "countdown.js" sollte irgendwo in der Mitte der Seite erscheinen, ist aber nicht vorhanden. Ich habe sowohl jQuery als auch die Skriptdatei in meinem HTML verknüpft. Keine Ahnung warum es nicht funktioniert.

Diese Zeile ist dafür verantwortlich, den Countdown-Timer zu meinem # countdownTimer-Absatz hinzuzufügen.

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

Und hier ist der Absatz:

<p id="countdownTimer"></p>
2
ondrejm 18 Apr. 2018 im 12:27

3 Antworten

Beste Antwort

@Arpit-Antwort erweitern. Das Problem hierbei ist, dass Sie das Jquery-Framework nicht gut genug verknüpfen. Möglicherweise liegt ein Pfadfehler vor.

Um diese Art von Problem zu vermeiden, empfehle ich dringend, CND-Server zu verwenden, um ein beliebiges Framework zu verknüpfen.

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

Ein weiterer Tipp, den ich geben könnte, ist, dass Sie dieses Tag möglicherweise in Ihrem <body> am Ende Ihres HTML-Codes hinzufügen müssen.

Dies verhindert einige Probleme mit der Ladezeit.

Hier ist Ihr exakter Code, der wie erwartet funktioniert.

Warnung : Sie haben dieselbe ID registerBox in zwei verschiedenen Elementen. Denken Sie daran, dass IDs eindeutig sein sollten.

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>
0
goediaz 18 Apr. 2018 im 10:59

Sie sollten Ihren Code in die Funktion document.ready einschließen

$(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);

});
-1
dtlvd 18 Apr. 2018 im 09:41

Fügen Sie jquery wie folgt korrekt in Ihr Head-Tag ein

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

Anstatt von

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

1
Arpit Arya 18 Apr. 2018 im 10:10