倒数计时器在我的HTML中不起作用

时间:2018-03-18 02:01:37

标签: javascript html

我正在尝试让倒数计时器在我的网页上运行,但它不起作用,我无法弄清楚原因。我不知道是不是因为我在我的HTML中将它链接错了或是因为我错过了我的代码中的内容。任何帮助都会很感激。

"use strict";



setInterval(function() { ... }, 1000); // 1000 milliseconds = 1 second

// Function to display current date / time on the site
setInterval(function displayTimeAndDate() {
  var today = new Date();
  var hours = today.getHours();
  var minutes = today.getMinutes();
  var seconds = today.getSeconds();

  var date = today.getDate();
  var month = today.getMonth();
  var year = today.getFullYear();

  var amOrPm;

  // Check if it's a.m or p.m
  if (hours < 12) {
    amOrPm = "a.m";
  } else {
    amOrPm = "p.m";
  }

  document.getElementById('date').innerText = date + ":" + month + ":" + year;
  document.getElementById('time').innerText = hours + ":" + minutes + ":" + seconds + " " + amOrPm;
}, 1000);

setInterval(function countdown() {
  // Set the desired date (American date format: Month/Day/Year) to countdown to and the current date
  var endDate = new Date('07/04/2018 09:00 PM');
  var currentDate = new Date();

  // Get the "distance" between the dates
  var distance = endDate - currentDate;

  // Initialize days, hours, minutes and seconds
  var oneSecond = 1000; // 1000 milliseconds = 1 second
  var oneMinute = oneSecond * 60;
  var oneHour = oneMinute * 60;
  var oneDay = oneHour * 24;

  // Get distance in days, hours, minutes and seconds
  var days = Math.floor(distance / oneDay);
  var hours = Math.floor((distance % oneDay) / oneHour);
  var minutes = Math.floor((distance % oneHour) / oneMinute);
  var seconds = Math.floor((distance % oneMinute) / oneSecond);

  // Place 0 before the numbers if the are lower than 10
  hours = (hours < 10 ? "0" : "") + hours;
  minutes = (minutes < 10 ? "0" : "") + minutes;
  seconds = (seconds < 10 ? "0" : "") + seconds;


  document.getElementById('dLeft').innerText = days;
  document.getElmentById('hLeft').innerText = hours;
  document.getElementById('mLeft').innerText = minutes;
  document.getElementById('sLeft').innerText = seconds;
}, 1000);
<!DOCTYPE html>
<html lang="en">
   <head>
      <!--
         New Perspectives on HTML5 and CSS3, 7th Edition
         Tutorial 9
         Review Assignment
   
         Tulsa's Summer Party
         Author: 
         Date:   
   
         Filename: tny_july.html
   
      -->
      
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>Tulsa's Summer Party</title>
      <link href="tny_base.css" rel="stylesheet" />
      <link href="tny_layout.css" rel="stylesheet" />
	  <script src="tny_timer.js" defer></script>
	  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
   </head>

   <body>
      <header>
         <nav class="horizontal">       
            <ul>
               <li><a href="#">News</a></li>
               <li><a href="#">Night Beat</a></li>
               <li><a href="#">Tulsa Times</a></li>
               <li><a href="#">Calendar</a></li>
               <li><a href="#">City Links</a></li>
            </ul>
         </nav>  
              
         <img src="tny_banner2.png" id="logoImg" alt="" />
         <h1>Tulsa's<br />Summer Party</h1>
         <h2 id="timeHeading">Welcome to Tulsa</h2>
         <div id="currentTime"><span>11/3/2017</span><span>2:45:12 p.m.</span></div>
      </header>

      <article>
         <section>
            <h1>Countdown to the Fireworks</h1>
            <div id="countdown">
               <div><span id="dLeft">58</span><br />Days</div>
               <div><span id="hLeft">10</span><br />Hrs</div>
               <div><span id="mLeft">14</span><br />Mins</div>
               <div><span id="sLeft">48</span><br />Secs</div>
            </div>         
            <p>Celebrate the nation's birthday at <em>Tulsa's Summer
               Party</em>, a daylong extravaganza in downtown
               Tulsa on the 4th of July. The festivities start at 9 a.m.
               with a 5K and 10K walk or race. A great event
               for the whole family. Sign up as an individual or
               part of a team.
            </p>
            <p>The <em>Farmer's
               Market</em> is also back with farm-fresh produce,
               meats, and dairy. There's something for every
               pallet.</p>
         </section>

         <section>
            <p>Live music starts at 11 a.m. and continues through the day 
               with special appearances from <em>Falstaff
               Ergo</em>, <em>Crop Circles</em>, <em>Prairie Wind</em> and 
               <em>James Po</em>.
            </p>         
            <p>At 9 p.m. enjoy the <em>fireworks</em> that have won awards
               as the best in the Midwest, designed and presented by
               <em>Wizard Works</em>. Arrive early for the best seats!
            </p>
            <p>After the show, dance the night away to the music of 
               the <em>Chromotones</em>. 
            </p>
            <p>See you on the 4th!</p>
         </section>
         
         <nav class="vertical">
            <h1>Party Links</h1>
            <ul>
               <li><a href="#">5K and 10K Run</a></li>
               <li><a href="#">Famer's Market</a></li>
               <li><a href="#">Wizard Works</a></li>
               <li><a href="#">Falstaff Ergo</a></li>
               <li><a href="#">Crop Circles</a></li>
               <li><a href="#">James Po</a></li>
               <li><a href="#">Tulsa Fireworks</a></li>
               <li><a href="#">Prairie Wind</a></li>
            </ul>
         </nav>         
      </article>
      
      <footer>
         <address>
            Tulsa Summer Party &#183; 
            340 Main Street, Tulsa, OK 74102 &#183;
            (918) 555-3481
         </address>
      </footer>
   </body>

</html>

我的网页屏幕截图:http://prntscr.com/isp2hu

我一直在谷歌搜索并查看可能的问题,到目前为止还没有解决我的问题。

编辑:添加了我的CSS

@charset "utf-8";

@font-face {
   font-family: Segment14;
   src: url('segment14.woff') format('woff'),
        url('segment14.ttf') format('truetype');
}

/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 9
   Review Assignment

   Tulsa's Summer Party Layout Style Sheet
  
   Filename: tny_layout.css

   Segment14 font designed by Paul Flo Williams. Download at:
   http://www.1001fonts.com/segment14-font.html#styles

*/


/* HTML and Body styles */

html {
   background: linear-gradient(to bottom, rgb(120, 84, 23), rgb(51, 51, 51));
   font-family: Verdana, Geneva, sans-serif;
   min-height: 100%;
}

body { 
   margin: 0px auto;
   min-width: 340px;
   max-width: 1020px;  
   width: 100%;
   min-height: 100%;
}


/* Header styles */

header img#logoImg {
   display: block;
   width: 100%;
}

header {
   background: linear-gradient(to bottom, black 70%, rgb(185, 0, 102));
   border-bottom: 1px solid rgb(0, 0, 0);
   color: white;
   position: relative;
   width: 100%;
}

header > h1 {
   position: absolute;
   top: 15px;
   right: 10px;
   text-align: right;  
   font-size: 1.3em;
   letter-spacing: 0.05em;
   line-height: 1em;
   font-family: 'Times New Roman', serif;
   font-weight: normal;
   color: rgba(255, 0, 192, 0.7);
}

header > h2 {
   position: absolute;
   top: 15px;
   left: 10px;
   font-size: 0.9em;
   font-weight: normal;
   color: rgba(255, 82, 192, 0.8);
}

/* Navigation list styles */

header nav.horizontal {
   position: absolute;
   bottom: 0px;
   left: 0px;
   width: 100%;
   -webkit-flex: 0 1;
   flex: 0 1;   
}

body header nav ul {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row nowrap;
   flex-flow: row nowrap;
}

nav.horizontal ul li {
   -webkit-flex: 1 1;
   flex: 1 1;
   font-size: 0.8em;
   line-height: 1.5em;
   height: 1.5em; 
   font-family: 'Trebuchet MS', Helvetica, sans-serif;
   text-shadow: black 2px 1px 0px, black 4px 2px 5px;     
}

nav.horizontal ul li a {
   background-color: rgba(255, 255, 255, 0.2);
   display: block;
   color: rgba(255, 255, 255, 0.8);
   text-align: center;
}

nav.horizontal ul li a:hover {
   background-color: rgba(255, 88, 192, 0.5);
}

/* Time Clock Styles */

div#currentTime {
   display: block;
   position: absolute;
   top: 35px;
   left: 10px;   
   background-color: transparent;
   border: hidden;
   color: rgba(255, 82, 192, 0.8);
   width: 140px;
   font-size: 0.6em;
   line-height: 1.1em;
   font-family: 'Trebuchet MS', Helvetica, sans-serif;
   font-weight: normal;
}

div#currentTime span {
   display: block;
   width: 100%;
}

/* Styles for the Countdown Clock */

div#countdown {
   width: 100%;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row nowrap;
   flex-flow: row nowrap;
   margin-top: 10px;

}

div#countdown div {
   display: block;
   text-align: center;
   width: 100%;
   line-height: 1.5em;
   font-size: 0.5em;
   font-family: segment14, sans-serif;
   color: white;
   background: rgba(51, 51, 51, 0.7);
   margin: 0px 1px;
   padding: 5px;
   color: white;
}

div#countdown div span {
   font-size: 2em;   
}

/* Article Styles */

article { 
   background: white;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap; 
}

article section, article nav.vertical {
   -webkit-flex: 1 1 300px;
   flex: 1 1 300px;
}

section h1 {
   font-size: 1.2em;
   text-align: center;
   margin: 10px;
}

section p {
   margin: 20px;
}

/*Section 1 styles */

article section:nth-of-type(1) {
   background-color: rgba(255, 0, 192, 0.6);
}

/* Section 2 styles */

article section:nth-of-type(2) {
   background-color: rgba(255, 0, 192, 0.5);
}


/* Vertical navigation list styles */

nav.vertical {
   background-color: rgba(255, 0, 192, 0.7);
}

nav.vertical h1 {
   color: rgba(255, 255, 255, 0.7);
   text-shadow: rgba(192, 0, 145, 0.8) 2px 2px 5px;
   font-size: 1.35em;
   letter-spacing: 3px;
   text-align: center;
   padding: 10px;
   margin: 0px 0px 15px 0px;
   background-color: rgba(233, 0, 177, 0.5);
}


nav.vertical ul li {
   font-size: 0.82em;
   letter-spacing: 3px;
   text-align: center;
}


nav.vertical ul li a {
   display: block;
   padding-left: 30px;
   height: 32px;
   line-height: 32px;
   width: auto;
   color: rgb(51, 51, 51);
}

nav.vertical ul li a:hover {
   background-color: rgba(255, 192, 0, 0.45);
}


/* Page footer styles */

footer {
   clear: left;
   display: block;
}

footer address {
   display: block;
   font-style: normal;
   text-align: center;
   font-size: 0.5em;
   line-height: 20px;
   height: 20px;
   background-color: rgb(215, 0, 152);
   color: white;
}

/* =============================================
   Tablet and Desktop Styles: greater than 510px
   =============================================
*/
@media only screen and (min-width:511px) {
   
   header > h1 {
      font-size: 1.9em;
   }
   
   header > h2 {
      font-size: 1.1em;
   }
   
   div#currentTime {
      font-size: 0.9em;
      line-height: 1em;
   } 
   
   div#countdown {
      font-size: 1.3em;
   }
   
   footer address {
      font-size: 0.6em;
   }     
}

/* =============================================
   Tablet and Desktop Styles: greater than 640px
   =============================================
*/
@media only screen and (min-width:641px) {
      
   header > h1 {
      font-size: 2.4em;
   }
   
   header > h2 {
      font-size: 1.3em;
   }  
      
   nav.horizontal ul li {
      font-size: 1em;
   }
   
   div#currentTime {
      font-size: 1em;
      line-height: 1.1em;
      top: 40px;
   }   
   
   div#countdown  {
      font-size: 1.5em;
   }    
   
   footer address {
      font-size: 0.8em;
   }   
}

/* =============================================
   Tablet and Desktop Styles: greater than 720px
   =============================================
*/
@media only screen and (min-width: 721px) {
   header > h1 {
      font-size: 3.3em;
   }

   header > h2 {
      font-size: 1.5em;
   }
   
   div#currentTime {
      font-size: 1.1em;
      line-height: 1.2em;
      top: 40px;
   }
   
   div#countdown {
      font-size: 1.7em;
   }      
}

/* =============================================
   Tablet and Desktop Styles: greater than 1020px
   =============================================
*/
@media only screen and (min-width: 1021px) {

   body {
      margin: 40px auto;
   }   
}

3 个答案:

答案 0 :(得分:1)

你可以做一些简单的事情:

<强> HTML:

<div id="minutes"></div>
<div id="seconds"></div>

<强> JavaScript的:

// set minutes
var mins = 5;

// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
function countdown() {
    setTimeout('Decrement()',1000);
}
function Decrement() {
    if (document.getElementById) {
        minutes = document.getElementById("minutes");
        seconds = document.getElementById("seconds");
        // if less than a minute remaining
        if (seconds < 59) {
            seconds.value = secs;
        } else {
            minutes.innerHTML = getminutes();
            seconds.innerHTML = getseconds();
        }
        secs--;
        setTimeout('Decrement()',1000);
    }
}
function getminutes() {
    // minutes is seconds divided by 60, rounded down
    mins = Math.floor(secs / 60);
    return mins;
}
function getseconds() {
    // take mins remaining (as seconds) away from total seconds remaining
    return secs-Math.round(mins *60);
}

countdown();

答案 1 :(得分:0)

我用自己的功能替换了你的功能。

要每秒更新倒计时/当前时间/日期,我设置一个每秒执行一次功能的间隔:

setInterval(function() { ... }, 1000); // 1000 milliseconds = 1 second

获取日期的小时,分​​钟等的方法是

// Function to display current date / time on the site
setInterval(function displayTimeAndDate() {
  var today = new Date();
  var hours = today.getHours();
  var minutes = today.getMinutes();
  var seconds = today.getSeconds();

  var date = today.getDate();
  var month = today.getMonth();
  var year = today.getFullYear();

  // Place 0 before the numbers if the are lower than 10
  hours = (hours < 10 ? "0" : "") + hours;
  minutes = (minutes < 10 ? "0" : "") + minutes;
  seconds = (seconds < 10 ? "0" : "") + seconds;

  var amOrPm;

  // Check if it's a.m or p.m
  if (hours < 12) {
    amOrPm = "a.m";
  } else {
    amOrPm = "p.m";
  }

  document.getElementById('currentTime').innerText = month + "/" + date + "/" + year + " " + hours + ":" + minutes + ":" + seconds + " " + amOrPm;
}, 1000);

setInterval(function countdown() {
  // Set the desired date (American date format: Month/Day/Year) to countdown to and the current date
  var endDate = new Date('07/04/2018 09:00 PM');
  var currentDate = new Date();

  // Get the "distance" between the dates
  var distance = endDate - currentDate;

  // Initialize days, hours, minutes and seconds
  var oneSecond = 1000; // 1000 milliseconds = 1 second
  var oneMinute = oneSecond * 60;
  var oneHour = oneMinute * 60;
  var oneDay = oneHour * 24;

  // Get distance in days, hours, minutes and seconds
  var days = Math.floor(distance / oneDay);
  var hours = Math.floor((distance % oneDay) / oneHour);
  var minutes = Math.floor((distance % oneHour) / oneMinute);
  var seconds = Math.floor((distance % oneMinute) / oneSecond);

  // Place 0 before the numbers if the are lower than 10
  hours = (hours < 10 ? "0" : "") + hours;
  minutes = (minutes < 10 ? "0" : "") + minutes;
  seconds = (seconds < 10 ? "0" : "") + seconds;


  document.getElementById('countdown').innerText = days + " days, " + hours + " hours, " + minutes + " minutes, " + seconds + " seconds"
}, 1000);
<head>
  <!--
         New Perspectives on HTML5 and CSS3, 7th Edition
         Tutorial 9
         Review Assignment
   
         Tulsa's Summer Party
         Author: 
         Date:   
   
         Filename: tny_july.html
   
      -->

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tulsa's Summer Party</title>
  <link href="tny_base.css" rel="stylesheet" />
  <link href="tny_layout.css" rel="stylesheet" />
  <script src="tny_timer.js" defer></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
  <header>
    <nav class="horizontal">
      <ul>
        <li><a href="#">News</a></li>
        <li><a href="#">Night Beat</a></li>
        <li><a href="#">Tulsa Times</a></li>
        <li><a href="#">Calendar</a></li>
        <li><a href="#">City Links</a></li>
      </ul>
    </nav>

    <img src="tny_banner2.png" id="logoImg" alt="" />
    <h1>Tulsa's<br />Summer Party</h1>
    <h2 id="timeHeading">Welcome to Tulsa</h2>
    <div id="currentTime"></div>
  </header>

  <article>
    <section>
      <h1>Countdown to the Fireworks</h1>
      <div id="countdown"></div>
      <p>Celebrate the nation's birthday at <em>Tulsa's Summer
               Party</em>, a daylong extravaganza in downtown Tulsa on the 4th of July. The festivities start at 9 a.m. with a 5K and 10K walk or race. A great event for the whole family. Sign up as an individual or part of a team.
      </p>
      <p>The <em>Farmer's
               Market</em> is also back with farm-fresh produce, meats, and dairy. There's something for every pallet.
      </p>
    </section>

    <section>
      <p>Live music starts at 11 a.m. and continues through the day with special appearances from <em>Falstaff
               Ergo</em>, <em>Crop Circles</em>, <em>Prairie Wind</em> and
        <em>James Po</em>.
      </p>
      <p>At 9 p.m. enjoy the <em>fireworks</em> that have won awards as the best in the Midwest, designed and presented by
        <em>Wizard Works</em>. Arrive early for the best seats!
      </p>
      <p>After the show, dance the night away to the music of the <em>Chromotones</em>.
      </p>
      <p>See you on the 4th!</p>
    </section>

    <nav class="vertical">
      <h1>Party Links</h1>
      <ul>
        <li><a href="#">5K and 10K Run</a></li>
        <li><a href="#">Famer's Market</a></li>
        <li><a href="#">Wizard Works</a></li>
        <li><a href="#">Falstaff Ergo</a></li>
        <li><a href="#">Crop Circles</a></li>
        <li><a href="#">James Po</a></li>
        <li><a href="#">Tulsa Fireworks</a></li>
        <li><a href="#">Prairie Wind</a></li>
      </ul>
    </nav>
  </article>

  <footer>
    <address>
            Tulsa Summer Party &#183; 
            340 Main Street, Tulsa, OK 74102 &#183;
            (918) 555-3481
         </address>
  </footer>
</body>

编辑:

这次我没有修改HTML:

(我把它放在可执行代码段中,否则我无法正确格式化。)

// Function to display current date / time on the site
setInterval(function displayTimeAndDate() {
  var today = new Date();
  var hours = today.getHours();
  var minutes = today.getMinutes();
  var seconds = today.getSeconds();

  var date = today.getDate();
  var month = today.getMonth();
  var year = today.getFullYear();

  var amOrPm;

  // Check if it's a.m or p.m
  if (hours < 12) {
    amOrPm = "a.m";
  } else {
    amOrPm = "p.m";
  }

  document.getElementById('date').innerText = date + ":" + month + ":" + year;
  document.getElementById('time').innerText = hours + ":" + minutes + ":" + seconds + " " + amOrPm;
}, 1000);

setInterval(function countdown() {
  // Set the desired date (American date format: Month/Day/Year) to countdown to and the current date
  var endDate = new Date('07/04/2018 09:00 PM');
  var currentDate = new Date();

  // Get the "distance" between the dates
  var distance = endDate - currentDate;

  // Initialize days, hours, minutes and seconds
  var oneSecond = 1000; // 1000 milliseconds = 1 second
  var oneMinute = oneSecond * 60;
  var oneHour = oneMinute * 60;
  var oneDay = oneHour * 24;

  // Get distance in days, hours, minutes and seconds
  var days = Math.floor(distance / oneDay);
  var hours = Math.floor((distance % oneDay) / oneHour);
  var minutes = Math.floor((distance % oneHour) / oneMinute);
  var seconds = Math.floor((distance % oneMinute) / oneSecond);

  // Place 0 before the numbers if the are lower than 10
  hours = (hours < 10 ? "0" : "") + hours;
  minutes = (minutes < 10 ? "0" : "") + minutes;
  seconds = (seconds < 10 ? "0" : "") + seconds;


  document.getElementById('dLeft').innerText = days;
  document.getElmentById('hLeft').innerText = hours;
  document.getElementById('mLeft').innerText = minutes;
  document.getElementById('sLeft').innerText = seconds;
}, 1000);

答案 2 :(得分:-1)

查看FlipClock.js

html ...

<html>
    <head>
        <link rel="stylesheet" href="/assets/css/flipclock.css">
    </head>
    <body>
        <div class="your-clock"></div>

        <script src="/assets/js/libs/jquery.js"></script>
        <script src="/assets/js/flipclock/flipclock.min.js"></script>
    </body>
</html>

在JQuery中实例化

var clock = $('.your-clock').FlipClock({
// ... your options here
});

在JavaScript中实例化

var clock = new FlipClock($('.your-clock'), {
// ... your options here
});