git hub : https://github.com/OhIkmyeong/julian
GitHub - OhIkmyeong/julian: 줄리안데이 계산기
줄리안데이 계산기. Contribute to OhIkmyeong/julian development by creating an account on GitHub.
github.com
접속 주소 : https://ohikmyeong.github.io/julian/
줄리안 데이 계산기
ohikmyeong.github.io
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>줄리안 데이 계산기</title>
<link href="./julian.css" rel="stylesheet" type="text/css"/>
<script src="./julian.js" defer></script>
</head>
<body>
<!-- https://landweb.modaps.eosdis.nasa.gov/browse/calendar.html -->
<h1>줄리안 데이 계산기</h1>
<section id="sect-ipt">
<label><input type="radio" name="sel_year" value="leap"> <span>윤년(LEAP)</span></label>
<label><input type="radio" name="sel_year" value="regular" checked> <span>평년(REGULAR)</span></label>
<article id="ipt">
<input type="number" value="1"/> <!-- 1월 1일-->
<input type="number" value="31"/> <!-- 1월 31일-->
<input type="number" value="32"/> <!-- 2월 1일-->
<input type="number" value="59"/> <!-- 2월 28일-->
<input type="number" value="60"/> <!-- 3월 1일 --> <!-- 윤년 : 2월 29일 -->
<input type="number" value="335"/> <!-- 12월 1일 -->
<input type="number" value="365"/> <!-- 12월 31일 -->
<input type="number" value="188"/> <!-- 7월 7일 -->
</article><!-- ipt -->
<button id="btn-add">추가</button>
</section><!-- sect-ipt -->
<button id="btn-confirm">계산하기</button>
<article id="area-result">
</article><!-- area-result -->
</body>
</html>
|
cs |
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
@charset "utf-8";
:root{
--wid :min(90%, 1200px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
display:flex;flex-wrap:wrap;flex-direction:column;
justify-content:center;
align-items:center;
width:100%;min-height:100vh;
background:#e9e9e9;
font-family:sans-serif; font-size:20px;
}
input,button{font-family:inherit;font-size:inherit;cursor:pointer;}
h1{
margin-bottom:1em;
font-size:1.5rem;
}
#sect-ipt{
position:relative;
width:var(--wid);
background:#fff;
padding:2rem; margin-bottom:2rem;
}
[type="radio"] + span{
margin-right:1em;
font-size:.8rem;
cursor:pointer;
}
#ipt{
display:flex;flex-wrap:wrap;
position:relative;
width:100%;
margin-bottom:1rem;
}
#sect-ipt [type="number"]{
display:block;
width:max(18%, 4em);
padding:.5em 0 .5em .7em;
margin:.5em;
background:#f3f3f3;
border:none; border-bottom:2px solid #d2d2d2;
border-radius:4px 4px 0 0;
}
#btn-add{
display:block;position:relative;
padding:.5em 2em;
margin:0 0 0 auto;
border:1px solid #aaa;
font-size:14px; color:#666;
}
#btn-confirm{
display:block;position:relative;
padding:1em 3em;
border:none; border-radius:10rem;
background:brown;
font-weight:bold;color:#fff;
}
/* */
#area-result{
display:flex;flex-wrap:wrap;
position:relative;
width:var(--wid);
margin-top:3rem; padding:2rem; padding-top:calc(2rem - 10px);
background:rgb(51, 39, 39);}
#area-result input{
display:block;
width:20%;
padding:10px 0;
background:transparent;
border:none;border-bottom:2px solid rgba(255,255,255,.1);
text-align:center;color:rgba(255,255,255,.5);
}
#area-result input:focus{
outline:none;
border-bottom-color:brown;
font-weight:bold; color:#fff;
}
|
cs |
JS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
const ipt = document.getElementById('ipt');
const btn_add = document.getElementById('btn-add');
const btn_confirm = document.getElementById('btn-confirm');
const area_result = document.getElementById('area-result');
const sel_year = document.querySelectorAll('[name = "sel_year"]');
let DAYS = {
month : 0,
day : 0,
prev : 0
}
const monthDAYS = [31,28,31,30,31,30,31,31,30,31,30,31];
let monthARR = [...monthDAYS];
let char_month = {
jan:0, feb:0, mar:0, apr:0, may:0,
jun:0, jul:0, aug:0, sep:0, oct:0,
nov:0, dec:0
}
function make_ipt(){
const new_input = document.createElement('INPUT');
new_input.type = "number";
ipt.appendChild(new_input);
}//make_ipt
function cacul_ipt(){
area_result.innerHTML = '';
check_year();
const vals = ipt.getElementsByTagName('INPUT');
for(let val of vals){
to_normal_day(val.value);
}
}//cacul_ipt
function check_year(){
const year = sel_year[1].checked ? 'regular' : 'leap';
if(year == "leap"){
monthARR[1] = 29;
}else{
monthARR = [...monthDAYS];
}
let NUM = 0;
for(let key in char_month){
char_month[key] = val_month_julian(NUM + 1);
NUM++;
}
}//check_year
function val_month_julian(month){
DAYS.prev = 0;
for(let i = 0; i<month; i++){
DAYS.prev += monthARR[i];
}
return DAYS.prev;
}
function to_normal_day(val){
if(!val){return;}
if(val <= char_month.jan){
DAYS.month = 1;
}else if(val <= char_month.feb){
DAYS.month = 2;
}else if(val <= char_month.mar){
DAYS.month = 3;
}else if(val <= char_month.apr){
DAYS.month = 4;
}else if(val <= char_month.may){
DAYS.month = 5;
}else if(val <= char_month.jun){
DAYS.month = 6;
}else if(val <= char_month.jul){
DAYS.month = 7;
}else if(val <= char_month.aug){
DAYS.month = 8;
}else if(val <= char_month.sep){
DAYS.month = 9;
}else if(val <= char_month.oct){
DAYS.month = 10;
}else if(val <= char_month.nov){
DAYS.month = 11;
}else if(val <= char_month.dec){
DAYS.month = 12;
}
DAYS.day = val - val_month_julian(DAYS.month - 1);
make_result(DAYS.month, DAYS.day)
}
function make_result(month,day){
const new_input = document.createElement('INPUT');
new_input.type = 'text';
new_input.value = `${month}월 ${day}일`;
new_input.readOnly = true;
area_result.appendChild(new_input);
}
/* 실행 */
btn_add.addEventListener('click',make_ipt);
btn_confirm.addEventListener('click', cacul_ipt);
|
cs |
'CSS&JS > ✨개인 프로젝트' 카테고리의 다른 글
| 💞 커플 체크리스트 (0) | 2021.09.08 |
|---|---|
| CSS 만으로 삼각형 만들기 (0) | 2021.09.02 |
| 그래프 생성기 - windrose, bar, pie (0) | 2021.07.30 |
| 슈슉 생성기 (0) | 2021.06.28 |
| 오버워치 패치노트 통계 페이지 만들어보기(2) : 소스 미리보기 (0) | 2021.06.08 |