یك شنبه 17 آذر 1398 |  عضویت / ورود






[ بخش اصلی آموزشها | افزودن آموزش | داری بیشترین امتیاز | دارای بیشترین بیننده | جدیدترین نظرات ]

قطعه کد جاوااسکریپت برای نمایش رندوم چند عکس در صفحه (javascript code to show random image)



این آموزش مربوط است به موضوع آموزش جاوا اسکریپت - Java Script‏ که توسط Hamid در تاریخ: Saturday, 2011 June 18 ارسال شده است.   |   تعداد بازدید: 10606 بار   |   امتیاز متوسط: امتیازی داده نشده است


-------------------

اگر قصد دارید چند عکس مختلف یا چند جمله مختف و یا چند عکس همراه با لینک در صفحه نمایش دهید، یکی از راه‌های سمت کلاینت، استفاده از جاوااسکریپت است.

ابتدا چند عکس مختلف در یک پوشه در نظر بگیرید.

به کدهای زیر دقت کنید:

<script type="text/javascript">
var texts = new Array() texts[1] = "any code here" texts[2] = "any code here"
texts[3] = "any code here" texts[4] = "any code here"  

var ry = Math.floor(Math.random() * texts.length) if (ry == 0) { ry = 1 } document.write(texts[ry]);
</script>

به جای any code here هر کد HTMLی که مورد نظرتان بود می‌توانید بنویسید. (فقط در بین کدهای اچ.تی.ام.ال، از ' استفاده کنید و نه ")

پس از کامل کردن، کد، آن‌را هر کجای صفحه بگذارید، همان‌جا یکی از 4 کد را نمایش خواهد داد.

در حقیقت ما یک آرایه در نظر گرفته‌ایم و در هر خانه یک قطعه کد HTML ذخیره کرده‌ایم. حالا با یک تابع یکی از خانه‌ها را به صورت رندوم انتخاب می‌کنیم و نمایش می‌دهیم.

ما 4 خانه ساخته‌ایم، شما می‌توانید کد را تا هر چند خانه که خواستید ادامه دهید.

مثال نهایی:

<script type="text/javascript">
var texts = new Array() texts[1] = "<a href='http://aftab.cc/shop' target='_blank'><img src='http://ads.aftab.cc/top/how_it_s_made.jpg' /></a>" texts[2] = "<a href='http://aftab.cc' target='_blank'><img src='http://ads.aftab.cc/top/efu_right.jpg' /></a>"
texts[3] = "<a href='http://aftab.cc/shop' target='_blank'><img src='http://ads.aftab.cc/top/shop_english.png' /></a>" texts[4] = "<a href='http://aftab.cc' target='_blank'><img src='http://ads.aftab.cc/top/top_notch_right.png' /></a>"
texts[5] = "<a href='http://aftab.cc' target='_blank'><img src='http://ads.aftab.cc/top/top_notch.png' /></a>"  

var ry = Math.floor(Math.random() * texts.length) if (ry == 0) { ry = 1 } document.write(texts[ry]);
</script>

 





ارسال سؤال یا نظر


1- جواد بهمنی:
بوسیله: , در: Sunday, 2014 June 29-کد: 10725
سلام و سپاس
من دانشجو و نرم افزاریم,تازه کار تحت وب رو شروع کردم,مطلبتون نه تنها جواب سوالمو داد بلکه چیزی بیشتر هم به من یاد داد.باز هم سپاس....


2- amir:
بوسیله: , در: Tuesday, 2014 September 02-کد: 11507
من برای این میخواستم که یه بلوک ثابت بذارم
خیلی کمکم کرد ممنون


3- حامد:
بوسیله: , در: Monday, 2016 May 09-کد: 14457
با سلام
من میخواستم عکسهایی را که بصورت رندم نمایش داده میشود دارای هاور باشد کد های css یا استایل مربوط به هاور را کجا باید بنویسم که هر عککسی باز شد با هاور باز شود
ممنون میشم پاسخ دهید


4- علی:
بوسیله: , در: Thursday, 2018 May 10-کد: 15601
سلام خدمت استاد گرامی . rnیه سوال دارم. rnاگه یه صفحه html داشته باشیم که سه تا div توی این صفحه قرار داشته باشه و ترتیب نمایش اونها به این صورت باشه :rn1rn2rn3rnباید از چه کدی استفاده کنم که با هر بار رفرش صفحه، جای این div ها به صورت تصادفی تغییر کنه؛ مثلأ بشه : rn3rn1rn2rnممنون از پاسخ تون


5- زهرا:
بوسیله: , در: Sunday, 2018 June 24-کد: 15637
سلام خسته نباشید اگه بخوایم تعدادی کلید رو به طور تصادفی در یک فریم قرار بدیم چجوری باید اینکاروبکنیم اگه کمک کنید ممنون میشم


6- کیوان:
بوسیله: , در: Tuesday, 2019 January 29-کد: 15912
چطور میتونم طول و عرض یک div رو به صورت رندم بدم که با هربار کلیک روش طول و عرضش فرق کنه


7- bahman:
بوسیله: , در: Thursday, 2019 July 18-کد: 16060
واقعا ممنونم این کد شما مشکل من رو کاملا حل کرد


8- امین بخشی :
بوسیله: , در: Tuesday, 2019 October 29-کد: 16141
با سلام خیلی خوب بود فقط اگه امکانش هست میشه یه کدی رو آموزش بدید که علاوه بر نمایش رندوم عکس ها بتونه بعد از چندثانیه عکس ها رو عوض هم بکنه...؟

Tutorials ©