Selamlar değerli forum üyeleri,

Bugün sizlerle web projelerinizde kullanabileceğiniz, oldukça şık ve modern görünümlü bir Dijital Saat çalışmasını paylaşmak istiyorum. Tasarımda neon efektleri ve karanlık bir arka plan tercih edilerek estetik bir görünüm yakalanmıştır.

Bu çalışma Vue.js kütüphanesi kullanılarak hazırlanmıştır, bu sayede zaman senkronizasyonu oldukça akıcıdır.

HTML Kodları:

Kod:

<div id="clock">

Kod:

     <p class="date">{{ date }}</p>
     <p class="time">{{ time }}</p>
     <p class="text">Hilal Demir Teacher</p>
 </div>

CSS Kodları (Görsel Tasarım):

Kod:

html,body {

Kod:

     height: 100%;
 }
 body {
     background: #0f3854;
     background: radial-gradient(ellipse at center,  #0a2e38  0%, #000000 70%);
     background-size: 100%;
 }
 p {
     margin: 0;
     padding: 0;
 }
 #clock {
     font-family: 'Share Tech Mono', monospace;
     color: #ffffff;
     text-align: center;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     color: #daf6ff;
     text-shadow: 0 0 20px rgba(10, 175, 230, 1),  0 0 20px rgba(10, 175, 230, 0);
 }
 #clock .time {
     letter-spacing: 0.05em;
     font-size: 80px;
     padding: 5px 0;
 }
 #clock .date {
     letter-spacing: 0.1em;
     font-size: 24px;
 }
 #clock .text {
     letter-spacing: 0.1em;
     font-size: 12px;
     padding: 20px 0 0;
 }

JavaScript (Vue.js) Kodları:

Kod:

var clock = new Vue({

Kod:

     el: '#clock',
     data: {
         time: '',
         date: ''
     }
 });

 var week = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
 var timerID = setInterval(updateTime, 1000);
 updateTime();

 function updateTime() {
     var cd = new Date();
     clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
     clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
 };

 function zeroPadding(num, digit) {
     var zero = '';
     for(var i = 0; i < digit; i++) {
         zero += '0';
     }
     return (zero + num).slice(-digit);
 }

Not: Kodların çalışması için projenize Vue.js kütüphanesini dahil etmeyi unutmayın.

Umarım projelerinizde faydalı olur. İyi çalışmalar dilerim!