當實現javascript倒計時其他html元素消失

我做了一個佈局，並設置了一切，當我實現我的文本下的計數器部分所有其他HTML元素消失爲什麼？還有什麼方法可以在計數器達到特定時間時發出電子郵件提醒？當實現javascript倒計時其他html元素消失

<!doctype html> 
<html lang="en"> 

    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user- 
     scalable=0, width=device-width;"> 
     <title>Welcome to Tiffany &amp; Co.</title> 
     <link rel="stylesheet" href="index.css" 
     type="text/css" media="screen" /> 
     <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
     <!--Enable media queries in some unsupported subrowsers--> 
     <script type="text/javascript" src="css3-mediaqueries.js"></script> 
     <script type="text/javascript" src="main.js"></script> 
    </head> 

    <body> 
     <div id="wrapper"> 
      <h1>Welcome to Store</h1> 
      <p>The WiFi Password is:</p> 
      <h2 align=center> 
       <font color="red">Diamonds</font> 
      </h2> 
      <p>It will change in:</p> 
      <p> 
       <script type="text/JavaScript"> 
        window.document.onload = function() { 
         tick(); 
         setInterval(tick, 1000); 
        }; 

        function tick() { 
         var d = new Date(); 
         var currentDate = new Date(d.getUTCFullYear(), 
         d.getUTCMonth(), d.getUTCDate(), d.getUTCHours(), 
         d.getUTCMinutes(), d.getUTCSeconds(), 
         d.getUTCMilliseconds()); 
         var endDate = new Date(currentDate.getFullYear(), 
         currentDate.getMonth(), currentDate.getDate() + (30 
         /* 
           saturday */ 
         - currentDate.getDay()), 16 
         /* 9 AM Mountain 
           Time = 4 PM GMT */ 
         ); 
         var secondsUntilSaturday = Math.floor((endDate.getTime() - currentDate.getTime())/1000); 
         var timeUntilSaturday = secondsToTime(secondsUntilSaturday); 
         document.body.innerHTML = (timeUntilSaturday.h + " hours, " + timeUntilSaturday.m + " minutes, " + timeUntilSaturday.s + " 
           seconds"); 
        } 

        function secondsToTime(secs) { 
         var hours = Math.floor(secs/(60 * 60)); 
         var divisor_for_minutes = secs % (60 * 60); 
         var minutes = Math.floor(divisor_for_minutes/60); 
         var divisor_for_seconds = divisor_for_minutes % 60; 
         var seconds = Math.ceil(divisor_for_seconds); 
         var obj = { 
          "h": hours, 
          "m": minutes, 
          "s": seconds 
         }; 
         return obj; 
        } 
       </script> 
       <div id="logo"> 
        <img src="logo.png" width="108" height="14" alt="Tiffany &amp; Co." /> 
       </div> 
     </div> 
    </body> 

</html>

來源

2012-07-31 user1524383

'document.body.innerHTML'這就是爲什麼。 – wanovak 2012-07-31 16:43:53

是的，什麼wanovak說。你應該瞄準一個特定的元素，而不是整個身體。像'document.getElementById（'someIDhere'）。innerHTML =' – 2012-07-31 16:47:53

另外，你在引用jquery，爲什麼不使用它？ – 2012-07-31 16:49:05

那是因爲你與你的計時器更換整個主體內容取而代之的是

document.body.innerHTML = (
    timeUntilSaturday.h +" hours, "+ 
    timeUntilSaturday.m +" minutes, "+ timeUntilSaturday.s +" 
    seconds" 
);

添加<div>定時器和設置的內容與計時器

<div id="timer"></div> 
<script> 
document.getElementById('timer').innerHTML = (
     timeUntilSaturday.h +" hours, "+ 
     timeUntilSaturday.m +" minutes, "+ timeUntilSaturday.s +" 
     seconds" 
    ); 
</script>

來源

2012-07-31 16:45:53

你的HTML內容消失由於該行：

document.body.innerHTML = (timeUntilSaturday.h + " hours, " + timeUntilSaturday.m + " minutes, " + timeUntilSaturday.s + " seconds");

document.body.innerHTML將內容寫入body元素，取代那裏的任何東西。您可以用document.write替換document.body.innerHTML。

要回答第二個問題，JavaScript不能自己發送電子郵件，但通過AJAX它可以調用服務器上的腳本來發送電子郵件。

來源

2012-07-31 16:46:05 j08691

所以我更換了它，現在的計時器並沒有顯示在所有 – user1524383 2012-07-31 17:23:21

既然你refrencing JQuery的，我用的是你的，但實際上只在一個地方...

這應該做你需要它做的事：Here's a fiddle

而且這裏的從小提琴代碼：

<script> 
//start your interval to update your timer. 
setInterval(function() { 
    //get ms until Saturday 9AM. 
    var ms = untilTimeOfWeek(6, 9, 0, 0); 
    $('#timer').text(getHours(ms) + ' hours ' + getMinutes(ms) + ' minutes ' + getSeconds(ms) + ' seconds'); 
}, 100); 

//gets the time left until a specific time of week. 


function untilTimeOfWeek(day, hour, min, sec) { 
    var currdate = new Date(); 
    var currday = currdate.getDay(); 
    var daydiff = (day - currdate.getDay()) * 86400000; 
    var hourdiff = (hour - currdate.getHours()) * 3600000; 
    var mindiff = (min - currdate.getMinutes()) * 60000; 
    var secdiff = (sec - currdate.getSeconds()) * 1000; 
    return daydiff + hourdiff + mindiff + secdiff; 
} 
//get the hours from some milliseconds. 

function getHours(ms) { 
    return Math.floor(ms/3600000); 
} 

//get the minutes from some milliseconds. 

function getMinutes(ms) { 
    return Math.floor((ms % 3600000)/60000); 
} 

//get the seconds from some milliseconds. 

function getSeconds(ms) { 
    return Math.floor(((ms % 3600000) % 60000)/1000); 
}; 
</script> 
<div id="timer"></div>

注意：+new Date僅僅是一個日期轉換爲JavaScript中的數值類型的簡寫。

我希望有幫助。

編輯：更新爲在週六的上午9點。

來源

2012-07-31 17:20:11

問題是我想避免不得不繼續設置一個新的日期之後，定時器耗盡，並在分配時間運行 – user1524383 2012-08-01 13:59:19

當然，我更新它來顯示一個例子下週六上午9點。我希望有所幫助。 – 2012-08-01 14:35:10

當實現javascript倒計時其他html元素消失

回答

相關問題