ساعة ماوس نيون تفاعلية | كود HTML و CSS و JavaScript جاهز للنسخ

ساعة ميكي ماوس نيون تفاعلية تعمل بالوقت الحقيقي

✨ معاينة حية للساعة الآن:

00:00:00 AM

📋 انسخ الكود من الصندوق أدناه:

<style>
@import url('https://googleapis.com');
.mickey-post-clock {
    background-color: #0b0a10 !important;
    background-image: radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 0) !important;
    background-size: 8px 8px !important;
    padding: 30px 15px !important;
    border-radius: 25px !important;
    border: 2px solid #221f33 !important;
    max-width: 380px !important;
    margin: 20px auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
.mickey-post-head {
    position: relative !important;
    width: 180px !important;
    height: 160px !important;
    margin: 35px auto 25px !important;
}
.mickey-post-face {
    position: absolute !important;
    bottom: 0 !important;
    left: 10px !important;
    width: 160px !important;
    height: 160px !important;
    background: #14131a !important;
    border: 4px solid #bc13fe !important;
    border-radius: 50% !important;
    box-shadow: 0 0 20px #bc13fe, inset 0 0 15px rgba(188, 19, 254, 0.4) !important;
    z-index: 2 !important;
    transition: border-color 0.5s, box-shadow 0.5s !important;
}
.mickey-post-ear-l {
    position: absolute !important;
    top: -20px !important;
    left: -15px !important;
    width: 90px !important;
    height: 90px !important;
    background: #14131a !important;
    border: 4px solid #00f2ea !important;
    border-radius: 50% !important;
    box-shadow: 0 0 15px #00f2ea !important;
    z-index: 1 !important;
    animation: earMoveLeft 2s infinite ease-in-out !important;
}
.mickey-post-ear-r {
    position: absolute !important;
    top: -20px !important;
    right: -15px !important;
    width: 90px !important;
    height: 90px !important;
    background: #14131a !important;
    border: 4px solid #ff0050 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 15px #ff0050 !important;
    z-index: 1 !important;
    animation: earMoveRight 2s infinite ease-in-out !important;
}
.mickey-post-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #bc13fe !important; 
    font-family: 'Orbitron', sans-serif !important; 
    font-size: 19px !important; 
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 0 8px rgba(188, 19, 254, 0.6) !important;
    z-index: 3 !important;
    white-space: nowrap !important;
}
@keyframes earMoveLeft {
    0%, 100% { transform: scale(1) rotate(-5deg); }
    50% { transform: scale(1.03) rotate(5deg); }
}
@keyframes earMoveRight {
    0%, 100% { transform: scale(1) rotate(5deg); }
    50% { transform: scale(1.03) rotate(-5deg); }
}
</style>

<div class="mickey-post-clock">
    <div class="mickey-post-head">
        <div class="mickey-post-ear-l"></div>
        <div class="mickey-post-ear-r"></div>
        <div class="mickey-post-face" id="postMickeyFace">
            <div class="mickey-post-text" id="postMickeyTime">00:00:00 AM</div>
        </div>
    </div>
</div>

<script>
function startPostClock() {
    const timeDisplay = document.getElementById('postMickeyTime');
    const mickeyFace = document.getElementById('postMickeyFace');
    if (!timeDisplay || !mickeyFace) return;
    const now = new Date();
    let hours = now.getHours();
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    const ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours ? hours : 12; 
    const hoursStr = String(hours).padStart(2, '0');
    timeDisplay.innerText = hoursStr + ':' + minutes + ':' + seconds + ' ' + ampm;
    const neonColors = ['#bc13fe', '#00f2ea', '#ff0050', '#ffe066', '#00ff66'];
    const currentColor = neonColors[now.getSeconds() % neonColors.length];
    mickeyFace.style.borderColor = currentColor;
    mickeyFace.style.boxShadow = '0 0 20px ' + currentColor + ', inset 0 0 15px rgba(188, 19, 254, 0.3)';
}
setInterval(startPostClock, 1000);
startPostClock();
</script>

✨ ساعة ميكي ماوس النيون التفاعلية للمدونات والمواقع

ساعة ميكي ماوس النيون التفاعلية هي أداة بسيطة وخفيفة تضيف لمسة حيوية إلى صفحات بلوجر أو أي موقع HTML. الفكرة ليست مجرد عرض الوقت فقط، بل تقديم ساعة رقمية بشكل مرح ومختلف، مع ألوان نيون متغيرة وحركة خفيفة في الأذنين تجعل التصميم يبدو حيًا أمام الزائر.

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

✨ ميزات ساعة ميكي ماوس النيون التفاعلية

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

لماذا قد تحتاج هذه الساعة في مدونتك؟

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

من وجهة نظري، أفضل استخدام لها يكون في الصفحات التي تعرض أكواد أو أدوات جاهزة، لأن الزائر يستطيع رؤية المعاينة مباشرة ثم نسخ الكود. هذا الأسلوب يجعل المقال أقوى؛ فهو لا يشرح فقط، بل يعرض النتيجة أمام الزائر.

أين يمكن استخدام الكود؟

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

طريقة إضافة الكود في بلوجر

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

نصائح قبل الاستخدام

إذا كان قالبك يحتوي على إضافات كثيرة، جرّب الكود أولًا في صفحة اختبار. وإذا أردت تغيير الألوان، يمكنك تعديل أكواد النيون مثل #00f2ea و #ff0050 و #bc13fe. أما إذا أردت تكبير الساعة أو تصغيرها، يمكن تعديل قيم العرض والارتفاع داخل CSS.

أسئلة شائعة

هل تعمل الساعة على بلوجر؟
نعم، تعمل داخل أداة HTML/JavaScript أو داخل المقال إذا تم وضعها من محرر HTML.

هل تحتاج الساعة إلى مكتبات خارجية؟
لا، الكود يعتمد على CSS وJavaScript فقط.

هل يمكن تغيير ألوان النيون؟
نعم، يمكن تغيير الألوان من مصفوفة neonColors داخل كود JavaScript ومن خصائص border وbox-shadow في CSS.

هل تناسب الهاتف؟
نعم، التصميم بحجم مناسب ويظهر بشكل جيد على أغلب الشاشات.