Javascript日期和HTML

我很新的Javascript。我不確定如何調用或使用它。有些網站並沒有那麼多的幫助。所以我認爲你們會有很大的幫助。Javascript日期和HTML

我有這個至今：

<!DOCTYPE html> 
<html> 
<head> 
    <META HTTP-EQUIV="refresh" CONTENT="2"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <title>Current Time</title> 
</head> 
<body> 
    <div class="navBar"> 
     <a class="nav" href="http://www.blah.com">blah</a> 
     <a class="nav" href="http://www.blah2.com">blah2</a> 
     <a class="nav" href="https://www.blah3.com">blah3</a> 
     <script type="text/javascript"> 
      function getBostonDate(){ 
       var currentDate = new Date(); 
       var dateTime = "Boston current time: " + currentDate.getHours() + ":" + currentDate.getMiutes() + ":" + currentDate.getSeconds(); 
       document.write(dateTime); 
      } 
     </script> 
    </div> 
</body> 
</html>

正如你所看到的，我希望它只是顯示一對夫婦在標題鏈接，然後顯示日期。（根據我的個人資料，我在波士頓，所以我用它）。

我也嘗試將它放在它自己的.js文件中，並在外部調用它並將該行代碼放入HTML部分。但即使如此，我也不知道如何在我想要的地方調用它（在鏈接之後）。請幫忙？

在此先感謝！

來源

2013-08-02 chakolatemilk

它應該是'getMinutes（）'而不是'getMiutes（）' – Samurai

@武士哦哇，沒有看到我的拼寫錯誤，謝謝！ – chakolatemilk

一個div添加到您的代碼，你要顯示的時間，比如

<div id="display_time"></div>

，然後，而不是document.write...使用：

document.getElementById("display_time").innerHTML=dateTime;

如果你想更新你的時間不斷地，使用setInterval，如：

setInterval( 
    // YOUR FUNCTION HERE 
,1000);

這將重新計算時間和r每隔1000毫秒進行一次編輯（= 1秒）。

編輯：正如Jon P所提到的，您必須調用函數（而不僅僅是定義它）。一種方法是在頁面主體加載後調用它。另外

<body onload="setInterval(getBostonDate(),1000);">

，你可以把它叫做你的腳本中，作爲

setInterval(getBostonDate(),1000);

此外，由武士，不要提到：所有你所要做的就是將它添加到您的body標記爲「別忘了你的糾正錯字：中getMinutes()代替getMiutes()

來源

2013-08-02 01:14:16 DanielX2010

爲了讓這個答案更完整，包括如何在頁面加載運行，因爲這是OP問題的關鍵。他已經設置了一個函數，但從來沒有調用它。 –

@JonP感謝您的評論。我更新了它。如果您認爲可以改進，請隨時編輯答案：D – DanielX2010

謝謝！這工作得很好。出於某種原因，我查閱了HTML中JS的例子，但我似乎無法找到他們在哪裏調用實際的「函數」，所以我一直認爲他們只是將腳本放在他們希望它工作的地方。非常感謝你解釋得很好。 – chakolatemilk

使用此情況下，你要加載的鏈接點擊此javascript：

<!DOCTYPE html> 
<html> 
<head> 
    <META HTTP-EQUIV="refresh" CONTENT="2"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <title>Current Time</title> 
</head> 
<body> 
    <div class="navBar"> 
     <a class="nav" onclick="getBostonDate()" href="http://www.blah.com">blah</a> 
     <a class="nav" onclick="getBostonDate()" href="http://www.blah2.com">blah2</a> 
     <a class="nav" onclick="getBostonDate()" href="https://www.blah3.com">blah3</a> 
     <script type="text/javascript"> 
      function getBostonDate(){ 
       var currentDate = new Date(); 
       var dateTime = "Boston current time: " + currentDate.getHours() + ":" + currentDate.getMiutes() + ":" + currentDate.getSeconds(); 
       document.write(dateTime); 
      } 
     </script> 
    </div> 
</body> 
</html>

如果你希望它在窗體加載使用加載此：

<!DOCTYPE html> 
<html> 
<head> 
    <META HTTP-EQUIV="refresh" CONTENT="2"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <title>Current Time</title> 
</head> 
<body onload="getBostonDate()"> 
    <div class="navBar"> 
     <a class="nav" href="http://www.blah.com">blah</a> 
     <a class="nav" href="http://www.blah2.com">blah2</a> 
     <a class="nav" href="https://www.blah3.com">blah3</a> 
     <script type="text/javascript"> 
      function getBostonDate(){ 
       var currentDate = new Date(); 
       var dateTime = "Boston current time: " + currentDate.getHours() + ":" + currentDate.getMiutes() + ":" + currentDate.getSeconds(); 
       document.write(dateTime); 
      } 
     </script> 
    </div> 
</body> 
</html>

來源

2013-08-02 01:18:40

嘗試是這樣的：

<body onload="getBostonDate()"> 
    <div class="navBar"> 
     <a class="nav" href="http://www.blah.com">blah</a> 
     <a class="nav" href="http://www.blah2.com">blah2</a> 
     <a class="nav" href="https://www.blah3.com">blah3</a> 
    <span id="myBostonTimeSpan"></span> 
    </div> 
     <script type="text/javascript"> 

      function getBostonDate(){ 
       var currentDate = new Date(); 
       var dateTime = "Boston current time: " + currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds(); 
       document.getElementById("myBostonTimeSpan").innerHTML=dateTime; 
      } 

     </script> 
</body>

一旦你學會了一些JavaScript，您可能還想看看jQuery

來源

2013-08-02 01:18:54 PostureOfLearning

看到我對Frenchies的迴應，感謝我將JavaScript noobs直接導入jQuery。 –

@JonP，這是一個公平的評論。在房子前建立基礎總是有幫助的:)我已經修改了我的答案，有點... – PostureOfLearning

由於你是JavaScript的新手，我認爲它很糟糕d開始學習jQuery而不是使用本機javascript會是一個好主意。下面是這樣做的jQuery的方式：

$(document).ready(function() { 
    setInterval(ShowTime, 1000); 
}); 

function ShowTime() { 

    var TheDate = new Date(); 

    var TheHour = TheDate.getHours(); 
    var TheMinutes = TheDate.getMinutes(); 
    var TheSeconds = TheDate.getSeconds(); 

    TheSeconds = (TheSeconds < 10) ? "0" + TheSeconds : TheSeconds; 

    var TheTime = "Boston current time: " + TheHour + ":" +TheMinutes + ":" + TheSeconds; 

    $('#TheDate').html(TheTime);  
}

而這裏的jsFiddle

來源

2013-08-02 01:19:57 frenchie

我對在原生javascript上學習jQuery表示不同意。我認爲應該首先獲得javscript的堅實基礎。不要誤解我的意思我喜歡jQuery，但是我看到它很少被使用，或者被那些對javascript有點不滿意的人多次使用。我把它等同於說不用擔心學習HTML，只需使用Dreamweaver。 –

@JonP +1我完全同意。在涉及jQuery之前，JS的基本基礎是必不可少的。 –

誰知道用本地javascript還是jQuery開始更好？這是一個意見問題，有些人會分享你的意見，其他人不會。對我而言，我是那些認爲從jQuery開始更好的人的一部分，以便在學習jQuery的同時完成工作並學習JavaScript。使用原生JavaScript你必須處理瀏覽器問題等，我認爲這很難學習。我會比較JavaScript到C/C++和jQuery到C＃/ Java。是的，您可以學習編程並從指針開始，也可以從託管語言開始。意見不是現實。 – frenchie

你的主要問題是，你已經設置的功能，但你沒有任何地方調用它。您最簡單的解決方案是將腳本裸露，即將其從功能中取出。

<div class="navBar"> 
     <a class="nav" href="http://www.blah.com">blah</a> 
     <a class="nav" href="http://www.blah2.com">blah2</a> 
     <a class="nav" href="https://www.blah3.com">blah3</a> 
     <script type="text/javascript"> 

       var currentDate = new Date(); 
       var dateTime = "Boston current time: " + currentDate.getHours() + ":" + currentDate.getMiutes() + ":" + currentDate.getSeconds(); 
       document.write(dateTime); 

     </script> 
    </div>

見這個例子：http://jsfiddle.net/LpMeR/

這將解決您的問題，但沒有做到這一點的最好辦法。

來源

2013-08-02 01:44:48

Javascript日期和HTML

回答

相關問題