Question

我有一个用于作业的倒计时时钟。我向我的教授求助，但她无法帮助我。它在Chrome中运行良好，但在所有其他浏览器中都是中断并且不显示时间。

这里是HTML，Javascript和CSS。它在我运行代码时可以在这里工作，但它不适用于Firefox，IE等。

＆＃13;

function getTimeRemaining(deadline) {
  var t = Date.parse(deadline) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, deadline) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining("2016-5-6 19:30:00 GMT+06:00");

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = '2016-5-6 19:30:00 GMT+06:00'; 
initializeClock('clockdiv', deadline);

＆＃13;

body{
	text-align: center;
	background: white;
  font-family: sans-serif;
  font-weight: 100;
}

h1{
  color: #396;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}

#clockdiv{
	font-family: sans-serif;
	color: black;
	display: inline-block;
	font-weight: 100;
	text-align: center;
	font-size: 30px;
}

#clockdiv > div{
	padding: 10px;
	border-radius: 3px;
	background: rgb(209,0,0);
	display: inline-block;
}

#clockdiv div > span{
	padding: 15px;
	border-radius: 3px;
	background: white;
	display: inline-block;
}

.smalltext{
	padding-top: 5px;
	font-size: 16px;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
 
 
 <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>Elly Belly Style</title>
<link href="npg_ebs.css" rel="stylesheet" type="text/css" />
<link href = "npg_clock.css" rel= "stylesheet" type="text/css"/>

</head>

<body>

<div id= "container">


	<h2>Countdown to the next Auction</h2>
	<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>
</section> <!-- end main column -->

	
</section>	

</div>

<footer>
<ul>
		<li><a href="index.htm" title="Homepage">Elly Belly Style</a></li>
		<!-- <li><a href="http://ellybelly.bigcartel.com/" title="Ready To Ship">Ready To Ship</a></li> commented out for project-->
		<li><a href="npg_rts.htm" title="Ready To Ship">Ready to Ship</a></li>	
		<!-- <li><a href="https://www.facebook.com/groups/ebsupcycles/" title="Elly Wars Auctions">Elly Wars Auctions</a></li> commented out for project-->
		<li><a href="npg_ellywars.htm" title="Elly Wars Auctions">Elly Wars</a></li>	
		<li><a href="npg_pictures.htm" title="Completed Designs">Completed Designs</a></li>
		<li><a href="npg_about.htm" title="About Us">About Us</a></li>
		<li><a href="npg_custom.htm" title="Custom Order Inquiry">Custom Order Inquiry</a></li>
		<li><a href="npg_links.htm" title="Links">Links</a></li> 
		<li><a href="npg_design.htm" title="Design Document">Design Document</a></li> 
		<li><a href="npg_table.htm" title="Business Hours">Business Hours</a></li>
		<li><a href="npg_sitemap.htm" title="Sitemap">Sitemap</a></li> 
		<li><img src="npg_mail.png" alt="email"/>Email:
			<script language="JavaScript"> <!--
				document.write ('<A HREF="mai')
				document.write ('lto:ellybellybows')
				document.write ('&#64;')
				document.write ('gmail.com">ellybellybows')
				document.write ('&#64;')
				document.write ('gmail.com</A>')
				// email link hidden-->
			</script>
		</li>
</ul>

</footer>

<script>
//script for dropdown button
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

<script src="npg_clock.js"></script>
</body>
</html>

＆＃13;

Answer 1

问题是日期字符串的格式不正确，请按照ISO 8601格式使用：2016-05-06T19:30:00+06:00。

fiddle demo固定代码。

Javascript适用于Chrome，但不适用于其他浏览器

1 个答案: