1

我对 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" 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 的一部分中。但即便如此，我也不知道如何在我想要调用它的地方调用它（在链接之后）。请帮忙？

提前致谢！

4

6 回答 6

6

将 div 添加到您要显示时间的代码中，例如

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

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

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

如果您希望您的时间不断更新，请使用setInterval，如下所示：

setInterval( 
    // YOUR FUNCTION HERE
,1000);

这将重新计算时间并每 1000 毫秒（=1 秒）重新显示一次。

编辑：正如 Jon P 所提到的，您必须调用该函数（而不仅仅是定义它）。一种方法是在页面正文加载后调用它。您所要做的就是将其添加到您的body标签中，如下所示：

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

或者，您可以在脚本中调用它，如

setInterval(getBostonDate(),1000);

另外，正如 Samurai 所提到的，不要忘记纠正你的错字：getMinutes()而不是getMiutes()

于 2013-08-02T01:14:16.217 回答
2

由于您是 javascript 新手，我认为开始学习 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-02T01:19:57.853 回答
0

您的主要问题是您已经设置了该功能，但您没有在任何地方调用它。您最简单的解决方案是让脚本裸露，即将它从函数中取出。

<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-02T01:44:48.790 回答
0

如果您想在链接单击时加载此 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-02T01:18:40.193 回答
0

尝试这样的事情：

<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-02T01:18:54.143 回答
0

这个也可以试试。它将自动反映系统时区。将它添加到您想要的任何位置。

<div id="time"></div>
<script>
    function getCurrentTime() {
    var d = new Date();
    document.getElementById("time").innerHTML = d;
    }
    setInterval('getCurrentTime()', 1000);
</script>
于 2019-05-11T10:15:33.360 回答