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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!
3 3299 ۱۲ آبان ۹۳ محمد اسفندیاری

در این مطلب میخوام کدی رو بهتون توضیح بدم که به وسیله ی اون میتونین رنگ های تصادفی رو تولید کنید و روی اونا مدیریت داشته باشید.

برای شروع به صفحه مورد نظر در سایت Github برین و فایلهای مربوطه رو دانلود کنید.

ما در این مطلب با فایل randomColor.js کار داریم. حجم این فایل تقریبا 8 کیلو بایت هست. البته اگر اونو فشرده کنید ، کمتر هم میشه. من این فایل رو در آخر همین مطلب قرار دادم و شما میتونین اونو دانلود کنید و ازش استفاده کنید.

برای شروع یک فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

همونطور که میبینید ، فایل JS رو به سندمون اضافه کردیم و در انتها هم یک تگ باز و بسته ی Script قرار دادیم ، که در اون میتونیم کدهای مورد نظرمونو بنویسیم.

برای ساختن یک کد رنگ تصادفی ( random ) میتونین به روش زیر عمل کنید :

خروجی دستور بالا یک کد هگز ( Hex ) رنگ هست ، که با هر بار Refresh کد رنگ تغییر میکنه.

اگر بخواید که فرمت کد خروجی بصورت کد هگز نباشه ، میتونین با استفاده از خصوصیت format اونو تغییر بدین. این خصوصیت 4 مقدار hex و rgb و rgbArray و hsvArray رو دریافت میکنه.

مقدار پیش فرض این خصوصیت در ابتدا hex هست که میتونین اون رو تغییر بدین. بصورت زیر :

با این کار کد رنگی که در خروجی تولید میشه ، بصورت rgb هست.

همچنین شما میتونین کاری کنید که رنگ های مشابه در خروجی داشته باشین. مثلا اگر شما رنگ زرد رو انتخاب کنید ، خروجی میتونه زرد کم رنگ تا پر رنگ باشه. برای این کار از خصوصیت hue استفاده میکنیم و مقدار آن را هم ، آن رنگی قرار میدیم که میخوایم رنگ های مشابه اون رو درست کنیم. مثلا کد زیر رو در نظر بگیرید :

حالا اگر خروجی رو ببینید ، رنگ سبز رنگ پایه هست و کم رنگ و پر رنگ میشه. مثل تصویر زیر :

green

بجای green ، هر رنگ دیگه ای نیز میتونین قرار بدین و رنگ های مشابه و نزدیک به اون رو در خروجی دریافت کنید.

اگر میخواید که به یکباره مثلا 20 کد رنگ در خروجی دریافت کنید ، میتونین از خصوصیت count استفاده کنید و مقدار اون رو برابر با 20 بزارین. بصورت زیر :

با این کار خروجی یک آرایه خواهد بود ، که هر عضو اون یک کد رنگ هست. این آرایه 20 عضو داره و میتونین از اون استفاده کنید.

همچنین شما میتونین مشخص کنید که رنگ تیره میخواید یا رنگ روشن. برای اینکار میتونین از خصوصیت luminosity استفاده کنید. این خصوصیت دو مقدار light و dark رو دریافت میکنه و به ترتیب رنگهای روشن و تیره رو در اختیارمون قرار میده.

مثلا کد زیر رو در نظر بگیرین :

با این کار در خروجی 27 کد رنگ در اختیارتون قرار میگیره و همشون هم رنگ های روشن هستند. خروجی به صورت زیر هست :

light

حالا اگه بخواید رنگهای تیره درست کنید ، میتونین بصورت زیر عمل کنید :

خروجی اون هم بصورت زیر هست :

dark

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

خب دوستان خسته نباشید. یا علی

نوع کد رايگان

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

  • ‏‏

    ممنون خیلی کاربردی بود

  • ‏‏

    سلام وقتتون بخیر
    واقعا ممنونم بابت مطلب مفیدتون.
    جناب چطوری میشه از rgba استفاده کرد من میخوام تصویر بک گراندمو ببینم؟

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram