iT邦幫忙

2023 iThome 鐵人賽

DAY 20
0
Modern Web

基礎網頁開發30天系列 第 20

Day 20 隨機抽取圖片(js)

  • 分享至 

  • xImage
  •  
let imageUrls = [
  "/img/a.jpg",
  "/img/b.jpg",
  "/img/c.jpg",
  "/img/d.jpg",
  "/img/e.jpg",
  // 添加更多圖片URL
];

let showRandomImageButton = document.getElementById("randomBtn");

showRandomImageButton.addEventListener("click", () => {
  let selectedImage = document.getElementById("selected-image");
  let randomIndex = Math.floor(Math.random() * imageUrls.length);
  let randomImageUrl = imageUrls[randomIndex];
  selectedImage.src = randomImageUrl;
});
  1. let imageUrls = [...]:這是一個JavaScript陣列,包含一系列圖片URL。您可以根據需要添加更多圖片URL,這些URL將用於隨機選擇要顯示的圖片。

  2. let showRandomImageButton = document.getElementById("randomBtn");:這行程式碼使用document.getElementById方法獲取具有id為"randomBtn"的按鈕元素,並將其存儲在名為showRandomImageButton的變數中。

  3. showRandomImageButton.addEventListener("click", () => { ... });:這行程式碼將一個點擊事件監聽器添加到showRandomImageButton按鈕上。當按鈕被點擊時,監聽器中的函式將被執行。

  4. let selectedImage = document.getElementById("selected-image");:這行程式碼使用document.getElementById方法獲取具有id為"selected-image"的圖片元素,並將其存儲在名為selectedImage的變數中。這個元素將用於顯示隨機選擇的圖片。

  5. let randomIndex = Math.floor(Math.random() * imageUrls.length);:這行程式碼生成一個隨機數,該數介於0(包括)和imageUrls陣列的長度之間。這個隨機數將用於隨機選擇圖片URL。

  6. let randomImageUrl = imageUrls[randomIndex];:這行程式碼使用隨機生成的索引randomIndeximageUrls陣列中選擇一個圖片URL,並將其存儲在randomImageUrl變數中。

  7. selectedImage.src = randomImageUrl;:這行程式碼將選擇的圖片元素的src屬性設置為隨機選擇的圖片URL,從而將圖片顯示在網頁上。


上一篇
Day 19 隨機抽取圖片(HTML、CSS)
下一篇
Day 21 互動小遊戲-猜拳(HTML、CSS)
系列文
基礎網頁開發30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言