코린이 잰이

JavaScript 를 이용한 달력 만들기

잰찌 2018. 10. 19. 21:59

2018. 10. 19. 21:59

달력 출력결과 입니다.

양옆에 9월과 11월을 누르면 전달과 다음달로 넘어가게 만들었고

오늘날짜 배경색, 토요일과 일요일 글자 색을 넣었습니다.

사용 메소드

getMonth() - 달 불러오기

getData() -오늘 날짜 불러오기

getFullYear() -년도 불러오기

전체 코드입니다.

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
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>testCalendar</title>
<style>
    table
    {
        border:1px solid #BDBDBD;
        text-align:center;
        width:30%;
    }
</style>
 
<script language="javascript">
    var today = new Date(); // 오늘 날짜
    var date = new Date();
 
    function beforem() //이전 달을 today에 값을 저장
    { 
        today = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
        build(); //만들기
    }
    
    function nextm()  //다음 달을 today에 저장
    {
        today = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
        build();
    }
    
    function build()
    {
        var nMonth = new Date(today.getFullYear(), today.getMonth(), 1); //현재달의 첫째 날
        var lastDate = new Date(today.getFullYear(), today.getMonth() + 1, 0); //현재 달의 마지막 날
        var tbcal = document.getElementById("calendar"); // 테이블 달력을 만들 테이블
        var yearmonth = document.getElementById("yearmonth"); //  년도와 월 출력할곳
        yearmonth.innerHTML = today.getFullYear() + "년 "+ (today.getMonth() + 1) + "월"; //년도와 월 출력
        
        if(today.getMonth()+1==12) //  눌렀을 때 월이 넘어가는 곳
        {
            before.innerHTML=(today.getMonth())+"월";
            next.innerHTML="1월";
        }
        else if(today.getMonth()+1==1) //  1월 일 때
        {
        before.innerHTML="12월";
        next.innerHTML=(today.getMonth()+2)+"월";
        }
        else //   12월 일 때
        {
            before.innerHTML=(today.getMonth())+"월";
            next.innerHTML=(today.getMonth()+2)+"월";
        }
        
       
        // 남은 테이블 줄 삭제
        while (tbcal.rows.length > 2) 
        {
            tbcal.deleteRow(tbcal.rows.length - 1);
        }
        var row = null;
        row = tbcal.insertRow();
        var cnt = 0;
 
        // 1일 시작칸 찾기
        for (i = 0; i < nMonth.getDay(); i++) 
        {
            cell = row.insertCell();
            cnt = cnt + 1;
        }
 
        // 달력 출력
        for (i = 1; i <= lastDate.getDate(); i++) // 1일부터 마지막 일까지
        { 
            cell = row.insertCell();
            cell.innerHTML = i;
            cnt = cnt + 1;
            if (cnt % 7 == 1) {//일요일 계산
                cell.innerHTML = "<font color=#FF9090>" + i//일요일에 색
            }
            if (cnt % 7 == 0) { // 1주일이 7일 이므로 토요일 계산
                cell.innerHTML = "<font color=#7ED5E4>" + i//토요일에 색
                row = calendar.insertRow();// 줄 추가
            }
            if(today.getFullYear()==date.getFullYear()&&today.getMonth()==date.getMonth()&&i==date.getDate()) 
            {
                cell.bgColor = "#BCF1B1"; //오늘날짜배경색
            }
        }
 
    }
    
</script>
 
</head>
 
<body onload="build();">
    <table align="center" id="calendar">
        <tr>
            <td><font size=1%; color="#B3B6B3"><label onclick="beforem()" id="before" ></label></font></td>
            <td colspan="5" align="center" id="yearmonth"></td>
            <td><font size=1%; color="#B3B6B3"><label onclick="nextm()" id="next"></label></font></td>
        </tr>
        <tr>
            <td align="center"> <font color="#FF9090">일</font></td>
            <td align="center"> 월 </td>
            <td align="center"> 화 </td>
            <td align="center"> 수 </td>
            <td align="center"> 목 </td>
            <td align="center"> 금 </td>
            <td align="center"><font color=#7ED5E4>토</font></td>
        </tr>
    </table>
    
</body>
 
</html>
Colored by Color Scripter
cs

'JavaScript' 카테고리의 다른 글

[JavaScript]시간이 흘러가는 시계 만들기 (0)	2018.10.23
[Java Script]글자 나타내기 (0)	2018.10.23
[JavaScript]랜덤 이미지 변경 (0)	2018.10.23
JavaScript를 이용한 배경색 바꾸기 (1)	2018.10.19
Java Script 이용 계산기 만들기 (0)	2018.10.18

JavaScript를 이용한 배경색 바꾸기

잰찌 2018. 10. 19. 11:10

2018. 10. 19. 11:10

JavaScript를 이용한 라디오 버튼 클릭 시 배경색 변경

document.body.style.background - html 배경색 변경

코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
    function change(color)
    {
        document.body.style.background=color;
    }
    
    
</script>
</head>
<body>
    <input type="radio" name="color" onclick="change('red')">빨간색 <br>
    <input type="radio" name="color" onclick="change('yellow')">노란색 <br>
    <input type="radio" name="color" onclick="change('blue')">파란색 <br>
    <input type="radio" name="color" onclick="change('green')">초록색 <br>
</body>
</html>
Colored by Color Scripter
cs

클릭시 change(color) 함수를 부르는데 각 버튼 마다 변경하고싶은 색을 주었다.

코드2

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
<html>
 
<head>
  <meta charset="utf-8">
  <meta charset="EUC-KR">
  <title></title>
  <script language="javascript">
    function change(color)
    {
         document.bgColor = color;
    }
 
</script>
</head>
 
<body>
  
  <input type="radio" name="bgColor" value="yellow" onclick="change(this.value)">노랑색<br>
  <input type="radio" name="bgColor" value="green" onclick="change(this.value)">초록색<br>
  <input type="radio" name="bgColor" value="red" onclick="change(this.value)">빨간색<br>
  <input type="radio" name="bgColor" value="blue" onclick="change(this.value)">파란색<br>
 
</body>
 
</html>
Colored by Color Scripter
cs

위의 코드와 좀 다른코드 위의 코드는 함수 호출할 때 색을 넣었다면

value안에 색상을 넣고 함수 호출 시 this.value를 사용하여 자기자신의 value값을 넣어주었다.

결과

'JavaScript' 카테고리의 다른 글

[JavaScript]시간이 흘러가는 시계 만들기 (0)	2018.10.23
[Java Script]글자 나타내기 (0)	2018.10.23
[JavaScript]랜덤 이미지 변경 (0)	2018.10.23
JavaScript 를 이용한 달력 만들기 (2)	2018.10.19
Java Script 이용 계산기 만들기 (0)	2018.10.18