Different line of text each hour

Question

I'm trying to make a site that displays a different line of text depending on the hour (GMT). I have tried using javascript, but I'm very much a beginner! I've managed to piece the following bit of code together but can't seem to get it to work. Any help appreciated!

function getTime(zone, success) {
    var url = 'http://json-time.appspot.com/time.json?tz=' + zone,
        ud = 'json' + (+new Date());
    window[ud]= function(o){
        success && success(new Date(o.datetime));
    };
    document.getElementsByTagName('head')[0].appendChild((function(){
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = url + '&callback=' + ud;
        return s;
    })());
}

getTime('GMT', function(time){

    if (time>10 && time<11)
  {
  document.write("<b>Paris</b>");
  }
    ;
});

Your'e missusing `document.write`. Now it clears all content in your page. You need to use some DOM-manipulation instead. — Teemu, Mar 08 '12 at 12:11
Since the text is not based on user's local time, shouldn't this be done on the server? — stark, Mar 08 '12 at 12:12

score 1 · Answer 1 · answered Mar 08 '12 at 12:15

Javascript has a Date class.

var hour = new Date().getHours();

if(...) {
    // do something
}

This code extract

if (hour>10 && hour<11)

can't be working with hours, because time can't be > 10 and < 11 at the same time (hour is an int).

sje397 · Answer 2 · 2012-03-08T12:21:06.973

How about:

var now = new Date();
var utcMillis = now.getTime() + now.getTimzoneOffset() * 60000;
var hour = new Date(utcMillis).getHours(); // 0-23

switch(hour) {
  case 10: document.write("<b>Paris</b>"); break;
  //...
}

Some good info here: http://www.techrepublic.com/article/convert-the-local-time-to-another-time-zone-with-this-javascript/6016329

You could also put your phrases in an array (which you might get from the server):

var phrases = ["Hi!", "blah", "more blah", ...];

... and then you can replace the switch above with:

document.write("<b>" + phrases[hour] + "</b>");

You might want to save yourself some time and use a framework that makes things work pretty much the same way across different browsers. JQuery is my favorite, but there are plenty. Such libraries make it easy to manipulate content in your page, fetch JSON from the server, etc etc.

score 0 · Answer 3 · edited May 23 '17 at 11:47

At first sight:

o.datetime is wrong formatted for JS Date method.
you return an instance of new Date() to get the hour use .getHours()

You can look here to find a way to convert your dateString from o.datetime How can I convert string to datetime with format specification in JavaScript?

Use time.getHours() > 12 instead of time > 12

If you use: getDateFromFormat() from http://www.mattkruse.com/javascript/date/ I think the conversion will be something like E, dd MMM hh:mm:ss +0000

SIMPLE ANSWER:

You can just parse the hour to your callback: (See your JSON here http://json-time.appspot.com/time.json?tz=GMT)

function getTime(zone, success) {
    var url = 'http://json-time.appspot.com/time.json?tz=' + zone,
        ud = 'json' + (+new Date());
    window[ud]= function(o){
        success && success(o.hour); // See o.hour here
    };
    document.getElementsByTagName('head')[0].appendChild((function(){
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = url + '&callback=' + ud;
        return s;
    })());
}

getTime('GMT', function(time){
    if (time>10 && time<11) {
        document.write("<b>Paris</b>");
    }
});

OdinX · Answer 4 · 2012-04-23T07:43:51.313

I've created a quick jsfiddle page: http://jsfiddle.net/eBAGS/5/ with a demo that should do what you need. It gets the time from the users PC rather than from a server though, but it could be modified.

HTML

<button onClick="getPhrase()">Show me a phrase for this hour</button>
<div id="placeHolder"></div>

Javascript

function getPhrase() {
    h = new Date().getHours(); //Get the current hour

    phrase = new Array(); //Create an array of phrases
    phrase[1] = 'Hello';
    phrase[2] = 'there';
    phrase[3] = 'this';
    phrase[4] = 'will';
    phrase[5] = 'show';
    phrase[6] = 'a';
    phrase[7] = 'different';
    phrase[8] = 'message';
    phrase[9] = 'depending';
    phrase[10] = 'on';
    phrase[11] = 'the';
    phrase[12] = 'hour';
    phrase[13] = 'of';
    phrase[14] = 'day';
    phrase[15] = 'that';
    phrase[16] = 'you';
    phrase[17] = 'look';
    phrase[18] = 'at';
    phrase[19] = 'it';
    phrase[20] = '!';
    phrase[21] = 'W';
    phrase[22] = 'X';
    phrase[23] = 'Y';
    phrase[24] = 'Z';

    document.getElementById('placeHolder').innerHTML = phrase[h-1]; //Show the array item relevant to the hour
}

Different line of text each hour

4 Answers4