TIME

in JavaScript

Don't forget to put your Variants in a time loop! By using

setInterval(callback, timeout)

we can loop anything we want. Below, for instance, we're cycling through showing four different GIFs.

This works with the following code:

In all seriousness, it takes a bit of work to get up to speed with Date in JavaScript. Documentation is great, and the specification is well-aligned but not perfect. Here's what you need to know today:

1. You can construct a date with

   new Date(year, month, day)

2. January is month zero

   const newYearsDay = new Date(2000, 0, 1)

   For 1st January 2000, it's 2000, 0, 1.

3. You can display dates through a few different methods

   newYearsDay.getFullYear() // 2000
   newYearsDay.getMonth() // 0
   newYearsDay.getDate() // 1
   newYearsDay.toLocaleString() // "01/01/2000, 00:00:00"
   newYearsDay.toDateString() // "Sat Jan 01 2000"
   newYearsDay.toGMTString() // "Sat, 01 Jan 2000 00:00:00 GMT"
   newYearsDay.toISOString() // "2000-01-01T00:00:00.000Z"
   newYearsDay.toLocaleDateString() // "01/01/2000"
   newYearsDay.toUTCString() // "Sat, 01 Jan 2000 00:00:00 GMT"

   Often, you'll want to use the numbers and convert them to strings yourself. This is the case for our clock below.

4. You can also construct a date with

   new Date(milliseconds)

   This is useful when comparing dates.

5. Time zones matter!

   const date1 = new Date('August 19, 1975 23:15:30 GMT+07:00')
                 const date2 = new Date('August 19, 1975 23:15:30 GMT-02:00')
                 const millisecondsInOneHour = 60 * 60 * 1000
                 console.log((date2 - date1) / millisecondsInOneHour);
                 // expected output: 9

   You can also get the user's current time zone offset in minutes. This is the difference between the time elapsed between the date evaluated in UTC and evaluated in the current timezone.

   new Date().getTimezoneOffset() // 0 in London in winter, -60 in summer, -60 in France in winter, -120 in France in summer

6. Time started in 1970. I'm not kidding.

   const dawnOfTime = new Date(0)
   dawnOfTime.getFullYear() // 1970

   This is Thursday January 1st 1970 at midnight in Greenwich.

7. You can compare dates as a boolean check

   myBirthday > yourBirthday

   In such a case, the date with the larger number of milliseconds is the greater. That means the future is greater than the past. The past is lesser than the future. Don't tell the Greatest Generation that JavaScript disagrees with them.

8. You can subtract dates to find time remaining

   const diff = nextHoliday - currentTime
   const timeToGo = new Date(diff)

   In such a case, timeToGo would be an actual date, with a year, month, day etc. You have to remember this when displaying to the user. If there's 1 day and 3 hours to go, the value of timeToGo will be 2nd January 1970 at 3am in Greenwich.

Countdowns are great for when you're running out of time, or when time's running out on you.

Maybe you want to know how long is left before the next year starts? We've got you.

or did you want that in months?

This works with the following code:

setTimeout is setInterval's variant, and works in almost the same way, save for one important distinction: it doesn't repeat.

What's the point of that? Delaying is useful for a lot of reasons. We might want to wait a second before enabling an interactive option. We might choose to display something for only a few seconds.

You can also animate removal of elements in an interesting way by delaying the removal. For instance, here, when you click a Loki, he will start to scale down to a point. We won't remove the element until the disappearing is finished.

This works with the following code:

For a more advanced, playable version, see Pruning Loki