자바스크립트에서 루프와 조건 그리고 색상 바꾸기가 한 페이지에 있는 문서
허탈하겠지만, 결론부터 보여주면 이런 모양새입니다.
출처 → 네이버 지식iN에 나온 '자바스크립트 내에서 글자색 바꾸기'에 대한 답변을 보고서 적극적으로 활용하여 모방해 봤습니다.
짜기는 이런 식으로 짰지만, 위 출처 내용을 거의 모방했다고 해도 아주 틀린 말이 아니란 걸 밝힙니다.
저로선 자바스크립트는 자주 쓰지만, 거기에 루프가 들어간 건 솔직히 무섭고 겁나거든요.
오늘 전혀 다른 목적으로 자바로 색상 바꾸는 걸 찾는 중에 이걸 발견했지요.
애초에 구하고자 했던 건 까먹었지만, 이거라도 익히는 게 밑지는 장사는 아닐 것 같아 베껴서 살짝 틀어봤습니다.
그러니 더욱 세밀한 내용에 접근하려면 위 출처를 눌러 확인해 보십시오!
------------------------------------------------------------------
<HTML><HEAD>
<TITLE>자바 색상</TITLE>
<STYLE>
P{font-family:바탕;font-size:10pt;font-weight:bold;text-align:center;}
SPAN{text-decoration:underline;font-size:11pt;}
.Nr{width:444;line-height:2.5;font-family:바탕;font-size:10pt;font-weight:bold;text-align:center;background:#C0C0FF;}
</STYLE></HEAD>
<BODY bgcolor='white'>
<P>아래 내용은 자바스크립트를 써서 1에서 150이하까지 루프로 돌린 결과이다.</P>
<P>① 숫자 중에서 3과 8의 공배수가 되는 숫자의 색깔은 <SPAN style=color:'#008000'>녹색</SPAN>으로 보이게끔 했다.</P>
<P>② 숫자 중에서 3의 배수가 되는 숫자의 색깔은 <SPAN style=color:'#0000FF'>파란색</SPAN>으로 보이게끔 했다.</P>
<P>③ 숫자 중에서 8의 배수가 되는 숫자의 색깔은 <SPAN style=color:'#FF0000'>빨간색</SPAN>으로 보이게끔 했다.</P>
<P>④ 그 밖의 숫자는 <SPAN style=color:'#000000'>검정색</SPAN>으로 보이게끔 했다.</P>
<center>
<DIV id="Nr" class='Nr'>
</DIV></center>
</BODY></HTML>
<SCRIPT>
var Nr=document.getElementById("Nr");// DIV id 로 오브젝트를 가져옴
for(var i=1; i<=150; i++){
// 1부터 150이하까지 loop
var Nc="";
if(i%3==0 && i%8==0){
// 3과 8 둘 중 어느 거로 나누어도 0이 떨어지면 녹색
Nc="#008000";}
else if(i%3==0){
// 7로 나누어 0이 떨어지면 노란색
Nc="blue";}
else if(i%8==0){
// 8로 나누어 0이 떨어지면 빨간색
Nc="red";}
else{
// 그 외에는 흰색
Nc="black";}
Nr.innerHTML+="<FONT color="+Nc+">" + i + " </FONT>";
// DIV 안에 HTML tag를 넣는다.
}
</SCRIPT>
------------------------------------------------------------------
이상입니다.
'내 마음 오로지' 카테고리의 다른 글
| ♬ 새벽 아침 ♬, 수와진 (0) | 2012.04.30 |
|---|---|
| ♬ 알고 싶어요 ♬, 한밤중에 들리는 소리 (0) | 2012.04.30 |
| 좋은 글 '마음에 쓰는 편지'를 어떻게 하면 빨리 찾아갈 수 있을까? (0) | 2012.04.28 |
| 이런 약 억지로 먹을 필요가 있나요? (0) | 2012.04.28 |
| 깨가 모래가 되지 않기 위해, 이외수 <절대강자> (0) | 2012.04.27 |
