본문 바로가기

[자바스크립트] DIV를 랜덤하게 표시하기

2021. 5. 8. 댓글 0

이번에 기록형으로 자바스크립트를 이용한 div를 랜덤으로 표현하는 방법 입니다.

 

<script type="text/javascript">
	window.onload=function() {
	var E = document.getElementsByClassName("item");
	var m = E.length;
	var n = parseInt(Math.random()*m);
	for (var i=m-1;i>=0;i--) {
	var e = E[i];
	e.style.display='none';
	}
	E[n].style.display='';
	}
</script>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>

 

위와 같습니다.

1~4 중 1개만 랜덤으로 나타냅니다.

 

다음에 언젠가 써먹을 날이 있겠죠? ㅋㅋ

 

 

Updating.....

아래 내용은 4개 업체를 섞어서 4개 모두 보여주는 소스 입니다.

 

 

<head>에 입력할 내용

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  var cards = $(".photographer");
  for(var i = 0; i < cards.length; i++){
  var target = Math.floor(Math.random() * cards.length -1) + 1;
  var target2 = Math.floor(Math.random() * cards.length -1) +1;
  cards.eq(target).before(cards.eq(target2));
  };
  });
</script>

 

본문내용 div에 적용할 것

<div class='photographer'>
내용1
</div>
<div class='photographer'>
내용2
</div>
<div class='photographer'>
내용3
</div>
<div class='photographer'>
내용4
</div>

◀ 태그 ▶

◀ 함께보면 유용한 글 ▶

◀ 댓글 ▶ 0