Zegar cyfrowy

Prosty zegar w stylu wyświetlaczy lcd z lat ’80-tych. Oparty na html5, CSS3 i javascript.

Tu zastosowałem czcionkę Ds-digital. Kolorystyka zegara dostosuje się do Waszej strony.

Kody na stronę

Jak wstawić zegar na własną stronę?

Można to zrobić ręcznie lub pobrać gotowca i go edytować jak dusza zapragnie.

Należy pobrać odpowiednią czcionkę. Ja zastosowałem czcionkę Ds-digital. Do pobrania TUTAJ.

Oczywiście można zastosować inną.

Tworzymy odpowiednie pliki:

index.html
style.css
script.js

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Zegar cyfrowy</title>
</head>

<body>
<p>&nbsp;</p>
<div class="clock2">
  <div class="display"> </div>
</div>
<script src="script.js"></script>
</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: DS-DIGIB;
  src: url("DS-DIGIB.TTF");
}
body {
  display: grid;
  place-items: center;
}
.clock2 {
  line-height: 100px;
  text-align: center;
  padding: 0 30px;
  box-shadow: -3px -3px 7px rgba(125, 125, 125, 0.1), 3px 3px 5px rgba(150, 150, 150, 0.15);
}
.clock2 .display {
  font-size: 120px;
  color: #ff0000;
  letter-spacing: 5px;
  font-family: DS-DIGIB;
}
@media (max-width: 700px) {
  .clock2 .display {
    font-size: 100px;
    text-align: center;
    padding: 2px 0;
  }
}

script.js

// www.skrip.pl
     // JavaScript Document
      setInterval(function(){
        const clock = document.querySelector(".display");
        let time = new Date();
        let sec = time.getSeconds();
        let min = time.getMinutes();
        let hr = time.getHours();
        let day = '';
        if(hr > 24){
          day = '';
          hr = hr - 12;
        }
        if(hr == 0){
          hr = 24;
        }
        if(sec < 10){
          sec = '0' + sec;
        }
        if(min < 10){
          min = '0' + min;
        }
        if(hr < 10){
          hr = '0' + hr;
        }
        clock.textContent = hr + ':' + min + ':' + sec;
      });

Top Stories

Jak nie zostać ofiarą oszustów. Sposób na rozpoznanie fałszywego maila

Wangiri scam – jak nie zostać ofiarą

Statystyki wyszukiwarki PornHub za 2024 rok

Zegar cyfrowy v.1 na stronę www

Prosty zegar w stylu wyświetlaczy lcd z lat ’80-tych