آموزش JS

نمایش زمان با هاور کردن روی المان در جاوا اسکریپت

امروز می خواهیم باهم کدی بنویسیم که زمانی که موس را روی یک المان می بریم,زمان حال نمایش داده شود و وقتی دور می کنیم به حالت اول باز گردد.

با سلام خدمت شما دوست داران آموزش برنامه نویسی.امروز با شما هستیم و آموزش نمایش زمان با هاور کردن روی المان در جاوا اسکریپت که بسیار ساده می باشد و نیاز به دانستن چند کد HTML و JS می باشد. پس با ما همراه باشید.

خب برای شروع ابتدا باید المان درست کنید که ما برای درک بهتر شما از button استفاده می کنیم که راحت تر دیده می شود.برای المان خود یک آی دی یا کلاس در نظر می گیریم و دو ایونت (Event) یعنی onmouseover (زمانی که موس روی المان می آید) و onmouseout (زمانی که موس از روی المان برداشته می شود) قرار می دهیم.

اگر دقت کرده باشید,متنی که روی کلید مورد نظر نوشته شده است “Hover to see the time” می باشد.خب حالا باید کدهای جاوا اسکریپتمان را بنویسیم که بسیار ساده است.برای این کار دو فانکشن نیاز داریم :

Whenhover : این فانکشن برای زمانی است که موس روی المان می آید و زمان باید نمایش داده شود.دقت داشته باشید که فانکشن ها هر اسمی می توانند داشته باشند,اما بهتر است مرتبط با کار باشد.

Whenout : ازن فانکشن هم زمانی که موس از روی المان برداشته می شود,همان متن قبلی را نمایش خواهد داد.

همانطور که مشاهده می کنید با کمک innerHTML می توانیم هر متن را که می خواهیم درون تگ متن نظر خود قرار دهیم و نیازی به ساخت یک المان جدید برای نمایش زمان نیست.

دستور Date() : دقیقا زمان سیستم شما را نشان می دهد و راحت ترین روش برای این کار می باشد.

طراحی سایت در کرج

 

برچسب ها

Alizeynali

سلام من علی محمد زینالی,مدیر و موسس شرکت وبری و متولد سال 1377.از بچگی علاقه زیادی به کار با کامپیوتر داشتم که با بازی شروع شد و رسید به سئو و برنامه نویسی! خیلی دوست دارم چیزایی که یاد گرفتم رو به بقیه هم منتقل کنم و این هم باعث پیشرفت شما میشه و هم من بهتر نکات رو یادم میمونه.امیدوارم از مطالبی که براتون می نویسم راضی باشید. Good Luck

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
بستن
بستن