Leeyanggoo
[JS] 운영체제(OS) / 현재 시간 출력하기!! jQuery로 드래그 효과 만들기!! 본문
HTML
<div class="cursor">
<img src="img/game_mouse06.png" alt>
</div>
<header id="header">
<h1>HMM GAME WORLD</h1>
<div class="time"></div>
</header>
<main>
<div class="icon__box">
<div class="icon1 music__box">
<img src="img/audio_icon02.png" alt="뮤직">
<span>Play<br>Music</span>
</div>
<div class="icon2">
<img src="img/game_icon02.png" alt="뮤직">
<span>Play<br>Music</span>
</div>
<div class="icon3">
<img src="img/game_icon03.png" alt="뮤직">
<span>Play<br>Music</span>
</div>
<div class="icon4">
<img src="img/game_icon04.png" alt="뮤직">
<span>Play<br>Music</span>
</div>
<div class="icon5">
<img src="img/game_icon05.png" alt="뮤직">
<span>Play<br>Music</span>
</div>
<div class="icon6">
<img src="img/game_icon06.png" alt="뮤직">
<span>Play<br>Music</span>
</div>
</div>
</main>
<footer id="footer">
<!-- <div class="aciton"></div> -->
<div class="info"></div>
</footer>
".cursor"는 마우스 커서를 의미합니다.
"#header"는 상단에 고정되며, ".time"은 '현재 시간'을 입력받습니다.
".icon__box"는 화면에 출력할 아이콘 모음입니다.
"#footer"는 하단에 고정되며, ".info"에 현재 사용자에게 운영체제(OS) 정보 및 브라우저 크기를 입력받습니다.
CSS
https://github.com/leeyanggoo/web2023/tree/main/Javascript/game/css
new Date() 함수와 userAgent 속성을 알고 계신가요?
Javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
window.onload = function(){
// 마우스 이동
window.addEventListener("mousemove", e => {
gsap.to(".cursor", {
duration: 0,
left: e.pageX - 5,
top: e.pageY - 10
})
});
// 오른쪽 상단 시간 출력
function printTime() {
let currentTime = new Date();
let year = currentTime.getFullYear();
let month = currentTime.getMonth()+1;
let date = currentTime.getDate();
let hours = currentTime.getHours().toString().padStart(2, '0');
let minutes = currentTime.getMinutes().toString().padStart(2, '0');
let seconds = currentTime.getSeconds().toString().padStart(2, '0');
$(".time").html(`${year}년 ${month}월 ${date}일 ${hours}시 ${minutes}분 ${seconds}초`)
}
setInterval(printTime, 1000);
// 하단 중앙 모니터 정보 표시
printAgent = () => {
let os = navigator.userAgent.toLocaleLowerCase();
let screenWidth = window.screen.width
let screenHeight = window.screen.height;
if (os.indexOf("windows") !== -1) {
$(".info").html(`현재 윈도우(Windows)를 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screenHeight} 입니다.`);
} else if (os.indexOf("mac") !== -1) {
$(".info").html(`현재 맥(Mac)을 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screenHeight} 입니다.`);
} else if (os.indexOf("linux") !== -1) {
$(".info").html(`현재 리눅스(Linux)를 사용하고 있으며, 화면 크기는 ${screenWidth} X ${screenHeight} 입니다.`);
} else {
$(".info").html(`화면 크기는 ${screenWidth} X ${screenHeight} 입니다.`);
}
}
printAgent();
}
자바스크립트에서 window 객체는 브라우저 창을 나타내는 전역객체입니다.
window 객체에 이벤트 리스너를 등록하여 브라우저에서 발생하는 다양한 이벤트에 동작을 수행할 수 있습니다.
예제는 마우스의 커서 디자인을 GSAP 라이브러리를 이용하며 꾸미고 있습니다.
new Date
자바스크립트에서 new Date() 함수는 현재 날짜와 시간 정보를 생성하는 데 사용됩니다.
new Date() 객체에는 아래와 같은 다양한 메서드가 있습니다.
| getFullYear() | 연도를 반환합니다. |
| getMonth() | 월(0~11)을 반환합니다. (+1을 하여 표시) |
| getDate() | 일(1~31)을 반환합니다. |
| getDay() | 요일(0~6, 0은 일요일)을 반환합니다. |
| getHours() | 시간(0~23)을 반환합니다. |
| getMinutes() | 분(0~59)을 반환합니다. |
| getSeconds() | 초(0~59)를 반환합니다. |
| getMilliseconds() | 밀리초(0~999)를 반환합니다. |
예제에서는 연도, 월, 일, 시, 분, 초를 각각 header에 표시하고 있습니다.
또한 시, 분, 초 앞에 0을 붙이기 위해 toString() 메서드를 이용하여 반환값을 문자열로 변경하고, padStart() 메서드를 이용합니다.
padStart(길이, '추가할 문자열') 메서드는 문자열의 길이가 주어진 길이보다 짧을 경우 문자열 앞에 주어진 문자로 채워서 길이를 맞추는 메서드입니다.
navigator.userAgent
'navigator'는 자바스크립트에서 현재 브라우저의 정보를 포함하는 객체입니다.
이 객체는 window 객체의 속성 중 하나이며 속성 중 일부는 다음과 같습니다.
| navigator.userAgent | 현재 브라우저의 사용자 에이전트 문자열을 반환합니다. 이 문자열은 일반적으로 브라우저의 종류와 버전 정보를 포함합니다 |
| navigator.appName | 현재 브라우저의 이름을 반환합니다. 이 값은 브라우저의 실제 이름과 일치하지 않을 수 있습니다. |
| navigator.appVersion | 현재 브라우저의 버전 정보를 반환합니다. |
| navigator.platform | 현재 브라우저가 실행 중인 운영 체제를 반환합니다. |
| navigator.language | 현재 브라우저의 기본 언어를 반환합니다. |
예제는 navigator.userAgent를 이용하여 브라우저의 정보를 문자열로 반환받아 변수 os에 저장합니다.
toLocaleLowerCase() 메서드를 이용해 반환받은 문자열을 소문자로 변환합니다.
if문과 indexOf() 메서드를 이용해 해당 문자열에 어떤 운영체제가 들어있는지 확인합니다.
indexOf()는 해당 문자열이 있는 경우 1을 반환하고, 없는 경우 -1을 반환합니다.
따라서 해당 문자열이 없는 경우 다음 else if문으로 넘어가면서 사용자의 브라우저 정보를 HTML 코드에 입력합니다.
window.screen.width와 window.screen.height는 각각 모니터의 가로(width)와 세로(height) 값을 반환합니다.
jQuery UI 라이브러리로 드래그 효과 만들기
draggable은 jQuery UI 라이브러리의 플러그인으로, 선택한 요소를 드래그 가능하게 만듭니다.
draggable() 함수 내부에는 이벤트 핸들러가 포함되어 있어, 특정 이벤트(드래그의 시작start:, 진행drag:, 종료stop:)가 발생할 때의 동작을 수행할 수 있습니다.
$(".icon1").draggable({
containment: ".icon__box",
scroll: false,
drag: function(){
$(".cursor img").attr("src", "img/game_mouse01.png"),
$(".info ").html("현재 Music Box를 드래그 중입니다."),
$("header").css("background-color", "rgba(255,0,0,0.4)"),
$("header").css("transition", "all 0.5s")
},
stop: function(){
$(".cursor img").attr("src", "img/game_mouse06.png"),
$(".info ").html("드래그가 끝났습니다."),
$("header").css("background-color", "#410544"),
$("header").css("transition", "all 0.5s")
setTimeout(printAgent, 10000);
}
});
해당 예제의 코드는 각각의 아이콘을 드래그 앤 드롭으로 이동할 수 있게 해줍니다.
containment는 드래그 가능한 요소의 이동범위를 제한합니다.
선택자, 요소, 문자열 또는 배열을 전달할 수 있습니다.
예제에서는 ".icon__box"라는 선택자가 사용되었으므로, 해당 요소 내에서만 이동합니다.
scroll 옵션은 드래그 중인 요소가 뷰포트의 경계에 도달했을 때, 자동으로 스크롤할지 여부를 결정합니다.
기본값은 'true'로 요소가 뷰포트 경계에 도달하면 자동으로 스크롤이 발생합니다.
여기서는 'false'로 설정되어 드래그 중에 자동 스크롤이 발생하지 않습니다.
예제에서는 드래그 진행과 끝에 CSS 효과를 추가하고, 드래그가 끝나면 10초 뒤에 다시 사용자에게 OS 정보를 출력하도록 setTimeout() 함수를 실행합니다.
