❓ 초를 시간으로 환산하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>초를 시간으로 환산하기</title>
<style type="text/css">
.inum {
width : 150px;
text-align: right;
}
.rnum {
width : 70px;
text-align: right;
}
</style>
<script>
function ok(){
/*
let s = document.getElementById("sec").value;
let s = document.querySelector("#sec").value;
let s = sec.value;
hour.value = (s-s%3600)/3600; //시간 정보
document.getElementById("hour").value = Math.floor(s/3600);
temp = s%3600;
min.value = (temp - temp%60)/60
min.value = Math.floor(temp/60)
temp = s%60;
second.value = temp;
second.value = s%60;
*/
let s = sec.value;
hour.value = (s-s%3600)/3600; //시간 정보
temp = s%3600;
min.value = Math.floor(temp/60)
second.value = s%60;
}
</script>
</head>
<body>
초 : <input type="text" id="sec" class="inum">
<input type="button" value="시분초로 환산" onclick="ok()"><br>
<input type="text" id="hour" class="rnum">시간
<input type="text" id="min" class="rnum">분
<input type="text" id="second" class="rnum">초
</body>
</html>
❓ 약수 구하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>약수 구하기</title>
<style type="text/css">
table { width:100%; border-collapse: collapse;}
th,td {border : 3px solid #bcbcbc;
text-align: center; padding: 8px;}
th {background-color: #e2e2e2; color:#111111;}
td {background-color: #f2f2f2;}
caption {color:#111111; font-size: 20px;
background-color: #ffffff;}
.rnum {
width : 70px;
text-align: right;
}
</style>
<script type="text/javascript">
function divednum(num) {
html = "<table width='100%'><caption>"
+num+"의 약수</caption><tr>";
for(let i=1;i<=num;i++) {
if(num%i ==0) {
html += "<td>"+i + "</td>";
}
}
html += "</tr></table>";
result.innerHTML = html;
}
</script>
</head>
<body>
<input type="text" id="num" class="rnum">
<input type="button" value="약수구하기"
onclick="divednum(num.value)">
<div style="width:300px;" id="result"></div>
</body>
</html>
❓ 달력 출력하기
<!DOCTYPE html>
<!-- src/main/webapp/20220923/exam1.html -->
<html>
<head>
<meta charset="UTF-8">
<title>달력 출력하기</title>
<style type="text/css">
table { width:100%; border-collapse: collapse;}
th,td {border : 3px solid #bcbcbc;
text-align: center; padding: 8px;}
th {background-color: #e2e2e2; color:#111111;}
td {background-color: #f2f2f2;}
caption {color:#111111; font-size: 20px;
background-color: #ffffff;}
/* class 속성의 값이 text-red 인 태그*/
.text-red { color : red;}
.text-blue { color : blue;}
</style>
<script type="text/javascript">
function show_cal() {
let year = document.f.year.value;
html = "<table><caption>" + year + "년</caption>";
for(let mon=1;mon<=12;mon++) {
if((mon-1)%4 == 0) html += "<tr>"; //달력을 구현할 행
cal1 = new Date(year,mon-1,1); //월의 1일
cal2 = new Date(year,mon,1); //월의 마지막일
cal2.setTime(cal2.getTime()-(1000*60*60*24));
let monstr = "<td valign='top' style='padding:10px;'>"
+ "<table class='mon'><caption>"+ mon+"월</caption>";
monstr += "<tr class='mon'><th class='mon'>일</th>"
+ "<th class='mon'>월</th><th class='mon'>화</th>"
+ "<th class='mon'>수</th><th class='mon'>목</th>"
+ "<th class='mon'>금</th><th class='mon'>토</th></tr>";
week = cal1.getDay(); //1일의 요일 숫자
day = 0;
for(let i=0;i<6;i++) {
monstr += "<tr>"
for(let j=0;j<7;j++) {
if(j==0) monstr +="<td class='text-red'>"; //일요일부분
else if (j==6) monstr +="<td class='text-blue'>"; //토요일부분
else monstr +="<td class='mon'>"; //평일부분
if(i==0) { //첫번쨰 주
if(week <= j) monstr += ++day;
else monstr += " "
} else {
if (cal2.getDate() > day) monstr += ++day;
else monstr += " ";
}
monstr +="</td>";
}
monstr += "</tr>"
if(day >= cal2.getDate()) break;
}
monstr += "</table></td>";
html += monstr;
if((mon-1)%4 == 3) html += "</tr>";
}
html +="</table>"
console.log(html)
calandar.innerHTML = html;
}
</script>
<body>
<form name="f">
<select name="year" >
<option value="2020">2020년</option>
<option value="2021">2021년</option>
<option value="2022">2022년</option>
<option value="2023">2023년</option>
<option value="2024">2024년</option>
</select>
<input type="button" value="달력보기" onclick="show_cal()">
<div id="calandar"></div>
</form>
</body>
</html>
'수업 문제(국비 지원) > JS' 카테고리의 다른 글
| [JS] 2022.09.23 (구구단 출력하기, 문제 맞추기) (0) | 2023.04.29 |
|---|---|
| [JS] 2022.09.21 (1 부터 100까지의 합,짝수합, 홀수합을 계산, num1의 값을 num2 태그에 복사하기, 바구니 수 구하기) (0) | 2023.04.29 |