illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!
4 3848 ۱۳ مرداد ۹۳ محمد اسفندیاری

با سلام خدمت همه دوستان سون لرنی

امروز میخوام یک کار ساده اما با حال رو به شما یاد بدم.اینجا میخوایم کاری کنیم که هر روز هفته یه استایل متفاوت داشته باشه و با عوض شدن روز هفته ، استایل هم متناسب با اون عوض بشه.

خب شروع میکنیم.ابتدا هفت فایل CSS با نام های هفته درست میکنیم و استایل های مورد نظر رو درون اون قرار میدیم ، به شکل زیر :

  • Sunday.css
  • Monday.css
  • Tuesday.css
  • Wednesday.css
  • Thursday.css
  • Friday.css
  • Saturday.css

بعد از این کار میایم و کدهای javascript زیر رو به کدهامون اضافه میکنیم :

 

در خط 2 یه آرایه به نام dayNames ساختیم و تمام روزهای هفته رو در اون قرار دادیم.

در خط 3 با استفاده از تابع Date زمان و تاریخ الان رو گرفتیم و با استفاده از متد getDay() شماره روز هفته رو دریافت میکنیم و اون رو در متغیر dayNumber ذخیره میکنیم.که عددی بین 0 تا 6 میباشد.

در خط 4 اومدیم و با استفاده از شماره روز هفته و با استفاده از آرایه dayNames ، نام روز هفته رو بدست آوردیم و اون رو با استفاده از document.writeln() در خروجی چاپ کردیم.

حال فرض کنید امروز sunday باشد.در نتیجه شماره روز هفته dayNumber برابر با 0 خواهد بود.

حال dayNames[0] به معنای عضو اول آرایه میباشد و میدانیم که عضو اول آرایه Sunday میباشد.در نهایت در خروجی چنین چیزی چاپ میشه :

در نتیجه کدهایی که در فایل sunday.css موجود هستن اجرا خواهد شد.

تا اینجا کارمون تقریبا تموم شده.حالا فرض کنید به هر دلیلی Javascript روی مرورگر کاربر غیر فعال باشه.اگه اینطور باشه هیچ استایلی نشون داده نمیشه و سایتمون نابود میشه!!

برای حل کردن این مشکل میایم و یک فایل CSS بنام default.css درست میکنیم و اونو در تگ <noscript> قرار میدیم تا زمانی که javascript غیر فعاله این فایل CSS اجرا بشه و با مشکل مواجه نشیم.

 

خب کارمون تموم شد.امیدوارم بدردتون خورده باشه.

موفق باشید.یا علی

منبع : css-tricks

نوع کد رايگان

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    شهریار(۱۳ مرداد ۱۳۹۳)

    درود خدمت شما آموزش بسیار خوبی بود
    لذا از شما درخواست دارم آموزشی رو قرار بدهید که بر اساس یکی از وب سایت های هوا شناسی و منطقه خاص خروجی بگیره و مثلا امروز برفه استایل سی اس اس برف بیاد اگر بارونه سی اس اس بارون بیاد و …..

    اگر این آموزش قرار بدید که ممنون می شم
    با تشکر

  • ‏‏
    محمد اسفندیاری(۱۴ مرداد ۱۳۹۳)

    با سلام خدمت شما
    نهایت تلاشمو میکنم که چیزی شبیه به چیزی که درخواست دادید تهیه کنم
    موفق باشید

  • ‏‏

    درود !
    چنین کدی رو هم میشه برای نمایش ذکر روزهفته و … هم استفاده کرد، نه ؟!

    ممنون (:

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram