0

I want to make a javascript timer for a countdown of 7 days since it is first run.

Here is the scenario:

  1. The html file will given to 100 students
  2. So the timer will start whenever one opens the html file
  3. If the user restarts the computer the time will not affect

Dont know how its done..

The simplest possible JavaScript countdown timer?

Community
  • 1
  • 1
Pankaj Badera
  • 11
  • 1
  • *If the user changes the system date.. then the timer should not change – Pankaj Badera Feb 18 '16 at 08:27
  • Simply put, this is not possible without a backend. There has to be a server that can be told to start the countdown or show the current time if it has already started. What you're asking is possible *locally* without a server, but only if the same page is accessed on the same computer. – Neil Feb 18 '16 at 08:29
  • html page will be same.. computer will be different.. like the timer will triggered once the html is opened on a particular computer – Pankaj Badera Feb 18 '16 at 08:31
  • You can save timer's start time in localStorage. But use can simply drop it if he knows javascript a bit. – S. Nadezhnyy Feb 18 '16 at 08:33
  • @S.Nadezhnyy That would be local. He clearly wants the countdown to work across all computers which have the page. – Neil Feb 18 '16 at 08:36
  • exactly.. the timer will start once the user openes.. whether he/she opens it after a year.. the timer will be of 7 days – Pankaj Badera Feb 18 '16 at 08:37
  • @Pankaj Badera Is timer unique per user or is it shared among all users ? – S. Nadezhnyy Feb 18 '16 at 08:41

1 Answers1

1

This can be accomplished locally (that means that each user gets their own counter) by saving the value of Date.now() into localStorage. Then, when reopening the html file, you read from localStorage and compare the value to the current Date.now().

What you can do with this timer is then very limited, unless you serve this html file of yours from a server.

(function() {
    var started = localStorage['started'];
    if (started) {
        // This is not the first time the user opens this file
        // How long has it been?

        var diff = Date.now() - started;

        if (diff >= 1000 * 60 * 60 * 24 * 7) {
            // At least one week has passed. Do something here.
        } else {
            // Less than a week has passed. Do something else here.
        }
    } else {
        // This is the first time the user opens this file 

        localStorage['started'] = Date.now();

        // Do something else here to welcome the user...
    }
})();

Date.now reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now

Just remember that there is no security at all in this. You are doing this on the user's browser, and the user has full control over that environment. A simple clear cache will delete the saved value from localStorage.

I have used this method to create a project time clock that runs completely locally.

Anders Marzi Tornblad
  • 18,896
  • 9
  • 51
  • 66
  • Although this is a nice way to handle it but what happens if the user opens the link or html file in another browser ? – Aukhan Feb 18 '16 at 08:37
  • That other browser will get its own instance of the countdown. If that is a concern for the poster, they should not use a client-side solution. What they are after probably requires a server-side solution with some kind of authentication. – Anders Marzi Tornblad Feb 18 '16 at 08:38
  • thanks @AndersTornblad :) let me try this – Pankaj Badera Feb 18 '16 at 08:39
  • This doesn't seem to satisfy his requirements. He clearly wants this to work between everyone having the page link. Really the main difference is porting this logic to the server side and simply accessing it from the client. – Neil Feb 18 '16 at 08:39
  • This is what i want : The timer will start once the user openes.. whether he/she opens it after a year.. the timer will be of 7 days – Pankaj Badera Feb 18 '16 at 08:40
  • @PankajBadera Then I misunderstood your requirements. My apologies to Anders then. – Neil Feb 18 '16 at 08:41
  • I didn't interpret the requirements that way, Neil. To me it seems that he wants one counter per user, but I'm not sure. I might be wrong. In that case, this solution is completely wrong. – Anders Marzi Tornblad Feb 18 '16 at 08:42
  • Like @Neil said ... doesn't seem like it can happen without some kind of server involvement. You need a central place for authentication and running of timers. Also consider the time zone differences. – Aukhan Feb 18 '16 at 08:42
  • @Aukhan Oh man, time zone differences.. that'd be fun to have to deal with. – Neil Feb 18 '16 at 08:45
  • The counter is unique per user. They *probably* won't change time zones during this time. And even if they did, Date.now() is unix time, which is UTC. – Anders Marzi Tornblad Feb 18 '16 at 08:46
  • 1
    @AndersTornblad Consider that it's just local javascript. At any time someone could manually set localStorage['started'] forward to whatever they like. It seems to me that time zone issues are less critical by comparison. It's fine for an experiment, but to be practical, you'd need to involve a server. – Neil Feb 18 '16 at 08:48
  • @Anders Date.Now() would be the timezone of the system that JS is running on. – Aukhan Feb 18 '16 at 08:48
  • Niel: I am saying that in my answer. The user has complete dominion over the browser. Aukhan: The now() method returns the milliseconds elapsed since 1 January 1970 00:00:00 UTC up until now as a Number. So no timezone problems. – Anders Marzi Tornblad Feb 18 '16 at 08:53
  • @AndersTornblad It isn't a criticism of your answer, in fact I upvoted it. My point was only "reader beware". – Neil Feb 18 '16 at 08:55
  • I didn't take it as criticism, as I totally agree. The OP should not do this if there are any concerns for security, data integrity or anything else. :) – Anders Marzi Tornblad Feb 18 '16 at 08:58