HRD_훈련/실습
[CSS] 프롬포트 실습 (29일차)
리드미.
2023. 6. 26. 23:39
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
반응형