Klok met tijdzones en openingstijd New
Analogue SVG clock plus digital time and date per office (Intl.DateTimeFormat with time zone), with the offset from the Netherlands and whether the office is reachable right now. Switching uses a radio group (arrow keys); the hands take the shortest way to the new time. For companies with offices or clients abroad, and for contact pages.
Vestiging Rotterdam
--:--:--
How to use it
- Paste the HTML where the numbers & charts should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Klok met tijdzones en openingstijd · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="klk">
<svg class="klk__face" viewBox="0 0 100 100" aria-hidden="true"><circle class="klk__rim" cx="50" cy="50" r="48"/><g class="klk__ticks"></g><line class="klk__hd klk__h" x1="50" y1="55" x2="50" y2="29"/><line class="klk__hd klk__m" x1="50" y1="57" x2="50" y2="14"/><line class="klk__hd klk__s" x1="50" y1="61" x2="50" y2="10"/><circle class="klk__pin" cx="50" cy="50" r="2.6"/></svg>
<div class="klk__info">
<p class="klk__city">Vestiging <span class="klk__cn">Rotterdam</span></p>
<p class="klk__time"><span class="klk__hm">--:--</span><span class="klk__sec">:--</span></p>
<p class="klk__date"></p>
<p class="klk__diff"></p>
<p class="klk__st"><i class="klk__dot"></i><span class="klk__stt"></span></p>
</div>
<div class="klk__tz" role="radiogroup" aria-label="Kies een vestiging">
<button type="button" role="radio" aria-checked="true" data-tz="Europe/Amsterdam" data-c="Rotterdam">Rotterdam</button><button type="button" role="radio" aria-checked="false" tabindex="-1" data-tz="America/New_York" data-c="New York">New York</button><button type="button" role="radio" aria-checked="false" tabindex="-1" data-tz="Asia/Tokyo" data-c="Tokio">Tokio</button><button type="button" role="radio" aria-checked="false" tabindex="-1" data-tz="America/Paramaribo" data-c="Paramaribo">Paramaribo</button>
</div>
<p class="klk__sr" aria-live="polite"></p>
</div>
</div>/* Klok met tijdzones en openingstijd · NedDev · eigen werk. */
.klk{position:absolute;inset:0;box-sizing:border-box;padding:12px;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;gap:10px 14px;align-items:center;container-type:size}
.klk__face{width:min(150px,40cqw,calc(100cqh - 70px));height:auto;aspect-ratio:1;display:block}
.klk__rim{fill:#fff;stroke:#0a0a0a;stroke-width:1.5}
.klk__tk{stroke:#b9b6b0;stroke-width:.8}
.klk__tk--u{stroke:#0a0a0a;stroke-width:2}
.klk__hd{stroke-linecap:round;transform-box:view-box;transform-origin:50px 50px;transition:transform .45s cubic-bezier(.3,1.35,.5,1)}
.klk__h{stroke:#0a0a0a;stroke-width:4}
.klk__m{stroke:#0a0a0a;stroke-width:2.6}
.klk__s{stroke:#F5480F;stroke-width:1.2}
.klk__pin{fill:#F5480F;stroke:#0a0a0a;stroke-width:1}
.klk__info{min-width:0}
.klk__info p{margin:0}
.klk__city{font-size:13px;color:#3d3c39}
.klk__cn{font-weight:600;color:#0a0a0a}
.klk__time{font-size:34px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.klk__sec{font-size:18px;color:#8a8883;font-weight:500}
.klk__date,.klk__diff{font-size:12px;color:#5f5e5a;line-height:1.45}
.klk__st{margin-top:4px!important;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.klk__dot{width:8px;height:8px;border-radius:50%;background:#8a8883;flex:none}
.klk__st.is-open .klk__dot{background:#F5480F}
.klk__tz{grid-column:1/-1;display:flex;gap:4px}
.klk__tz button{flex:1 1 auto;min-width:0;min-height:28px;padding:0 4px;border:1px solid #d6d3ce;border-radius:4px;background:#fff;color:#0a0a0a;font:500 12px 'Switzer',sans-serif;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .15s,color .15s,border-color .15s}
.klk__tz button:hover{border-color:#0a0a0a}
.klk__tz button[aria-checked="true"]{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.klk__tz button:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.klk__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
@container (max-width:380px){.klk__time{font-size:28px}.klk__sec{font-size:15px}}
@media(prefers-reduced-motion:reduce){.klk__hd,.klk__tz button{transition:none}}// Klok met tijdzones en openingstijd · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.klk');if(!w)return;var NS='http://www.w3.org/2000/svg';
var tk=w.querySelector('.klk__ticks');for(var t=0;t<60;t++){var u=t%5===0,a=t*6*Math.PI/180,r1=u?39:42,r2=45,l=document.createElementNS(NS,'line');l.setAttribute('x1',50+r1*Math.sin(a));l.setAttribute('y1',50-r1*Math.cos(a));l.setAttribute('x2',50+r2*Math.sin(a));l.setAttribute('y2',50-r2*Math.cos(a));l.setAttribute('class','klk__tk'+(u?' klk__tk--u':''));tk.appendChild(l);}
var H=w.querySelector('.klk__h'),M=w.querySelector('.klk__m'),Sx=w.querySelector('.klk__s'),hm=w.querySelector('.klk__hm'),sec=w.querySelector('.klk__sec'),dt=w.querySelector('.klk__date'),df=w.querySelector('.klk__diff'),st=w.querySelector('.klk__st'),stt=w.querySelector('.klk__stt'),cn=w.querySelector('.klk__cn'),live=w.querySelector('.klk__sr');
var btns=[].slice.call(w.querySelectorAll('.klk__tz button')),tz='Europe/Amsterdam',ang={},timer=null;
function local(z){return new Date(new Date().toLocaleString('en-US',{timeZone:z}));}
function pad(n){return (n<10?'0':'')+n;}
function turn(el,k,tg){var c=ang[k];if(c==null)c=tg;else c+=((tg-c)%360+540)%360-180;ang[k]=c;el.style.transform='rotate('+c+'deg)';}
function status(d){var day=d.getDay(),m=d.getHours()*60+d.getMinutes(),wk=day>=1&&day<=5;
if(wk&&m>=540&&m<1050)return {open:1,t:'Nu bereikbaar, tot 17:30'};
if(wk&&m<540)return {t:'Gesloten, opent om 09:00'};
if(day===5||day===6)return {t:'Gesloten, opent maandag 09:00'};
return {t:day===0?'Gesloten, opent maandag 09:00':'Gesloten, opent morgen 09:00'};}
function diff(){var h=Math.round((local(tz)-local('Europe/Amsterdam'))/36e5);return h===0?'Zelfde tijd als in Nederland':Math.abs(h)+' uur '+(h>0?'later':'eerder')+' dan in Nederland';}
function draw(){var d=local(tz),h=d.getHours(),m=d.getMinutes(),s=d.getSeconds();
turn(H,'h',(h%12)*30+m*.5);turn(M,'m',m*6+s*.1);turn(Sx,'s',s*6);
hm.textContent=pad(h)+':'+pad(m);sec.textContent=':'+pad(s);
dt.textContent=new Intl.DateTimeFormat('nl-NL',{timeZone:tz,weekday:'long',day:'numeric',month:'long'}).format(new Date());
df.textContent=diff();var o=status(d);stt.textContent=o.t;st.classList.toggle('is-open',!!o.open);return o;}
function tick(){draw();timer=setTimeout(tick,1000-Date.now()%1000+5);}
function pick(b,focus){btns.forEach(function(x){var on=x===b;x.setAttribute('aria-checked',on?'true':'false');x.tabIndex=on?0:-1;});if(focus)b.focus();tz=b.dataset.tz;cn.textContent=b.dataset.c;var o=draw();live.textContent=b.dataset.c+', '+hm.textContent+'. '+o.t+'.';}
btns.forEach(function(b,i){b.addEventListener('click',function(){pick(b,false);});b.addEventListener('keydown',function(e){var k=e.key,j=k==='ArrowRight'||k==='ArrowDown'?i+1:k==='ArrowLeft'||k==='ArrowUp'?i-1:k==='Home'?0:k==='End'?btns.length-1:null;if(j===null)return;e.preventDefault();pick(btns[(j+btns.length)%btns.length],true);});});
tick();
}
init(document.querySelector('.jouw-container'));More numbers & charts
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →