-
211001_span,rgbColor,random,clickJQuery 2021. 10. 1. 10:07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>0</div><div>1</div><div>2</div><div>3</div><div>4</div>
<span></span>
<script type="text/javascript">
$("div").css({
"width":"120px",
"height":"120px",
"border":"2px solid black",
"float":"left",
"font-size":"20pt",
"text-align":"center",
"line-height":"120px", /* 줄간격 */
"cursor":"pointer",
"margin-right":"5px"
});
$("span").css("font-size","20pt");
//div의 크기를 일정하게 지정한 후 랜덤 색상 만들기..배경색으로 설정
for (var i = 0; i < $("div").length; i++) {
/* 스크립트 안의 div이기에 $("div") */
//rgb색상 얻기
var r=parseInt(Math.random()*256); //0~255
var g=parseInt(Math.random()*256);
var b=parseInt(Math.random()*256);
var color="rgb("+r+","+g+","+b+")";
//순번에 맞게 배경색 지정
$("div").eq(i).css("background-color", color);
}
//각각의 div 클릭시 해당 배경색을 얻어서 span에 text로 출력
$("div").click(function() {
var bg=$(this).css("background-color"); //bg에 저장
$("span").text(bg);
});
</script>
</body>
</html>
기본화면 --> 3번 클릭시 span에 text출력 'JQuery' 카테고리의 다른 글
211001_div,check,radio (0) 2021.10.01 211001_clone,append (0) 2021.10.01 211001_list,select,contains (0) 2021.10.01 211001_div,mouseover,mouseout,empty,hover (0) 2021.10.01 211001_table,button,click,score (0) 2021.10.01