جدول محتوایی
تولید داده و تصویر تصادفی با جاوا اسکریپت
در این فصل ، شما یاد می گیرید که چگونه می توانید تصاویر تصادفی را در یک صفحه وب با کمک JavaScript تولید کنید. بنابراین ، ما با استفاده از کد منبع JavaScript و HTML ، یک تولید کننده ی تصویر تصادفی جاوا اسکریپت مختلف ایجاد خواهیم کرد.
در مرحله اول ، به یک آرایه نیاز داریم تا URL های تصاویر را در صفحه وب نمایش دهیم. مفهوم ژنراتور تصویر تصادفی، بیشتر برای تبلیغات استفاده می شود. تصاویری که در یک وب سایت به طور تصادفی تولید می کنید ، قبلاً در یک پایگاه داده یا یک آرایه ذخیره شده باشند.
این تصاویر در یک بازه زمانی منظم به کاربر نمایش داده می شوند یا با کلیک تغییر می کنند. همچنین می توانید آدرس یک تصویر را مستقیماً از طریق اینترنت ارائه دهید.
ما در مورد دو روش مختلف برای ایجاد ژنراتور یا تولید کننده تصویر تصادفی با استفاده از جاوا اسکریپت بحث خواهیم کرد. در ادامه مقاله به این دو رویکرد خواهیم پرداخت.
پیش از ادامه ی مقاله ، در صورت نیاز به خرید سرور مجازی ایران به سایت ایرانیکاسرور مراجعه کرده و از پلن های فوق العاده با قیمت های عالی دیدن کنید.
روش 1
در این روش ، تصاویر به طور تصادفی در صفحه وب با یک بازه زمانی منظم با یک کلیک روی دکمه شروع می شوند.
ما از تابع داخلی جاوا اسکریپت SetInterval () برای تنظیم یک تایمر بین تصاویر برای نمایش استفاده خواهیم کرد.
در این مثال ، ما از اندازه اصلی تصویر استفاده کرده ایم. همچنین می توانید اندازه برای نمایش هر تصویر را تعریف کنید. اکنون مراحل زیر را دنبال کنید:
مراحل ایجاد تولید کننده تصویر تصادفی
- با استفاده از JavaScript برای ذخیره تصاویر ، یک آرایه را اعلام کنید.
- لینک یا URL تصاویر را در آرایه اعلام شده تهیه کنید. همچنین می توانید ارتفاع و عرض را در آرایه عبور دهید تا اندازه تصویر در صفحه وب نمایش داده شود.
- یک متغیر JavaScript را برای ذخیره یک مقدار تصادفی محاسبه شده با استفاده از این طبقه (Math.random ()*RandomImage.l طول) اعلام کنید. این یک عدد تصادفی بین 0 و طول آرایه ای ایجاد می کند که به تصاویر اختصاص داده می شود تا به طور تصادفی نمایش داده شود.
- اکنون ، تصاویر تصادفی انتخاب شده با استفاده از یک عدد محاسبه شده در مرحله قبلی را برگردانید.
- تمام مراحل فوق را در یک تابع تعریف شده توسط کاربر (GetRandomImage) قرار دهید ، که با کلیک بر روی دکمه ی Generate Image فعال می شود.
- در کد HTML ، از یک تب (tab) استفاده می کنیم و یک ID را برای نمایش تصویر بر روی تصویر دیگر ارائه می دهیم. بنابراین ، تصاویر با قرار گرفتن روی یکدیگر یک به یک برای شما ظاهر می شوند.
بیایید شروع کنیم!
کد های زیر را کپی کنید:
<html>
<head>
<title> Random Image Generator </title>
</head>
<script>
function getRandomImage() {
//declare an array to store the images
var randomImage = new Array();
//insert the URL of images in array
randomImage[0] = "https://images.pexels.com/photos/858115/pexels-photo-858115.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";
randomImage[1] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg";
randomImage[2] = "https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";
randomImage[3] = "https://images.unsplash.com/photo-1543877087-ebf71fde2be1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60";
randomImage[4] = "https://wi.wallpapertip.com/wsimgs/156-1565522_puppies-desktop-wallpaper-desktop-background-puppies.jpg";
randomImage[5] = "https://images.unsplash.com/photo-1501265976582-c1e1b0bbaf63?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60";
//generate a number and provide to the image to generate randomly
var number = Math.floor(Math.random()*randomImage.length);
//return the images generated by a random number
return document.getElementById("result").innerHTML = '<img src="'+randomImage[number]+'" />';
}
</script>
<body>
<center><h2 style="color:green"> Random Image Generator </h2></center>
<h4> Click the button to generate and display random images on the webpage </h4>
<!-- call user-defined getRandomImage function after 2 seconds -->
<button onclick = "setInterval(getRandomImage, 2000)"> Generate Image </button>
<br> <br>
<span id="result" align="center"> </span>
</body>
</html>
خروجی
با اجرای این کد ، یک صفحه وب با یک دکمه Generate Image ظاهر می شود. هنگامی که روی این دکمه کلیک می کنید ، تصاویر به طور تصادفی در صفحه وب نمایش داده می شوند:
برای نمایش تصویری که به طور تصادفی تولید می شود ، روی دکمه Generate Image کلیک کنید. این تصاویر در هر چند ثانیه به طور خودکار تغییر می کنند ، البته پس از کلیک بر روی دکمه ی Generate Image:
خروجی زیر را مشاهده کنید:
“به یاد داشته باشید که ما آدرس تصویر را از طریق اینترنت ارائه داده ایم. ما این تصاویر را در پایگاه داده خود بارگیری یا ذخیره نکرده ایم”.
روش 2
در این مثال ، هنگامی که کاربر روی یک دکمه کلیک می کند ، چندین تصویر تصادفی را به طور همزمان تولید و نمایش می دهیم.
ما یک دکمه را با استفاده از تصویر Code HTML تولید می کنیم. این تصاویر در آرایه ای که توسط کاربر انتخاب شده است ذخیره می شوند. هر بار که کاربر روی این دکمه تولید تصویر کلیک می کند ، پنج تصویر تصادفی به صورت عمده در صفحه وب تولید و نمایش می دهند.
مراحل ایجاد تولید کننده تصویر تصادفی عمده
- با استفاده از JavaScript یک آرایه را اعلام کنید و لینک یا URL تصاویر را در آن آرایه تهیه کنید تا تصاویر را ذخیره کنید.
- برای تولید چندین تصویر تصادفی به طور همزمان از یک حلقه for استفاده کنید. ما از حلقهfor بین 0 تا 5 برای نمایش پنج تصویر در یک دکمه واحد استفاده خواهیم کرد.
- مراحل زیر را در این حلقه قرار دهید.
- با استفاده از روش floor(Math.random()*randomImage.length)، یک عدد تصادفی را بین 0 تا طول آرایه (array length) محاسبه کنید. این عدد تولید شده به تصاویر به صورت تصادفی به تصاویر اختصاص می یابد.
- اکنون ، هر پنج تصویر تصادفی را که با استفاده از یک عدد محاسبه شده در مرحله قبل انتخاب شده اند ، چاپ کنید.
- تمام مراحل فوق را در یک تابع تعریف شده توسط کاربر (GetRandomImage) قرار دهید ، که با کلیک بر روی Generate Image فعال می شود.
بیاید کارمون رو شروع کنیم!
کد های زیر رو کپی کنید:
<html>
<head>
<title> Random Image Generator </title>
</head>
<script>
function getRandomImage() {
//declare an array to store the images
var randomImage = new Array();
//insert the URL of images in array
randomImage[0] = "https://wi.wallpapertip.com/wsimgs/15-155208_desktop-puppy-wallpaper-hd.jpg";
randomImage[1] = "http://www.petsworld.in/blog/wp-content/uploads/2014/09/running-cute-puppies.jpg";
randomImage[2] = "https://wi.wallpapertip.com/wsimgs/156-1564365_golden-retriever-puppy-desktop-wallpaper-desktop-wallpaper-puppy.jpg";
randomImage[3] = "https://wi.wallpapertip.com/wsimgs/156-1564140_free-puppy-wallpapers-for-computer-wallpaper-cave-cute.jpg";
randomImage[4] = "https://wi.wallpapertip.com/wsimgs/156-1565522_puppies-desktop-wallpaper-desktop-background-puppies.jpg";
randomImage[5] = "https://wi.wallpapertip.com/wsimgs/156-1566650_cute-puppies-desktop-wallpaper-cute-puppies.jpg";
//loop to display five randomly chosen images at once
for (let i=0; i< 5; i++) {
//generate a number and provide to the image to generate randomly
var number = Math.floor(Math.random()*randomImage.length);
//print the images generated by a random number
document.getElementById("result").innerHTML += '<img src="'+ randomImage[number] +'" style="width:150px" />';
}
}
</script>
<body>
<center><h2 style="color:green"> Random Image Generator </h2></center>
<h4> Click the button to generate and display the five random images: </h4>
<!-- call user-defined getRandomImage function to generate image -->
<button onclick = "getRandomImage()"> Generate Image </button>
<br> <br>
<span id="result" align="center"> </span>
</body>
</html>
خروجی
با اجرای کد فوق ، پاسخ را به همراه دکمهGenerate Image دریافت خواهید کرد. در ابتدا هیچ تصویری وجود نخواهد داشت:
هنگامی که روی این دکمه Generate Image کلیک می کنید ، پنج تصویر انتخاب شده به طور تصادفی در وب به شما نمایش می دهند:
مجددا بر روی دکمه Generate Image کلیک کنید، پنج تصویر دیگر دوباره به صورت تصادفی با خروجی قبلی نمایش داده می شوند:
و کارمون تمومه!
در این مقاله نحوه ی ایجاد ژنراتور/ تولید کننده ی تصویر تصادفی در جاوا اسکریپت به دو روش تکی و عمده را مورد بررسی قرار دادیم. موفق باشید!