- Darslar, Dasturlash Darslar

HTML + CSS + JS Yordamida Raqamli Soat Yasash

Assalom alaykum, hozir siz bilan birgalikda HTML, CSS va JavaScript yordamida oddiy raqamli soat yaratamiz. Demak yuqori kayfiyat bilan, boshladik !

  • Saytimizning asosiy papkasida index.html faylini yaratib ichiga kerakli korsatmalarni yozamiz.

«index.html» fayli tarkibi:

<!-- odatiy html sahifa boshlanishi -->
<!DOCTYPE html>
<!-- sahifa tili -->
<html lang="en">
<!-- sahifa bosh qismi, faqat browserlar uchun malumotlar va korsatmalar saqlaydi -->
  <head>
    <!-- sahifa kodirovkasi -->
    <meta charset="UTF-8" />
    <!-- sahifa barcha qurulmalarda yaxshi joylashishi uchun browserga korsatma -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- sahifa nomi, odatda yuqorida ko'rinib turadi va qidiruv tizimlari uchun muhim -->
    <title>Mening Raqamli Soatim !</title>
    <!-- css formatdagi stillar tablitsasini bog'lash uchun ko'rsatma -->
    <link rel="stylesheet" href="style.css" />
  </head>
    <!-- sahifaning tana qismi -->
  <body>
      <!-- agrrda browserda js ishlamasa ushbu yozuv ko'rinadi -->
      <noscript>
      Hatolik, Ushbu raqali Soat JavaScript tilida yozilgan va
       sizning browseringizda JavaScript uchun ruxsat berilmagan !
      </noscript>
      <!-- ikkinchi daraja bilan berilgan sarlavha -->
    <h2>HTML + CSS + JS dan raqamli soat !</h2>
    <!-- soat uchun umumiy container -->
    <div class="container-fluid nightmode text-center">
        <!-- hafta kuni, sana, oy, va yil uchun time tegi container -->
      <time id="date" class="clocktext"> </time>
      <!-- soat, daqiqalar va soniyalar uchun time tegi container -->
      <time id="time" class="clocktext"> <span> </span> </time>
    </div>
    <!-- soatni har daqiqada yangilab turuvchi javasxript dasturlash tilida yozigan. script faylini 
    index.html bilan bog'lash korsatmasi -->
    <script src="clock.js"></script>
  </body>
</html>
  • index.html fayl yoniga «style.css» nomi bilan fayl yaratamiz.

«style.css» fayli tarkibi:

        /* asosiy div uchun sozlamalar biriktramiz */

        .container-fluid {
            margin: 0;
            padding: 0;
            height: 100%;
            min-height: 100vh;
        }
        /* hafat kuni sana oy va yil uchun uchun sozlamalar biriktramiz */
        #date {
            font-size: 1.3rem;
            padding-top: 15px;
            display: block;
            margin: 0;
            padding: 1px 0 0 0;
            width: 100%;
            text-align: center;
            line-height: 1.2;
            white-space: nowrap;
        }
        /* vaqt uchun uchun sozlamalar biriktramiz */
        #time {
            font-size: 5rem;
            margin: 1px 0 0 0;
        }
        /* sekund uchun uchun sozlamalar biriktramiz */
        #time span {
            display: inline-block;
            padding: 0;
            vertical-align: baseline;
            text-align: left;
            width: 2em;
            margin: 0 0 0 0.5em;
            font-size: 1.5rem;
            line-height: 1.5;
            white-space: normal;
        }
        /* agarda bowser ekrani hajmi 992 pxdan katta bolsa barchasini 
kattalashtirib qo'yman yaxshi ko'rinishi uchun */
        @media (min-width: 992px) {
            #date {
                font-size: 4rem;
            }
            #time {
                font-size: 13rem;
            }
            #time span {
                font-size: 4rem;
                line-height: 2;
            }
        }
        /* sarlavha uchun uchun uchun sozlamalar biriktramiz */
        h2 {
            text-align: center;
            font-size: xx-large;
            background: #cecece;
            margin: 0;
            padding: 20px;
        }
  • index.html fayl yoniga «clock.js» nomi bilan fayl yaratamiz.

«clock.js» fayl tarkibi:

// kerakli o'zgaruvchi saqlovchilarni elon qilamiz
var now, dd, td;
//  oy nomlari ro'yxatini o'zgaruvchiga biriktiramiz
var months = [
    "Yanvar",
    "Fevral",
    "Mart",
    "Aprel",
    "May",
    "Iyun",
    "Iyul",
    "Avgust",
    "Sentyabr",
    "Oktyabr",
    "Noyabr",
    "Dekabr",
];
//  hafy kunlar nomlari ro'yxatini o'zgaruvchiga biriktiramiz
var days = [
    "Yakshanba",
    "Dushanba",
    "Seshanba",
    "Chorshanba",
    "Payshanba",
    "Juma",
    "Shanba",
];
// sahifa js tilida qaysi funsiya bn qayta ishlanishini belgilaymiz
document.addEventListener("DOMContentLoaded", init, false);
// sahifani qayta ishlaydigan funksiya
function init() {
    dd = document.getElementById("date");
    td = document.getElementById("time");
    updateTime();
    setInterval(updateTime, 1000);
}
// malumotlarni qayta ishlash uchun funksiya
function updateTime() {
    var clockdata = getClockStrings();
    dd.innerHTML = clockdata.datehtml;
    td.innerHTML = clockdata.timehtml;
    dd.dateTime = now.toISOString();
    td.dateTime = now.toISOString();
}
//  yil, oy, sana, hafta kuni, soat,daqiqa va soniyani belgilab beruvchi va formatlochi funksya
function getClockStrings() {
    now = new Date();
    var year = now.getFullYear();
    var month = months[now.getMonth()];
    var date = now.getDate();
    var day = days[now.getDay()];
    var hour = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();
    var clockhour = hour > 24 ? hour - 24 : hour;
    if (hour === 0) {
        clockhour = 24;
    }
    var clockminutes = minutes < 10 ? "0" + minutes : minutes;
    var clockseconds = seconds < 10 ? "0" + seconds : seconds;
    var datehtml = day + ", " + date + "-" + month + ", " + year + " Yil.";
    var timehtml = clockhour + ":" + clockminutes + "<span>:" + clockseconds + "</span>";
    return { datehtml: datehtml, timehtml: timehtml };
}

Mana amaliy ishimiz ham tayyor natijani ushbu sahifada k’rishingiz mumkin: https://infomir.uz/demos/2-clock