728x90
반응형
문제
- 버튼을 클릭하면 프롬포트 창을 나타난다.
- 프롬포트 창에 구구단의 단을 입력하면 해당 구구단이 출력하도록 코드를 작성하라.
코드
<!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>
.gu {
padding: 30px;
font-size: 20px;
}
</style>
</head>
<body>
<button class="gu" onclick="clickGugudan()">구구단</button>
</body>
</html>
<script>
function clickGugudan() {
var name = prompt("구구단을 입력하세요");
document.write("<h2><"+name+"단></h2>");
document.write("<table style = 'border: 1px solid #ccc; border-collapse: collapse;'><tbody><tr>");
for (var i=1;i<=9;i++){
document.write("<td style = 'border: 1px solid #ccc; border-collapse: collapse; padding:10px;'>" + name + "*" + i + "=" + name * i + "</td>");
}
document.write("</tr></tbody></table>");
}
</script>
<!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;
}
</style>
</head>
<body>
</body>
</html>
<script>
var name = prompt("구구단 몇 단?");
document.write("<table><tbody><tr>");
for(var i=1;i<10;i++){
document.write("<td>"+name+"*"+i+"="+name*i+"</td>");
}
document.write("</tr></tbody></table>");
</script>728x90
반응형
'HRD_훈련 > 실습' 카테고리의 다른 글
| [CSS] grid 실습 (30일차) (0) | 2023.06.27 |
|---|---|
| [CSS] 미디어 쿼리 실습 (30일차) (0) | 2023.06.27 |
| [CSS] 선택자 실습 (29일차) (0) | 2023.06.26 |
| [CSS] 컬러 실습 (29일차) (0) | 2023.06.26 |
| [CSS] Background 문제 (28일차) (0) | 2023.06.24 |