Javascript date and HTML - Stack Overflow

I'm very new to Javascript. I'm not exactly sure how to call it or use it. And some websites aren't that much of a help. So I thought you guys would be a great help.

I have this so far:

<!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="">blah</a>
        <a class="nav" href="">blah2</a>
        <a class="nav" href="">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>

As you can see, I want it to just display a couple of links in the header, and then display the date. (I am in Boston according to my profile so I used that.)

I also tried to put it in it's own .js file and calling it externally and placing that line of code in the part of the HTML. But even then, I have no idea how to call it in the place I want it to be called (after the links). Please help?

Thanks in advance!

I'm very new to Javascript. I'm not exactly sure how to call it or use it. And some websites aren't that much of a help. So I thought you guys would be a great help.

I have this so far:

<!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.">blah</a>
        <a class="nav" href="http://www.blah2.">blah2</a>
        <a class="nav" href="https://www.blah3.">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>

As you can see, I want it to just display a couple of links in the header, and then display the date. (I am in Boston according to my profile so I used that.)

Thanks in advance!

Share Improve this question asked Aug 2, 2013 at 1:07 chakolatemilk 8839 gold badges21 silver badges31 bronze badges

2 It should be 'getMinutes()' instead of 'getMiutes()' – Samurai Commented Aug 2, 2013 at 1:17
@Samurai Oh wow, didn't see my spelling error, thanks!! – chakolatemilk Commented Aug 2, 2013 at 12:27

Add a ment |

6 Answers 6

Sorted by: Reset to default 6

Add a div to your code where you want to display the time, such as

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

and then, instead of document.write... use:

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

If you want your time to be updated constantly, use setInterval, as in:

setInterval( 
    // YOUR FUNCTION HERE
,1000);

That will recalculate the time and redisplay it every 1000 ms (=1s).

EDIT: As mentioned by Jon P, you have to call the function (and not only define it). A way to do it is to call it once the page body has loaded. All you have to do is adding it to your body tag as in:

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

Alternatively, you can just call it inside your script, as in

setInterval(getBostonDate(),1000);

Also, as mentioned by Samurai, don't forget to correct your typo: getMinutes() instead of getMiutes()

Since you're new to javascript, I think it would be a good idea to start learning jQuery instead of going with native javascript. Here's the jQuery way of doing it:

$(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);     
}

And here's the jsFiddle

Use this in case you want to load this javascript on link click:

<!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.">blah</a>
        <a class="nav" onclick="getBostonDate()" href="http://www.blah2.">blah2</a>
        <a class="nav" onclick="getBostonDate()" href="https://www.blah3.">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>

In case you want it to load on form load Use this:

<!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.">blah</a>
        <a class="nav" href="http://www.blah2.">blah2</a>
        <a class="nav" href="https://www.blah3.">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>

Your main problem is that you have set the function but you don't call it anywhere. Your simplest solution would be to make the script naked, i.e Take it out of the function.

<div class="navBar">
        <a class="nav" href="http://www.blah.">blah</a>
        <a class="nav" href="http://www.blah2.">blah2</a>
        <a class="nav" href="https://www.blah3.">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>

See this example: http://jsfiddle/LpMeR/

This will fix your problem but is not the best way to do it.

Try something like this:

<body onload="getBostonDate()">
    <div class="navBar">
        <a class="nav" href="http://www.blah.">blah</a>
        <a class="nav" href="http://www.blah2.">blah2</a>
        <a class="nav" href="https://www.blah3.">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>

Once you've learned some javascript, you might also want to have a look at jQuery

Can try this as well. It will auto reflect the system timezone. Add it where ever you want.

<div id="time"></div>
<script>
    function getCurrentTime() {
    var d = new Date();
    document.getElementById("time").innerHTML = d;
    }
    setInterval('getCurrentTime()', 1000);
</script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Javascript date and HTML - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)