Javascript日期和HTML_Javascript_Html_Css_Date

Javascript日期和HTML

javascript html css date

Javascript日期和HTML,javascript,html,css,date,Javascript,Html,Css,Date,我对Javascript非常陌生。我不确定该如何称呼或使用它。有些网站也没有那么大的帮助。所以我想你们会帮上大忙的到目前为止，我有： <!DOCTYPE html> <html> <head> <META HTTP-EQUIV="refresh" CONTENT="2"> <link rel="stylesheet" type="text/css" href="style.css"> <title>

我对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>


当前时间
函数getBostonDate（）{
var currentDate=新日期（）；
var dateTime=“Boston当前时间：“+currentDate.getHours（）+”：“+currentDate.getMiutes（）+”：“+currentDate.getSeconds（）”；
文件写入（日期时间）；
}

如您所见，我希望它只在标题中显示几个链接，然后显示日期。（根据我的个人资料，我在波士顿，所以我用了这个。）

我还尝试将它放在它自己的.js文件中，并在外部调用它，然后将这行代码放在HTML部分。但即使这样，我也不知道如何在我想要的地方调用它（在链接之后）。请帮忙

提前谢谢

在代码中添加一个div，用于显示时间，例如

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

如果希望时间不断更新，请使用

setInterval

，如中所示：

setInterval( 
    // YOUR FUNCTION HERE
,1000);

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

编辑：正如JonP所提到的，您必须调用函数（而不仅仅是定义它）。一种方法是在页面主体加载后调用它。您只需将其添加到

正文

标记中，如下所示：

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

另外，正如Samurai所提到的，不要忘记更正您的输入错误：

getMinutes（）

而不是

getMiutes（）

在代码中要显示时间的地方添加一个div，例如

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

如果希望时间不断更新，请使用

setInterval

，如中所示：

setInterval( 
    // YOUR FUNCTION HERE
,1000);

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

编辑：正如JonP所提到的，您必须调用函数（而不仅仅是定义它）。一种方法是在页面主体加载后调用它。您只需将其添加到

正文

标记中，如下所示：

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

另外，正如Samurai所提到的，不要忘记更正您的输入错误：

getMinutes（）

而不是

getMiutes（）

如果您想在链接上加载此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>


当前时间
函数getBostonDate（）{
var currentDate=新日期（）；
var dateTime=“Boston当前时间：“+currentDate.getHours（）+”：“+currentDate.getMiutes（）+”：“+currentDate.getSeconds（）”；
文件写入（日期时间）；
}

如果希望在表单加载时加载，请使用以下命令：

<!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>


当前时间
函数getBostonDate（）{
var currentDate=新日期（）；
var dateTime=“Boston当前时间：“+currentDate.getHours（）+”：“+currentDate.getMiutes（）+”：“+currentDate.getSeconds（）”；
文件写入（日期时间）；
}

如果您想在链接上加载此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>


当前时间
函数getBostonDate（）{
var currentDate=新日期（）；
var dateTime=“Boston当前时间：“+currentDate.getHours（）+”：“+currentDate.getMiutes（）+”：“+currentDate.getSeconds（）”；
文件写入（日期时间）；
}

如果希望在表单加载时加载，请使用以下命令：

<!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>


当前时间
函数getBostonDate（）{
var currentDate=新日期（）；
var dateTime=“Boston当前时间：“+currentDate.getHours（）+”：“+currentDate.getMiutes（）+”：“+currentDate.getSeconds（）”；
文件写入（日期时间）；
}

尝试以下方法：

<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>


函数getBostonDate（）{
var currentDate=新日期（）；
var dateTime=“Boston当前时间：“+currentDate.getHours（）+”：“+currentDate.getMinutes（）+”：“+currentDate.getSeconds（）”；
document.getElementById（“myBostonTimeSpan”）.innerHTML=dateTime；
}

在学习了一些javascript之后，您可能还想看一看

尝试以下内容：

<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>


函数getBostonDate（）{
var currentDate=新日期（）；
var dateTime=“Boston当前时间：“+currentDate.getHours（）+”：“+currentDate.getMinutes（）+”：“+currentDate.getSeconds（）”；
document.getElementById（“myBostonTimeSpan”）.innerHTML=dateTime；
}

一旦您学习了一些javascript，您可能还想看看

，因为您是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);     
}

$（文档）.ready（函数（）{
设置间隔（显示时间，1000）；
});
函数ShowTime（）{
var TheDate=新日期（）；
var TheHour=TheDate.getHours（）；
var TheMinutes=TheDate.getMinutes（）；
var TheSeconds=TheDate.getSeconds（）；
秒=（秒<10）？“0”+秒：秒；
var TheTime=“波士顿当前时间：“+TheHour+”：“+TheMinutes+”：“+TheSeconds；
$（'#TheDate'）.html（时间）；
}

这里是

因为您是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);     
}

$（文档）.ready（函数）