GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

No menu could be recovered. Follow the blue links in the page.

This view

  • Original page
  • New address

GeezerVison is showing fa.javascript.info — Live timer element

  • آموزش
  • اجزاء وب
  • Custom elements
بازگشت به درس
این محتوا تنها در این زبان‌ها موجود است: Čeština, English, Español, Indonesia, Italiano, 한국어, Русский, Українська, Oʻzbek, 简体中文. لطفاً به ما

Live timer element

We already have <time-formatted> element to show a nicely formatted time.

Create <live-timer> element to show the current time:

  1. It should use <time-formatted> internally, not duplicate its functionality.
  2. Ticks (updates) every second.
  3. For every tick, a custom event named tick should be generated, with the current date in event.detail (see chapter Dispatchکردن eventهای شخصی سازی شده).

Usage:

<live-timer id="elem"></live-timer>

<script>
  elem.addEventListener('tick', event => console.log(event.detail));
</script>

Demo:

باز کردن یک sandbox برای تمرین.

Please note:

  1. We clear setInterval timer when the element is removed from the document. That’s important, otherwise it continues ticking even if not needed any more. And the browser can’t clear the memory from this element and referenced by it.
  2. We can access current date as elem.date property. All class methods and properties are naturally element methods and properties.

باز کردن راه‌حل درون sandbox.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.