【JavaScript】 이미지를 무작위로 표시하는 방법
2500 단어 초보자자바스크립트프로그래밍 공부 일기
프로그래밍 공부 일기
2020년 10월 26일
몇 장의 사진으로부터 JavaScript를 사용해 랜덤에 1개 표시시키는 방법을 소개한다.
방법
표시 후보의 화상 파일 리스트를 사전에 준비해 두고, 난수를 사용해 1개를 선택해 표시시킨다.
구체적인 절차
1. 표시할 가능성이 있는 이미지 파일명을 모두 배열에 넣는다
2. 그 중에서 액세스될 때마다 난수를 사용하여 1장 선택
3. 선택한 이미지 하나를 표시
샘플 코드
자바스크립트const imageArea = document.getElementById('imageArea');
const images = ['【画像パス1】', '【画像パス2】', '【画像パス3】'];
const imageNo = Math.floor( Math.random() * images.length)
imageArea.src = images[imageNo];
HTML<img src="【画像パス】" id='imageArea'>
참고문헌
이미지를 무작위로 표시하는 방법! JavaScript로 전환
JavaScript로 문자열이나 이미지를 랜덤하게 표시하는 방법을 현역 엔지니어가 해설【초보자용】
Reference
이 문제에 관하여(【JavaScript】 이미지를 무작위로 표시하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mzmz__02/items/8ab4937d017b8a9dc6d7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
표시 후보의 화상 파일 리스트를 사전에 준비해 두고, 난수를 사용해 1개를 선택해 표시시킨다.
구체적인 절차
1. 표시할 가능성이 있는 이미지 파일명을 모두 배열에 넣는다
2. 그 중에서 액세스될 때마다 난수를 사용하여 1장 선택
3. 선택한 이미지 하나를 표시
샘플 코드
자바스크립트const imageArea = document.getElementById('imageArea');
const images = ['【画像パス1】', '【画像パス2】', '【画像パス3】'];
const imageNo = Math.floor( Math.random() * images.length)
imageArea.src = images[imageNo];
HTML<img src="【画像パス】" id='imageArea'>
참고문헌
이미지를 무작위로 표시하는 방법! JavaScript로 전환
JavaScript로 문자열이나 이미지를 랜덤하게 표시하는 방법을 현역 엔지니어가 해설【초보자용】
Reference
이 문제에 관하여(【JavaScript】 이미지를 무작위로 표시하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mzmz__02/items/8ab4937d017b8a9dc6d7
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const imageArea = document.getElementById('imageArea');
const images = ['【画像パス1】', '【画像パス2】', '【画像パス3】'];
const imageNo = Math.floor( Math.random() * images.length)
imageArea.src = images[imageNo];
<img src="【画像パス】" id='imageArea'>
이미지를 무작위로 표시하는 방법! JavaScript로 전환
JavaScript로 문자열이나 이미지를 랜덤하게 표시하는 방법을 현역 엔지니어가 해설【초보자용】
Reference
이 문제에 관하여(【JavaScript】 이미지를 무작위로 표시하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mzmz__02/items/8ab4937d017b8a9dc6d7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
