2016-05-04 11 views
0

私は割り当てのためのカウントダウンクロックを持っています。私は教授に助けを求めたが、彼女は私を助​​けなかった。 Chromeではうまく動作しますが、他のすべてのブラウザでは中断して時刻が表示されません。Javascriptはクロムで動作しますが、他のブラウザでは動作しません

ここでは、HTML、Javascript、およびCSSです。私は、コードを実行すると、それはここでは動作しますが、それは、Firefox、IE上で動作していないとなど

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);
body{ 
 
\t text-align: center; 
 
\t background: white; 
 
    font-family: sans-serif; 
 
    font-weight: 100; 
 
} 
 

 
h1{ 
 
    color: #396; 
 
    font-weight: 100; 
 
    font-size: 40px; 
 
    margin: 40px 0px 20px; 
 
} 
 

 
#clockdiv{ 
 
\t font-family: sans-serif; 
 
\t color: black; 
 
\t display: inline-block; 
 
\t font-weight: 100; 
 
\t text-align: center; 
 
\t font-size: 30px; 
 
} 
 

 
#clockdiv > div{ 
 
\t padding: 10px; 
 
\t border-radius: 3px; 
 
\t background: rgb(209,0,0); 
 
\t display: inline-block; 
 
} 
 

 
#clockdiv div > span{ 
 
\t padding: 15px; 
 
\t border-radius: 3px; 
 
\t background: white; 
 
\t display: inline-block; 
 
} 
 

 
.smalltext{ 
 
\t padding-top: 5px; 
 
\t font-size: 16px; 
 
}
<!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"> 
 

 

 
\t <h2>Countdown to the next Auction</h2> 
 
\t <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 --> 
 

 
\t 
 
</section> \t 
 

 
</div> 
 

 
<footer> 
 
<ul> 
 
\t \t <li><a href="index.htm" title="Homepage">Elly Belly Style</a></li> 
 
\t \t <!-- <li><a href="http://ellybelly.bigcartel.com/" title="Ready To Ship">Ready To Ship</a></li> commented out for project--> 
 
\t \t <li><a href="npg_rts.htm" title="Ready To Ship">Ready to Ship</a></li> \t 
 
\t \t <!-- <li><a href="https://www.facebook.com/groups/ebsupcycles/" title="Elly Wars Auctions">Elly Wars Auctions</a></li> commented out for project--> 
 
\t \t <li><a href="npg_ellywars.htm" title="Elly Wars Auctions">Elly Wars</a></li> \t 
 
\t \t <li><a href="npg_pictures.htm" title="Completed Designs">Completed Designs</a></li> 
 
\t \t <li><a href="npg_about.htm" title="About Us">About Us</a></li> 
 
\t \t <li><a href="npg_custom.htm" title="Custom Order Inquiry">Custom Order Inquiry</a></li> 
 
\t \t <li><a href="npg_links.htm" title="Links">Links</a></li> 
 
\t \t <li><a href="npg_design.htm" title="Design Document">Design Document</a></li> 
 
\t \t <li><a href="npg_table.htm" title="Business Hours">Business Hours</a></li> 
 
\t \t <li><a href="npg_sitemap.htm" title="Sitemap">Sitemap</a></li> 
 
\t \t <li><img src="npg_mail.png" alt="email"/>Email: 
 
\t \t \t <script language="JavaScript"> <!-- 
 
\t \t \t \t document.write ('<A HREF="mai') 
 
\t \t \t \t document.write ('lto:ellybellybows') 
 
\t \t \t \t document.write ('&#64;') 
 
\t \t \t \t document.write ('gmail.com">ellybellybows') 
 
\t \t \t \t document.write ('&#64;') 
 
\t \t \t \t document.write ('gmail.com</A>') 
 
\t \t \t \t // email link hidden--> 
 
\t \t \t </script> 
 
\t \t </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>

+3

スタックオーバーフローは、コードデバッグサービスではありません。助けが必要な場合は、努力する意思があることを示す必要があります。たくさんのコードを投げ捨て、「うまくいきません」と言っても、私たちに無料で働くように頼むのと同じです。コードを[mcve]に更新してください。さもなければ、このトピックは[トピック外(#1)](/ help/on-topic)です。 – zzzzBov

+1

私はこのコミュニティを含め、明らかにこのすべてに新しいことをお詫び申し上げます。私の教授が私を助けてくれたら他の人の助けにはならなかったでしょう。 Firefoxでデバッガを実行しましたが、何も表示されませんでした。他のすべてのブラウザの時計には、NaN =日数aN =時間aN =分およびaN =秒が表示されます。 – LokisCoyote

+0

答えが与えられただけでコードを削除しないでください。 –

答えて

1

問題は、日付文字列の間違ったフォーマットで、ISO 8601形式、使用に従います。 2016-05-06T19:30:00+06:00

fiddle demo固定コードです。

+0

ありがとうございます。ほんとうにありがとう! – LokisCoyote

+1

@ LokisCoyoteちょっとあなたの問題が解決して以来、より関連性の高い情報を含めるようあなたの質問を編集してもらえますか?何が問題なのか、何を試したのか、さらに役立つコードスニペットが含まれています。これは、将来同様の問題を抱え、あなたの質問につきまとう人を助けるでしょう。また、それはちょうどよい練習になります:) – nick

関連する問題