728x90
반응형
문제 1
구구단을 출력하되, 프롬포트에 입력받은 단만 백그라운드 컬러를 칠하는 코드를 작성하시오.
▶ 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, tr, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
font-size: 12px;
text-align: center;
}
caption {
font-size: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
</body>
</html>
<script>
var colo = prompt("색칠할 단을 입력해주세요");
document.write("<div id='container'><table><caption>구구단을 외자 구구단을 외자</caption><tread>");
for(var i=2;i<10;i++){
document.write("<tr>");
for(var j=1;j<=9;j++){
if(i == colo){
document.write("<td style = 'background-color: #ccc;''>"+i+"*"+j+"="+(i*j)+"</td>");
} else{
document.write("<td>"+i+"*"+j+"="+(i*j)+"</td>");
}
}
document.write("</tr>");
}
document.write("</tread></table></div>");
</script>
▶ 출력 결과
문제 2
해당 화면을 출력하는 코드를 작성하시오.
▶ 코드
<script>
document.write("<div id='container'><table><caption>구구단을 외자 구구단을 외자</caption><tread>");
var count=9;
for(var i=1;i<10;i++){
document.write("<tr>");
for(var j=1;j<=9;j++){
if(j == count){
document.write("<td style = 'background-color: #ccc;''>"+i+"*"+j+"="+(i*j)+"</td>");
count--;
} else{
document.write("<td>"+i+"*"+j+"="+(i*j)+"</td>");
}
}
document.write("</tr>");
}
document.write("</tread></table></div>");
</script>
문제 3
해당 화면을 출력하는 코드를 작성하시오.
▶ 코드
<script>
document.write("<div id='container'><table><caption>구구단을 외자 구구단을 외자</caption><tread>");
var count1 = 1;
var count2 = 9;
for (var i = 1; i < 10; i++) {
document.write("<tr>");
for (var j = 1; j <= 9; j++) {
if (j == count1) {
if(count1 == count2)
document.write("<td style = 'background-color: yellowgreen;''>" + i + "*" + j + "=" + (i * j) + "</td>");
else
document.write("<td style = 'background-color: #ccc;''>" + i + "*" + j + "=" + (i * j) + "</td>");
} else if (j == count2) {
document.write("<td style = 'background-color: tomato;''>" + i + "*" + j + "=" + (i * j) + "</td>");
} else {
document.write("<td>" + i + "*" + j + "=" + (i * j) + "</td>");
}
}
count1++;
count2--;
document.write("</tr>");
}
document.write("</tread></table></div>");
</script>
※ 단 수가 바뀌어도 모양의 변화가 없다.
728x90
반응형
'HRD_훈련 > 실습' 카테고리의 다른 글
| [JavaScript] 텍스트 사라지게 만들기 (31일차) (0) | 2023.06.28 |
|---|---|
| [JavaScript] 자바스크립트 sum 함수 만들기 (31일차) (0) | 2023.06.28 |
| [JavaScript] time 실습 (31일차) (0) | 2023.06.28 |
| [JavaScript] 배수의 개수 구하기 (31일차) (0) | 2023.06.28 |
| [CSS] grid 실습 (30일차) (0) | 2023.06.27 |