-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathJJJJ.html
196 lines (183 loc) · 7.68 KB
/
JJJJ.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
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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html>
<head>
<title>TreeWorld - 나무세상</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Do+Hyeon|Jua|Poor+Story|Yeon+Sung|Nanum+Gothic" rel="stylesheet">
<meta charset="utf-8"><!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-136329220-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-136329220-1');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="nightDaybutton.js"></script>
<script src="calc.js"></script>
<script>
function selectChangeEvent(track){
var a_player = document.getElementById('Audio_Player')
a_player.src=track;
}
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//시계 관련 이미지 로딩
var dialImg = new Image();
var hourImg = new Image();
var minImg = new Image();
var secImg = new Image();
var pointImg = new Image();
dialImg.src = "analog.png";
hourImg.src = "hr.png";
minImg.src = "min.png";
secImg.src = "sec2.png";
pointImg.src = "point.png";
//시계를 그릴 중심 좌표
var clockX = 250, clockY = 250;
//시계의 반지름
var clockR = 150;
//핀의 width, height
var pinW = 4, pinH = 110;
var rSec, rMin, rHour;
//초침, 분침, 시침의 rotation radian( rad )
setInterval(getTime, 50);
setInterval(drawScreen, 50);
//화면 렌더링
function drawScreen() {
//context 객체를 이용해서 렌더링 작업
getTime();
//시계 다이얼 이미지
context.drawImage(dialImg, clockX - clockR, clockY - clockR, 300, 300);
//context 의 현재 상태 저장
context.save();
context.translate(clockX, clockY);
//평행이동
context.rotate(rSec);
//초침 그리기 위해 rotation
//초침 그리기
context.drawImage(secImg, -pinW / 2, -pinH, pinW, pinH);
context.rotate(rMin - rSec);
//분침 그리기 위해 rotation
//분침 그리기
context.drawImage(minImg, -pinW / 2, -pinH, pinW, pinH);
context.rotate(rHour - rMin);
//시침 그리기 위해 rotation
//시침 그리기
context.drawImage(hourImg, -pinW / 2, -pinH, pinW, pinH);
//context를 저장된 상태로 되돌리기
context.restore();
}
//현재 시간 얻어오는 함수
function getTime() {
var d = new Date();
var hour = d.getHours();
var min = d.getMinutes();
var sec = d.getSeconds();
//초침의 회전각도
rSec = sec * 6 * (Math.PI / 180);
//분침의 회전각도
rMin = min * 6 * (Math.PI / 180) + 6 * ((sec * 6) / 360) * (Math.PI / 180);
//시침의 회전각도
rHour = hour * 30 * (Math.PI / 180) + 30 * ((min * 6) / 360) * (Math.PI / 180);
//div 에 출력
$("#display").text("현재 시각은 "+hour + "시 " + min + "분 " + sec+"초 입니다. 좋은 하루 보내시길 바래요!");
}
});
</script>
</head>
<body>
<div id=treeworld>
<h1><a href="index.html" class="tree">TreeWorld -
<a href="index.html" class="world">나무세상</a></h1>
</div>
<div id=top>
<ul class="language">
<li><a href="#" class="actlan">한국어</a></li>
<li> | </li>
<li><a href="#" class="noactlan" onclick="alert('지원되지 않는 언어입니다 :(\nNot supported!')" on>中文</a></li>
<li> | </li>
<li><a href="#" class="noactlan" onclick="alert('지원되지 않는 언어입니다 :(\nNot supported!')" on>日本語</a></li>
<li> | </li>
<li><a href="#" class="noactlan" onclick="alert('지원되지 않는 언어입니다 :(\nNot supported!')" on>English</a></li>
</ul>
</div>
<nav id=topMenu>
<center>
<ul>
<li class="topMenuLi">
<a class="menuLink" href="#">사과나무</a>
<ul class="submenu">
<li><a href="1.html" class="submenuLink">AAAA</a></li>
<li><a href="2.html" class="submenuLink">야구_단어사전</a></li>
<li><a class="submenuLink">CCCC</a></li>
</ul>
</li>
<li><a class="stick">|</a></li>
<li class="topMenuLi">
<a class="menuLink" href="#">포도나무</a>
<ul class="submenu">
<li><a href="DDDD.html" class="submenuLink">야구스텟_계산기(1)</a></li>
<li><a href="EEEE.html" class="submenuLink">야구스텟_계산기(2)</a></li>
<li><a href="FFFF.html" class="submenuLink">비례식_계산기</a></li>
</ul>
</li>
<li><a class="stick">|</a></li>
<li class="topMenuLi">
<a class="menuLink" href="#">단풍나무</a>
<ul class="submenu">
<li><a href="GGGG.html" class="submenuLink">Omori</a></li>
<li><a class="submenuLink">HHHH</a></li>
<li><a class="submenuLink">IIII</a></li>
</ul>
</li>
<li><a class="stick">|</a></li>
<li class="topMenuLi">
<a class="menuLink" href="#">은행나무</a>
<ul class="submenu">
<li><a href="JJJJ.html" class="submenuLink">시계</a></li>
<li><a class="submenuLink">KKKK</a></li>
<li><a class="submenuLink">LLLL</a></li>
</ul>
</li>
<li><a class="stick">|</a></li>
<li class="topMenuLi">
<a class="menuLink" href="#">치킨나무</a>
<ul class="submenu">
<li><a class="submenuLink">닭다리</a></li>
<li><a class="submenuLink">닭날개</a></li>
<li><a class="submenuLink">닭모가지</a></li>
</ul>
</li>
</ul>
</center>
</nav>
<div id="SK1">
<div id="SK1">
<center>
<br><br>
<h1>은행나무를 깨물자</h1>
<p>
<canvas id="myCanvas" width="500" height="500"></canvas>
<div id="display"></div>
<div class=mean>
<br><br>
시계 이미지 및 코드 출처 : <a href="https://homoecono.blog.me/130170508738">#네이버블로그</a>
<audio id='Audio_Player' autoplay controls>
<source src='Track 01.mp3'></source>
</audio>
<select id="track" onchange=selectChangeEvent(this.value)>
<option value='Track 01.mp3' selected="selected">Track 01</option>
<option value='Track 02.mp3'>Track 02</option>
<option value='Track 03.mp3'>Track 03</option>
</select>
<br><br><br><br>Copyright 2019. <strong>omori</strong> all right reserved.
</center>
</div>
</div>
</body>
</html>