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

回答

相关问题