أخر الاخبار
CSS
0+53HD

كيفية إنشاء ساعة رقمية بمؤثرات باستخدام HTML - CSS وجافا سكريبت

صورة
القبطان تك - Alkoptan Tech

في هذا المقال، سنتعلم كيفية بناء ساعة رقمية بأسلوب مبتكر باستخدام لغات الويب الثلاث الأساسية: HTML، CSS، وجافا سكريبت. ستكون الساعة مجهزة بمؤثرات بصرية جذابة تضيف لمسة فنية على التصميم النهائي.


كود إنشاء ساعة رقمية بمؤثرات

كيفية إنشاء ساعة رقمية بمؤثرات باستخدام HTML - CSS وجافا سكريبت

في عالم الويب الحديث، يُعتبر إنشاء العناصر التفاعلية مهم في التصميم فهي تجمع بين الوظائف العملية والتصميم الجذاب. في هذا المقال، سنتعرف على كيفية إنشاء ساعة رقمية باستخدام تقنيات الويب الأساسية: HTML ،CSS، وJavaScript. سنقوم بإضافة مؤثرات بصرية لتحسين مظهر الساعة وجعلها تبدو أنيقة ومبتكرة.



خطوات إنشاء ساعة رقمية بمؤثرات

1. الهيكل الأساسي للصفحة، إعداد هيكل HTML

نبدأ بإنشاء الهيكل الأساسي لصفحة الويب، حيث سنضيف عناصر HTML اللازمة للساعة مع الروابط لملفات CSS وJavaScript.

  • قم بإنشاء ملف HTML جديد وافتحه باستخدام محرر النصوص المفضل لديك.
  • أضف العناصر الأساسية مثل <div> لتمثيل الساعة وعناصر <span> لعرض الوقت.
كود Html لإنشاء ساعة رقمية
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://kit.fontawesome.com/4f6c794eb6.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="icon"
        href="https://images-platform.99static.com//0ZStLQvlGJmlJVOhWzw4-QFumJ4=/378x2270:1015x2908/fit-in/500x500/99designs-contests-attachments/124/124379/attachment_124379801" />
    <title>Digital Clock Code</title>
</head>

<body>
    <div class="container">
        <div class="card1"></div>
        <div class="card2"></div>
        <div class="glass-card">
            <div class="colons">
                <div class="colon1 colon">:</div>
                <div class="colon2 colon">:</div>
            </div>
            <div class="hour-card">
                <p class="clock-hour" id="hours"></p>
            </div>
            <div class="minute-card">
                <p class="clock-minute" id="minutes"></p>
            </div>
            <div class="second-card">
                <p class="clock-second" id="seconds"></p>
            </div>
            <div class="am-pm">
                <p class="am-pm-txt" id="AMPM"></p>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>


2. تنسيق الساعة باستخدام CSS

نستخدم CSS لتنسيق العناصر المطلوبة للساعة، مع إضافة لمسات جمالية تجعل التصميم جذابًا وسهل القراءة.

  • استخدم CSS لتنسيق عناصر HTML وتحسين شكل الساعة.
  • قم بتحديد الألوان والخطوط والأبعاد التي تناسب التصميم الخاص بك.
  • تطبيق المؤثرات البصرية:
كود Css لإنشاء ساعة رقمية
 
* {
  margin: 0;
  padding: 0%;
}

:root {
  --bg-color: #191830;
  --card1-color: #facf29;
  --card2-color: #02ccfc;
  --card3-color: #ff3124;
  --card4-color: #0a2dbb;
  --seconds-color: #f9d426;
}

body {
  background-color: var(--bg-color);
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card1 {
  background: linear-gradient(180deg, #facf29, #ff3124);
  width: 250px;
  height: 250px;
  transform: translateY(130px);
  border-radius: 400px;
  margin-right: 140px;
  animation-name: top-down1;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes top-down1 {
  0% {
    transform: translateY(130px);
  }
  100% {
    transform: translateY(160px);
  }
}

.card2 {
  background: linear-gradient(180deg, #02ccfc, #0a2dbb);
  width: 300px;
  border-radius: 400px;
  height: 300px;
  margin-bottom: 270px;
  margin-left: 140px;
  animation-name: top-down2;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes top-down2 {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(60px);
  }
}

.glass-card {
  min-width: 10px;
  min-height: 10px;
  max-width: 750px;
  transition: 1s ease-in-out;
  max-height: 290px;
  width: 100%;
  height: 100%;
  box-shadow: rgba(0, 0, 0, 0.059) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  background-color: rgba(255, 255, 255, 0.06);
  position: absolute;
  border-radius: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  backdrop-filter: blur(30px);
  animation-name: fade-up;
  animation-duration: 0.5s;
}

.hour-card {
  backdrop-filter: blur(70px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 170px;

  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
    rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
    rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.clock-hour {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: white;
  font-size: 120px;
}

.minute-card {
  backdrop-filter: blur(70px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 170px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
    rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
    rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.clock-minute {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: white;
  font-size: 120px;
}

.second-card {
  backdrop-filter: blur(70px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 170px;
  height: 170px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
    rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
    rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.clock-second {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: var(--seconds-color);
  font-size: 120px;
}

.colons {
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  width: 750px;
}

.colon1 {
  margin-right: -11px;
}

.colon2 {
  margin-right: 127px;
}

.colon {
  font-size: 90px;
  color: white;
}

.am-pm-txt {
  margin: 20px;
  color: var(--seconds-color);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 30px;
}

.am-pm {
  backdrop-filter: blur(70px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 88px;
  height: 80px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
    rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
    rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
/* RESPONSIVE */
@media only screen and (max-width: 850px) {
  .colon {
    display: none;
  }
  .card1 {
    width: 200px;
    margin-right: 10px;
    height: 200px;
  }
  .card2 {
    width: 200px;
    margin-left: 10px;
    height: 200px;
  }
  .glass-card {
    max-height: 550px;
    max-width: 200px;
    justify-content: space-evenly;
    flex-direction: column;
  }
  .hour-card {
    width: 130px;
    height: 130px;
  }
  .clock-hour {
    font-size: 80px;
  }
  .minute-card {
    width: 130px;
    height: 130px;
  }
  .clock-minute {
    font-size: 80px;
  }
  .second-card {
    width: 130px;
    height: 130px;
  }
  .clock-second {
    font-size: 80px;
  }
}




3. برمجة الساعة باستخدام JavaScript

استخدم جافا سكريبت لإضافة مؤثرات ديناميكية مثل حركة الثواني وتغيير لون الخلفية بشكل تدريجي. ستقوم JavaScript بتحديث الوقت بشكل دوري وعرضه على الصفحة، مما يجعل الساعة دقيقة وفعالة.

إضافة الوظائف التفاعلية:

  • أضف دوال جافا سكريبت لجعل الساعة تعمل بشكل دائم ودقيق.
  • قم بتحديث الوقت بانتظام وتحديد التفاعل مع المستخدم مثل تغيير التوقيت بناءً على تفضيلاته.
  • نضيف بعض التأثيرات البصرية مثل التحريك والتلاشي لجعل الساعة أكثر جمالًا وجاذبية.

كود JavaScript لإنشاء ساعة رقمية

let hours = document.getElementById("hours");
let minutes = document.getElementById("minutes");
let seconds = document.getElementById("seconds");
let AMPM = document.getElementById("AMPM");

setInterval(()=> {
  let clock = new Date();
  let hrs = clock.getHours();
  let min = clock.getMinutes();
  let sec = clock.getSeconds();

  if(hrs > 12){
    hrs = hrs - 12;
  }
  if (hrs < 10) {
      hrs = "0" + hrs;
  }
  if (min < 10) {
      min = "0" + min;
  }
  if (sec < 10) {
      sec = "0" + sec;
  }
  if (hrs == 0) {
      hrs = 12;
  }
  if (hrs < 12) {
      AMPM.innerHTML = "PM";
  } else {
      AMPM.innerHTML = "AM";
  }
  hours.innerHTML = hrs;
  minutes.innerHTML = min;
  seconds.innerHTML = sec;
  
})






باستخدام HTML ،CSS، وجافا سكريبت، يمكنك الآن إكمال إنشاء ساعة رقمية خاصة بك وتخصيصها حسب الحاجة والذوق الشخصي. انطلق واستمتع بتجربة الإبداع في عالم تطوير الويب! فرصة للتعبير الإبداعي وإضافة لمسات شخصية إلى المواقع الإلكترونية.



وفي النهاية...

من خلال هذا المقال، تعلمنا كيفية إنشاء ساعة رقمية باستخدام تقنيات الويب الأساسية. يمكنك الآن تكملة العمل بتطوير التصميم أو إضافة مزيد من الوظائف حسب احتياجاتك واهتماماتك. استمتع بإطلاق العنان لإبداعك في عالم تطوير الويب!

تعديل المقال
الأقسام
إذا أعجبك هذا المقال، يرجى مشاركته مع أصدقائك ومساعدتنا في نشر الكلمة.
تعليقات
إرسال تعليق

سعدنا بوجودك 😍 شكراً لك اترك تعليقك بمدى أستفادتك من المحتوى دعمنا لنا وسيتم الرد عليك في أقرب وقت. يسعدنا دائماً اقتراحاتكم بخصوص المحتوى وأذا كان لديك أى أستفسار لاتترد بالتعليق أو المراسلة عبر صندوق البريد.




    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -