Time informer Informers and widgets for the site

Clock widget constructor

Customize the appearance, copy the HTML code and paste it into your website

Dimensions and Font

70
60
28

Colors and Format

`; }; const tick = () => { const d = new Date(), ph = document.getElementById('tg_p_h'), pm = document.getElementById('tg_p_m'), ps = document.getElementById('tg_p_s'); if (ph) { let hr = d.getHours(); if (iFmt.value === '12') hr = hr % 12 || 12; ph.textContent = String(hr).padStart(2, '0'); pm.textContent = String(d.getMinutes()).padStart(2, '0'); if (ps) ps.textContent = String(d.getSeconds()).padStart(2, '0'); } }; [iW, iH, iFS, iFont, iColTxt, iColBg, iSec, iFmt].forEach(el => el.addEventListener('input', render)); document.getElementById('tg_btn_reset').onclick = () => { iW.value=70; iH.value=60; iFS.value=28; iColTxt.value='#ffffff'; iColBg.value='#111827'; iFont.value='system-ui, -apple-system, sans-serif'; iSec.value='1'; iFmt.value='24'; render(); }; const btnCopy = document.getElementById('tg_btn_copy'); btnCopy.onclick = async function() { try { await navigator.clipboard.writeText(outCode.value); const origHTML = this.innerHTML; this.classList.add('copied'); this.innerHTML = 'Код скопирован!'; setTimeout(() => { this.classList.remove('copied'); this.innerHTML = origHTML; }, 2000); } catch(e){} }; // Первичный рендер и запуск хука рекламы render(); setInterval(tick, 1000); // Триггер для показа рекламы при загрузке генератора setTimeout(() => { resCol.classList.add('show'); window.dispatchEvent(new Event('scroll')); }, 100); })();

Time informer

🎨 How to create a clock widget for your website

This tool allows you to create a stylish time informer without any programming knowledge. You simply move the sliders, select colors to match the design of your site and get ready-made HTML code.

Больше по теме: Informers and widgets for the site
Cryptocurrencies📊 Real-time cryptocurrency market monitoring The cryptocurrency market is known for its volatility: prices can change by tens of percent in a couple of hours.
Days until Winter🚀 Want to create your own design? Click here to customize the color and size of the informer in the constructor. ❄️ Winter countdown timer 2026 This widget is a ready-made solution in pure JavaScript (without heavy libraries like jQuery).
Days until Autumn🍂 Informer “Before the beginning of Autumn” for your website A ready-made HTML widget that counts down the days, hours and minutes until September 1.

🚀 Quick start:

  1. Adjust the font size and colors in the panel above.
  2. Select format (24 hours or AM/PM).
  3. Click the Generate Code button.
  4. Copy the resulting script and paste it anywhere on your site (in the side column, footer or header).

Useful tips for webmasters

  • For the contact page: The time informer looks great next to the work schedule. Also for this page you may need QR code generator so that clients can quickly save your contacts.
  • Loading speed: Our script is as lightweight as possible and does not slow down your site (unlike heavy plugins).
  • Planning: If you need not just to show time, but to calculate project dates or deadlines, use our date difference calculator.

Frequently asked questions (FAQ)

🔹 Will the informer work on smartphones?

Yes, the generator creates adaptive code. The clock will scale correctly on the screens of mobile phones and tablets.

🔹 How to embed this code in WordPress?

In your WordPress admin panel, go to Appearance -> Widgets. Add the “HTML code” block to the desired area (sidebar or footer) and paste the copied script there.

🔹 What time will the informer show?

The widget displays the local time of the user who visited the site. The script takes data from the visitor's device, so the clock will always show the current time for him, regardless of the time zone of your server.

Calculators