안녕하세요
오늘은 국가별 시간을 웹에서 볼 수 있는 기능을 포스팅해보겠습니다.
*결과
1. $(document).ready(function () {});
먼저 살펴봐야 할 개념은
$(document).ready(function () {});입니다.
이 코드는 document가 준비 완료 되면 파라미터에서 정의된 function을 실행하라는 의미입니다.
jQuery에서 자주 만나게 되는 코드입니다.
다음으로 li 태그와 removeClass, addClass 메서드를 살펴보겠습니다.
2. li 태그
li태그의 정의를 보면
The <li> tag defines a list item.
즉, 목록들을 정의하는 태그라는 것을 알 수 있습니다.
국가명들이 목록으로 나열될 수 있도록 도와주는 태그인 것이죠.
3. removeClass, addClass
// This Selects the button clicked and change its class to '.active'
$("li").click(function() {
// Removes the active class form the other list items
$("li").removeClass("active");
// Ads the active class to the clicked list item
$(this).addClass("active");
});
위 코드는 클래스의 삭제, 추가입니다.
해당 아이템을 클릭하면 removeClass를 작동되어 기존의 active 클래스를 삭제하고
addClass가 작동되면 클릭한 아이템에 active 클래스를 추가하게 됩니다.
.active {
border-bottom: solid white 1px;
}(active 클래스는 항목에 밑줄을 생성하는 클래스로 정의했었습니다.)
4. setInterval
setInterval(displayTime, 500);마지막으로 setInterval 함수는 일정 간격으로 반복해서 실행되는 메소드입니다.
시간의 흐름을 표현하기 위해
이 메소드에 displayTime을 파라미터로 넣어서
0.5초에 한번씩 실행되도록 한 것입니다.
*전체코드
<!doctype html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>http://www.blueb.co.kr</title>
<style type="text/css">
body {
background: linear-gradient(to left, #80DEEA, #00ACC1);
;
}
#clock {
height: 100px;
width: 800px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-family: courier, monospace;
text-align: center;
color: white;
font-size: 100px;
}
ul {
height: 50px;
width: 800px;
margin: auto;
position: absolute;
left: 0;
bottom: 50px;
right: 0;
text-align: center;
}
li {
display: inline;
margin-right: 15px;
color: white;
border: none;
background: none;
font-family: helvetica;
text-transform: uppercase;
font-size: 14px;
padding-bottom: 3px;
cursor: auto;
}
li:not(.active):hover {
color: #EDEDED;
cursor: pointer;
}
.active {
border-bottom: solid white 1px;
}
</style>
</head>
<body>
<div id="clock"></div>
<ul>
<li>Venezuela</li>
<li>Miami</li>
<li>Los Angeles</li>
<li class="active">Seoul</li>
<li>Beijing</li>
<li>Cairo</li>
<li>Paris</li>
<li>Sao Paulo</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function displayTime() {
var currentTime = new Date();
// Time difference between UTC and GTC
var timeDifference = currentTime.getTimezoneOffset()/60;
// Set hours to GTC ( UTC - time difference)
var hours = currentTime.getHours() + timeDifference;
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
// This adds and substracts time from the GTC deppending on the active option
if ($(".active").text() === "Venezuela") {
hours = hours - 4;
if (minutes > 30) {
minutes = minutes - 30;
}
else {
hours = hours - 1;
minutes = minutes + 30;
}
$("body").css("background", "linear-gradient(to left, #FFE082, #FFCA28)");
}
if ($(".active").text() === "Miami") {
hours = hours - 5;
$("body").css("background", "linear-gradient(to left, #4CB8C4, #3CD3AD)");
}
if ($(".active").text() === "Los Angeles") {
hours = hours - 8;
$("body").css("background", "linear-gradient(to left, #90CAF9, #42A5F5)");
}
if ($(".active").text() === "Seoul") {
hours = hours + 9;
$("body").css("background", "linear-gradient(to left, #9FA8DA, #3949AB)");
}
if ($(".active").text() === "Beijing") {
hours = hours + 8;
$("body").css("background", "linear-gradient(to left, #FFAB91, #FF7043)");
}
if ($(".active").text() === "Cairo") {
hours = hours + 2;
$("body").css("background", "linear-gradient(to left, #FFE082, #FFB300)");
}
if ($(".active").text() === "Paris") {
hours = hours + 1;
$("body").css("background", "linear-gradient(to left, #CE93D8 , #AB47BC)");
}
if ($(".active").text() === "Sao Paulo") {
hours = hours - 2;
$("body").css("background", "linear-gradient(to left, #C5E1A5, #7CB342)");
}
if (hours > 24) {
hours = hours - 24;
}
if (hours < 0) {
hours = hours + 24;
}
// Let's set the AM and PM meridiem and
// 12-hour format
var meridiem = "AM"; // Default is AM
// Convert from 24 hour to 12 hour format
// and keep track of the meridiem.
if (hours >= 12) {
hours = hours - 12;
meridiem = "PM";
}
// 0 AM and 0 PM should read as 12
if (hours === 0) {
hours = 12;
}
// If the seconds digit is less than ten
if (seconds < 10) {
// Add the "0" digit to the front
// so 9 becomes "09"
seconds = "0" + seconds;
}
// If the minute digit is less than ten
if (minutes < 10) {
// Add the "0" digit to the front
// so 9 becomes "09"
minutes = "0" + minutes;
}
// If the hour digit is less than ten
if (hours < 10) {
// Add the "0" digit to the front
// so 9 becomes "09"
hours = "0" + hours;
}
// This gets a "handle" to the clock div in our HTML
var clockDiv = document.getElementById('clock');
// Then we set the text inside the clock div
// to the hours, minutes, and seconds of the current time
clockDiv.innerText = hours + ":" + minutes + ":" + seconds + " " + meridiem;
}
// This Selects the button clicked and change its class to '.active'
$("li").click(function() {
// Removes the active class form the other list items
$("li").removeClass("active");
// Ads the active class to the clicked list item
$(this).addClass("active");
});
// This runs the displayTime function the first time
displayTime();
// This makes our clock 'tick' by repeatedly
// running the displayTime function every second.
setInterval(displayTime, 500);
});
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [JavaScript] 현재 위치 받아오기 (0) | 2022.03.12 |
|---|---|
| [JavaScript] 이미지 드래그해서 옮기기 (0) | 2022.03.05 |
| [JavaScript]화면 스크롤시 이미지 회전시키기 (0) | 2022.01.03 |
| [JavaScript] 마우스를 따라다니는 원 만들기 (0) | 2021.12.23 |
| [JavaScript] fetch api를 사용해서 ajax 통신하기 (1) | 2021.12.22 |
