최신 게시물 랜덤색상 때문에 질문 드립니다. 채택완료
아래에 있는것이 랜덤 배경 색상 출력하는 소스인데 하나에만 적용이 됩니다.
메인에 최근 게시물 5개 사용 중인데 똑같은 최근게시물 스킨을 사용합니다.
그런데 하나만 색상이 변경되고 나머지 4개는 변경이 안됩니다.
어떻게 하면 최근 게시물 5개 다 색상 바뀌게 할수 있을까요?
</p><p><div id=bgDiv>내용<div></p><p> </p><p> <script type='text/javascript'>
// 0 ~ 1 까지의 난수를 생성하는 Math 객체의 random 메소드를 사용합니다.
var sum = Math.random();
// random 메소드로 생성된 난수에 ( 예: 0.335435 ) 10 을 곱해줍니다.
var result = sum * 10;
// 10을 곱한 난수를 ceil 메소드를 사용하여 올림 값으로 변경합니다.
var resultUp = Math.ceil(result);
// switch 문을 사용하여 랜덤으로 생성되는 1 부터 10 까지의 정수를 체크하여 배경을 지정 해줍니다.
// 새로고침 할때마다 다른 색의 배경이 적용되며 색을 추가 할경우에는 case 를 늘려주시면 됩니다.</p><p> var d = document.getElementById('bgDiv');
switch ( resultUp ) {
case 1 : d.style.background = "#E91B23";
break;
case 2 : d.style.background = "#3498DB";
break;
case 3 : d.style.background = "#8CC346";
break;
case 4 : d.style.background = "#F1C40F";
break;
default : d.style.background = "#553C7D";
break;
}
</script></p><p>답변 4개
아래의 bgDiv 가 모두 똑같이 적용되서 충돌이 나기 때문에 서로 다르게 id를 적용해주세요.
var 그리고 사용하는 최근게시물 스킨을 다른이름폴더로 복사해서 다른 이름으로 개별로 스킨을 적용해주세요.
댓글을 작성하려면 로그인이 필요합니다.
d = document.getElementById('bgDiv');
</p><p><style type="text/css">
.test {
width:100px;
height:100px;
}
</style>
<div id="div1" class="test"></div>
<div id="div2" class="test"></div>
<div id="div3" class="test"></div>
<div id="div4" class="test"></div>
<div id="div5" class="test"></div>
<script type="text/javascript">
Array.prototype.shuffle = function() {
return this.concat().sort(function() {
return Math.random() - Math.random();
});
}</p><p>var nums = ["#E91B23", "#3498DB", "#8CC346", "#F1C40F", "#553C7D"];
var arr = nums.shuffle();
var classes = document.getElementsByClassName("test");
for(i=0; i<classes.length; i++) {
classes[i].style.background = arr[i];
}
</script></p><p>http://nyaongii.dothome.co.kr/temp/wrid_129507.html">http://nyaongii.dothome.co.kr/temp/wrid_129507.html
댓글을 작성하려면 로그인이 필요합니다.
게시물 영역 div의 id를 선택해서 변경하지 말고 class를 만들어서 사용해 보세요/
내용로그인 후 평가할 수 있습니다댓글을 작성하려면 로그인이 필요합니다.
id값은 페이지 상에서 한번만 사용할 수 있기에 중복이 되어서 하나의 최근 게시물에만 적용이 되겠네요.
가장 간단하게 해결하는 방법은 현재의 최근 게시물 스킨을 4개를 복사하세요.
예를 들어서 latest_01이라는 최근 게시물 폴더의 내용을 4개 복사한 다면
latest_01 ~ latest_05로 되겠지요.
그런 다음에 소스 상에서
부터 까지 각각 수정해 주시고요. var var var 최근 게시물 적용하는 부분에서 스킨명을 latest_01부터 latest_05까지로 각각 지정해 주시면 될 것 같습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.d = document.getElementById('bgDiv');이 부분 소스도d = document.getElementById('bgDiv_01');부터d = document.getElementById('bgDiv_05');까지 수정하신 다음에