TIME
in JavaScript

Hey y'all! Here at the TVA, we control all of time.

With JavaScript, it's really easy!

Next

Loops with setInterval

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.

Miss Minutes

This works with the following code:

Next

Stopwatch using setInterval

Sometimes, we need to time things just right. Knowing how long something takes is helpful.

00:00.000

This works with the following code:

Next

Date

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.getDay() // 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.

Next

Clock

We may want to show a big clock so we know what time it is.

00:00.000

This works with the following code:

Next

Countdown

Countdowns are great for when you're running out of time, or when time's running out on you. Maybe you're tracking your next event. Maybe you're waiting on someone to arrive to fix everything. Maybe he's a caped hero, a doctor, a master of the mystical arts, or all of the above.

125 days, 19 hours, 14 minutes and 3 seconds

or did you want that in months?

Several months

This works with the following code:

Next

setTimeout

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