자바스크립트를 이용하여 흘러가는 시계를 만들어 보았습니다.



new Data() - 현재 날짜와 시간세팅 

setTimeout() - 시간지연함수


Data를 받아서 오전오후 시 분 초를 각각 나타내었습니다.






코드


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
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
    function showClock()
    {
        var currentDate=new Date();
        var divClock=document.getElementById("divClock");
        var apm=currentDate.getHours();
        if(apm<12)
        {
            apm="오전";
        }
        else
        {
            apm="오후";
        }
        
        var msg = "현재시간 : "+apm +(currentDate.getHours()-12)+"시";
        msg += currentDate.getMinutes() + "분";
        msg += currentDate.getSeconds() + "초";
        
        divClock.innerText=msg;
        
        setTimeout(showClock,1000);
    }
</script>
</head>
<body onload="showClock()">
    <div id="divClock" class="clock"></div>
    
</body>
</html>
cs







코드설명

9  -현재 시간 받아오기

10-시계 공간 div

11~19 - 오전 오후 나타내기 

21~23 - 시간 나타내기

27 - 1초에 한번씩 나타내기

저작자표시

'JavaScript' 카테고리의 다른 글

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

위의 사진처럼 자바 스크립트를 이용하여 글자나 나타나게 만들었습니다.


사용함수


setTimeout() -시간지연함수


일정 시간 후 특정코드나 함수를 의도적으로 지연시키고 싶을 때 사용하는 함수입니다.

이 함수를 사용할 때에는 두개의 인자를 사용하는데

(지연시간뒤에 실행할 코드, 지연시간) 설정합니다.



코드


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
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
    var noticeMsg="코린이 잰이 입니다!";
    var index=0;
    
    function showNotice()
    {
        index++;
        var divNotice=document.getElementById("divNotice");
        if(index > noticeMsg.length)
        {
            divNotice.innerText="";
            index=0;
        }
        else
        {
            divNotice.innerText=noticeMsg.substr(0,index);
        }
        setTimeout(showNotice,500);
    }
</script>
</head>
<body onload="showNotice()">
    <div id="divNotice" class="notice"></div>
 
</body>
</html>
cs


저작자표시

'JavaScript' 카테고리의 다른 글

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


위의 GIF 처럼 

들어갈 때 혹은 새로고침 할 때 이미지변경하는 코드입니다.


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
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
    <script type="text/javascript">
        var imgArray= new Array();
        imgArray[0]="01.png";  //사진
        imgArray[1]="02.jpeg"; //사진
        imgArray[2]="03.png";    //사진
        imgArray[3]="04.png";    //사진
 
        
        function showImage()
        {
            var imgNum=Math.round(Math.random()*3);
            var objImg=document.getElementById("introImg");
            objImg.src=imgArray[imgNum];
        }
    </script>
</head>
<body onload="showImage()">
    <img id="introImg" border="0">
</body>
</html>
cs

배열을 만들어서 사진을 배열안에 넣어줬습니다. (7~11)


함수를 만들어서 들어갈 때 마다 랜덤으로 

배열을 선택하여 이미지를 변경시킵니다(14~19)


저작자표시

'JavaScript' 카테고리의 다른 글

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

달력 출력결과 입니다.


양옆에 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>
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를 이용한 라디오 버튼 클릭 시 배경색 변경



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>
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>
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


JavaScript로 처음 만들어본 계산기 UI 입니다.

HTML을 사용하였고 table을 이용했습니다.


분홍 박스는 연산자 부분이고 기본지원 eval 함수를 사용하였습니다.

파란 박스는 함수 부분이고 기본 지원 Math 함수를 사용하였습니다.

노란 박스는 abs함수가 있다고는 하나 직접 만들어보았습니다.



계산기의 함수부분입니다.



function btn(num)

계산기 텍스트 창에 숫자 넣기 및 total 값 넣기


function btnclear()

total 값 초기화 및 텍스트 창 내용 지우기


function btncal()

계산된 값 텍스트 창에 띄우기


function btnop()

연산자 클릭시 텍스트 창 내용 지우기 및 total 연산자 추가


function btnpow()

제곱 값을 total 값 넣기 및 텍스트 창 출력


function btncos()

cos 값을 total 값 넣기 및 텍스트 창 출력


function btntan()

tan 값을 total 값 넣기 및 텍스트 창 출력


function btnabs()

 절대값 변환 및 total 값넣기 및 텍스트 창 출력



전체 코드


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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
 
    <table align="center" bgcolor="#7f84b9">
        <tr align="center">
            <td><input type="text" id="text"
                style="width: 98%; height: 20px"><br></td>
        </tr>
 
        <tr align="center">
            <td><input type="button"
                style="width: 49%; height: 30px; background-color: #b8a0c8;"
                value="clear" onclick="btnclear()"> <input type="button"
                onclick="btncal()"
                style="width: 49%; height: 30px; background-color: #b8a0c8;"
                value="="></td>
        </tr>
 
        <tr align="center">
            <td><input type="button" onclick="btn(1)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="1"> <input type="button" onclick="btn(2)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="2"> <input type="button" onclick="btn(3)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="3"> <input type="button" onclick="btnop('+')"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="+"> <input type="button" onclick="btnpow()"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="x^y"></td>
        </tr>
 
        <tr align="center">
            <td><input type="button" onclick="btn(4)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="4"> <input type="button" onclick="btn(5)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="5"> <input type="button" onclick="btn(6)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="6"> <input type="button" onclick="btnop('-')"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="-"> <input type="button" onclick="btnsin()"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="sin"></td>
        </tr>
 
        <tr align="center">
            <td><input type="button" onclick="btn(7)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="7"> <input type="button" onclick="btn(8)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="8"> <input type="button" onclick="btn(9)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="9"> <input type="button" onclick="btnop('*')"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="*"> <input type="button" onclick="btncos()"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="cos"></td>
        </tr>
 
        <tr align="center">
            <td><input type="button" onclick="btn(0)"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="0"> <input type="button" onclick="btnabs()"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="+/-"> <input type="button" onclick="btn('.')"
                style="width: 70px; height: 40px; background-color: #f2bdd0;"
                value="."> <input type="button" onclick="btnop('/')"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="/"> <input type="button" onclick="btntan()"
                style="width: 70px; height: 40px; background-color: #b8a0c8;"
                value="tan"></td>
        </tr>
 
 
    </table>
 
 
    <script type="text/javascript">
 
    var total='';
    function btn(num)
    {
        total+=num;
        document.getElementById("text").value+=num;
    }
    
    function btnclear(){
        document.getElementById("text").value="";
        total='';
    }
    
    function btncal()
    {
        document.getElementById("text").value=eval(total);
    }
    
    function btnop(num)
    {
        total+=num;
        document.getElementById("text").value="";
    }
    
    function btnpow()
    {
        total=Math.pow(total,2);
        document.getElementById("text").value=total;
        
    }
    
    function btnsin()
    {
        total=Math.sin(total*(Math.PI/180));  
        document.getElementById("text").value=total;
    }
    function btncos()
    {
        total=Math.cos(total*(Math.PI/180)); 
        document.getElementById("text").value=total;
    }
    function btntan()
    {
        total=Math.tan(total*(Math.PI/180)); 
        document.getElementById("text").value=total;
    }
    function btnabs()
    {
        total=total*-1;
        document.getElementById("text").value=total;
    }
    
    
 
    
    
    
</script>
 
 
</body>
</html>
cs


'JavaScript' 카테고리의 다른 글

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

+ Recent posts

티스토리툴바