Game Effect 게임 효과 01 : jquery 이미지 드래그 / JS 날짜와 시간 & 운영체제와 화면크기 정보 구현

⭐️ Game Effect 게임 효과 01 : jquery 이미지 드래그 / JS 날짜와 시간 & 운영체제와 화면크기 정보 구현 ⭐️

01. jquery 를 사용하여 이미지 드래그 효과 구현하기

🧊 jquery 사이트에서 드래그 효과의 주소를 가져와 script 에 넣어줍니다. 🧊 마우스 커서 모양을 따로 설정해주었다면, 이미지를 드래그할 때도 모양이 유지되도록 script 에 함수를 추가해줍니다.

[1] 드래그 효과 - jquery 주소 넣기

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

[2] 마우스 커서 모양 유지를 위한 함수 추가하기

$( ".삽입한 이미지 클래스명" ).draggable({
    drag: function(){
        $(".마우스 커서 클래스명").style
    },
});

 
$( ".icon" ).draggable({
    drag: function(){
        $(".mouse__cursor").style
    },
});   

02. JS 를 활용하여 날짜와 시간 구현하기

🧊 html 의 header 부분에 날짜와 시간 정보를 띄울 div 태그를 만들어 줍니다. 🧊 script 에 날짜와 시간을 계산하는 함수를 추가해줍니다.

[1] div 태그 만들기 (html)

div 태그를 만들고, css 와 JS 의 경로 설정을 위해 class 로 이름을 작성합니다.

<header id="header">
	<h1>
		<div class="head1"></div>       // 아이콘을 넣을 div
		Oranssy's Playground                // 페이지 제목
		<div class="head2"></div>       // 아이콘을 넣을 div
	</h1>
	<div class="time"></div>        // 날짜와 시간을 나타낼 div
</header>
<!-- //header -->

[2] 날짜와 시간을 계산하는 함수 작성하기

// 헤더의 시계
function printTime(){
    const clock = document.querySelector(".time");
    const now = new Date();
    // clock.innerText = now;   // 날짜 및 시간 데이터가 나오는지 확인
 
    let hr = now.getHours();        // 시 (0에서 23 사이의 정수)
    if (hr < 10) hr = '0' + hr;     // 일의 자리 숫자 앞에 0 붙이기
    // if (hr > 12) hr = hr - 12;      // '16시' 로 나오지 않고 4시로 나올 수 있도록
 
    let min = now.getMinutes();     // 분 (0에서 59 사이의 정수)
    if (min < 10) min = '0' + min;
 
    let sec = now.getSeconds();     // 초 (0에서 59 사이의 정수)
    if (sec < 10) sec = '0' + sec;
 
    let month = now.getMonth() +1;  // 월 (0에서 11 사이의 정수. 0은 1월, 1은 2월... 을 나타냄) 숫자로 표시되므로 월에는 +1 을 해줘야 함.
    if (month < 10) month = '0' + month;
 
    // getFullYear() -> 날짜의 연도에 해당하는 숫자
    // getDate() -> 일 (1 이상 31 이하의 정수)
    // const nowTime = "📅 " + now.getFullYear() + "년 " + (now.getMonth() +1) + "월 " + now.getDate() + "일 ⏰ " + now.getHours() + "시 " + now.getMinutes() + "분 " + now.getSeconds() + "초";
    const nowTime = "📅 " + now.getFullYear() + " . " + (now.getMonth() +1) + " . " + now.getDate() + " ____ ⏰ " + hr + " : " + min + " : " + sec + "  ";
 
    clock.innerText = nowTime;
    setTimeout("printTime()", 1000) // 1000 = 1초 간격으로
}
 
// 윈도우가 시작하자마자, 작동하시오. (맨 아래에 있어야 함)
window.onload = function(){
    printTime();
}

03. JS 를 활용하여 사용기기의 정보(운영체제, 화면크기) 구현하기

🧊 html 의 footer 에 사용기기 정보를 띄울 div 태그를 만들어 줍니다. 🧊 script 에 사용기기의 정보를 가져오는 함수를 추가해줍니다.

[1] div 태그 만들기 (html)

div 태그를 만들고, css 경로 설정을 위해 class 로 이름을 작성합니다.

<footer id="footer">
	<div class="foot1"></div>
	<div class="agent"></div>
</footer>

[2] 사용기기의 정보를 가져오는 함수 작성하기

// 푸터의 사용기기 정보
function printAgent(){
    const agent = document.querySelector(".agent");
    const os = navigator.userAgent.toLocaleLowerCase();     // 사용자의 기기 정보(운영체제, 화면 크기)을 가지고 옴
    // agent.innerText = os;   // 기기 정보를 가지고 오는지 확인
 
    // indexOf (검색 결과, 인덱스가 배열의 길이보다 크거나 같은 경우 -1 이 반환되므로 배열이 검색되지 않음)
    if(os.indexOf("window") >= 0){          // 배열이 검색되니 않는 경우인 -1 을 제외 -> 0보다 크거나 같을 때.
        agent.innerText = "현재 윈도우를 사용하고 있고, 화면 크기는 " + screen.width + " * " + screen.height + " 입니다."
        document.querySelector("body").classList.add("window");
    } else if(os.indexOf("macintosh") >= 0) {
        agent.innerText = "현재 맥을 사용하고 있고, 화면 크기는 " + screen.width + " * " + screen.height + " 입니다."
        document.querySelector("body").classList.add("macintosh");
    } else if(os.indexOf("iphone") >= 0) {
        agent.innerText = "현재 아이폰 사용하고 있고, 화면 크기는 " + screen.width + " * " + screen.height + " 입니다."
        document.querySelector("body").classList.add("iphone");
    } else if(os.indexOf("android") >= 0) {
        agent.innerText = "현재 안드로이드를 사용하고 있고, 화면 크기는 " + screen.width + " * " + screen.height + " 입니다."
        document.querySelector("body").classList.add("android");
    }
}
 
// 윈도우가 시작하자마자, 작동하시오. (맨 아래에 있어야 함)
window.onload = function(){
    printAgent();
}

04. 결과보기

☛ 원본 소스 보기