끄적끄적: 2022

22. 8. 4.

Jquery 한화면 단위 Mouse Wheel 이동 (응용)

JQuery 한화면 단위 Mouse Wheel 이동를 토대로 응용해서 복합적으로...

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery MouseWheel 응용</title>
<style>
/*부드러운 스크롤 이동 
html { scroll-behavior: smooth;}
*/
body{ margin:0; padding:0;}
header{ position:absolute; width:100%; height:100px; border-bottom:1px solid #000; display:flex; justify-content: center; align-items: center; float:left;}
section{ width:100%; height:100vh; display:flex; justify-content: center; align-items: center; float:left;}
footer{ width:100%; height:300px; border-top:1px solid #000;  display:flex; justify-content: center; align-items: center; float:left;}

section:nth-child(odd){ background-color:#f1f1f1;}

.main1{ display:inline-block; height:1400px;}

.main4{ display:inline-block; height:800px;}
.main4 h2{ width:100%;}
#main4_sub{ width:100%; overflow:hidden; display:inline-block;}

#main4_sub[data-box='0'] .main4-box{ margin-left:0;}
#main4_sub[data-box='1'] .main4-box{ margin-left:-600px;}
#main4_sub[data-box='2'] .main4-box{ margin-left:-1200px;}
#main4_sub[data-box='3'] .main4-box{ margin-left:-1800px;}
#main4_sub[data-box='4'] .main4-box{ margin-left:-2400px;}
/*
#main4_sub[data-box='5'] .main4-box{ margin-left:-3000px;}
#main4_sub[data-box='6'] .main4-box{ margin-left:-3600px;}
*/

.main4-box{ display:flex; width:4200px; transition-duration:0.3s;}
.main4-box > div{ width:600px; display:flex; justify-content: center; align-items: center; height:600px; }
.main4-box > div:nth-child(odd){ background-color:#fff1f1;}
.main4-box > div:nth-child(even){ background-color:#f1fff1;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
// 스크롤 중복입력 방지용 flag
var scrollworker = false;
// 스크롤 구간 배열
var scrollTops = [];
// 기본 이동시간 0.8초
var basicinterval = 800;
// 페이지 로드 후 동작
$(function(){
	// scrollTops 구간목록을 배열로 구성 
	$("section").each(function(index, element) {
		if($(this).offset().top!=undefined){
			scrollTops.push($(this).offset().top)
		}
    });
	// scrollTops 내임차순 정렬
	scrollTops.sort(function(a, b)  {  return a - b;});
	// 마지막 scrollTops 을 넘겨줄 위치를 구하기 위해
	scrollTops.push(scrollTops[scrollTops.length -1] + window.outerHeight);
	// header, section, footer 에서 마우스 휠을 넣었을 경우
	$("header, section, footer").on("mousewheel", function (e) {
		// 기존 이벤트 취소
		e.preventDefault();
		// 중복 입력 방지
		if(scrollworker==false){
			// 중복 입력 방지 on
			scrollworker = true;
			// 동작하고 있는 엘리먼트
			const elm = $(this);
			// 휠이벤트가 undefined 가 아니라면
			if(event.wheelDelta!=undefined){
				var delta = 0;
				if (!event) event = window.event;
				if (event.wheelDelta) {
					 delta = event.wheelDelta / 120;
					 if (window.opera) delta = -delta;
				} 
				else if (event.detail)
					 delta = -event.detail / 3;
				
				// 지금의 스크롤탑 위치
				const nst = $(window).scrollTop();
				// 어디로 움직일 것인가
				var moveTop;
				
				
				if($(elm).hasClass("main1")){ // main1 스크롤 이동 패스
					// 연속 입력위해 scrollworker 지정
					scrollworker = false;
					if(delta < 0){ // 아래로
						moveTop = "+=50";
					}else if(delta>0){ // 휠위로
						moveTop = "-=50";
					}
					// main1에선 기본 스크롤
					$("html,body").stop().animate({
	            		scrollTop: moveTop + 'px'
		        	    }, {
    	    	        duration: 5,easing: "swing", complete: function () {
							scrollworker = false;
						}
					});
					return;

				}else if($(elm).hasClass("main4")){ // main4 일 경우 조건 수행후 이어 동작시키기
					// 조건을 수행시키기 위해 boxno 을 지정
					var boxno = Number($("#main4_sub").attr("data-box")); 
					// 조건을 만족하는지에 대한 상태 flag
					var movestat = false;
					if(delta < 0){ // 아래로
						boxno++;
						// 조건값이 main4-box 의 수를 넘어가게 되면
						if(boxno > $(".main4-box").length + 3){
							boxno--;
							// 지금의 scrollTop 위치보다큰 값중 첫번째 값 추출
							moveTop = scrollTops.filter(x=> x > nst)[0];
							// 값이 없으면 마지막값으로 지정
							if(moveTop == undefined) moveTop = scrollTops[scrollTops.length-1];
							// 조건상태 만족처리
							movestat = true;
						}
					}else if(delta>0){ // 휠위로
						boxno--;
						// 조건값이 최소라면
						if(boxno < 0){
							// 지금의 scrollTop 위치보다 작은 값 추출
							var nstminArr = scrollTops.filter(x => x < nst);
							// 역순정렬
							nstminArr.sort(function(a, b)  {  return b - a;});
							// 역순정렬한 첫번째값 추출
							moveTop = nstminArr[0];
							// 첫번째값이 undefined 면 움직일 위치 0으로 지정
							if(moveTop == undefined) moveTop = 0;
							movestat = true;
						}
					}
					// 변경된 조건으로 스타일 적용
					$("#main4_sub").attr("data-box",boxno);
					
					// 조건에 따라 scrollTop을 지정하기 위해 변수지정
					var intervals = basicinterval;
					// 조건에 만족하지 않으면 움직임이 없도록 고정시킴
					if(!movestat) { intervals=0; moveTop=$(".main4").offset().top;}
					// scrollTop 이동
					$("html,body").stop().animate({
						scrollTop: moveTop + 'px'
						}, {
						duration: intervals,easing: "swing", complete: function () {
							scrollworker = false;
						}
					});
				}else{ // 그외일경우 일반적 진행
					if(delta < 0){ // 아래로
						// 지금의 scrollTop 위치보다큰 값중 첫번째 값 추출
						moveTop = scrollTops.filter(x=> x > nst)[0];
						// 값이 없으면 마지막값으로 지정
						if(moveTop == undefined) moveTop = scrollTops[scrollTops.length-1];
					}else if(delta>0){ // 휠위로
						// 지금의 scrollTop 위치보다 작은 값 추출
						var nstminArr = scrollTops.filter(x => x < nst);
						// 역순정렬
						nstminArr.sort(function(a, b)  {  return b - a;});
						// 역순정렬한 첫번째값 추출
						moveTop = nstminArr[0];
						// 첫번째값이 undefined 면 움직일 위치 0으로 지정
						if(moveTop == undefined) moveTop = 0;
					}
					// scrollTop 이동
					$("html,body").stop().animate({
	            		scrollTop: moveTop + 'px'
		        	    }, {
    	    	        duration: basicinterval,easing: "swing", complete: function () {
							scrollworker = false;
						}
					});
				}
			}
		}
	});
});
$(window).resize(function(){ 
	scrollTops = [];
	$("section").each(function(index, element) {
		if($(this).offset().top!=undefined){
			scrollTops.push($(this).offset().top)
		}
    });
	scrollTops.sort(function(a, b)  {  return a - b;});
	scrollTops.push(scrollTops[scrollTops.length -1] + window.outerHeight);
});
</script>

</head>
<body>
<header>
	<h1>Header</h1>
</header>
<section class="main0">
	<h2>Main 0</h2>
</section>
<section class="main1">
	<h2>Main 1</h2>
</section>
<section class="main2">
	<h2>Main 2</h2>
</section>
<section class="main3">
	<h2>Main 3</h2>
</section>
<section class="main4">
	<div>
        <h2>Main 4</h2>
        <div id="main4_sub" data-box="0">
            <div class="main4-box">
                <div class="main4-box-1">4-1</div>
                <div class="main4-box-2">4-2</div>
                <div class="main4-box-3">4-3</div>
                <div class="main4-box-4">4-4</div>
                <div class="main4-box-5">4-5</div>
                <div class="main4-box-6">4-6</div>
                <div class="main4-box-7">4-7</div>
            </div>
        </div>
    </div>
</section>
<footer>
	<h1>Footer</h1>
</footer>

</body>
</html>

22. 7. 7.

C# 내 로컬 PC시간 NAVER 서버 시간으로 변경

using System;
using System.Globalization;
using System.Net;
using System.Runtime.InteropServices;

namespace timechange
{
    internal class Program
    {
        [StructLayout(LayoutKind.Sequential)]
        public struct SYSTEMTIME
        {
            public short wYear;
            public short wMonth;
            public short wDayOfWeek;
            public short wDay;
            public short wHour;
            public short wMinute;
            public short wSecond;
            public short wMilliseconds;
        }

        [DllImport("kernel32.dll", SetLastError = true)]
        public static extern bool SetSystemTime(ref SYSTEMTIME st);

        [DllImport("kernel32.dll", SetLastError = true)]
        public static extern bool SetLocalTime(ref SYSTEMTIME st);

        static void Main(string[] args)
        {
            DateTime dateTime = DateTime.MinValue;
            try
            {
                // 네이버 사이트 시간하고 맞춰서 시간 설정
                using (var response = WebRequest.Create("https://www.naver.com").GetResponse())
                    dateTime = DateTime.ParseExact(response.Headers["date"],
                        "ddd, dd MMM yyyy HH:mm:ss 'GMT'",
                        CultureInfo.InvariantCulture.DateTimeFormat,
                        DateTimeStyles.AssumeUniversal);
            }
            catch (Exception)
            {
                dateTime = DateTime.Now;
            }
            Console.WriteLine(dateTime);

           
            SYSTEMTIME st = new SYSTEMTIME();
            st.wYear = (short)dateTime.Year;
            st.wMonth = (short)dateTime.Month;
            st.wDay = (short)dateTime.Day;
            st.wHour = (short)dateTime.Hour;
            st.wMinute = (short)dateTime.Minute;
            st.wSecond = (short)dateTime.Second;
            st.wMilliseconds = (short)dateTime.Millisecond;

            SetSystemTime(ref st);
            SetLocalTime(ref st);
            Console.ReadKey();
        }
    }
}

22. 1. 19.

Javascript 동적 드래그 앤 드롭 레이어 생성

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>드래그 앤 드롭 동적 생성</title>
<style>
html, body {margin:0; padding:0; }
#content { position:relative; width:100%; height:70vh; background-color:#f1f1f1; display:inline-block; overflow:scroll; }
.formdiv { width: 300px; height: 300px; display: inline-block; border: 1px solid #000; background-color: #000; position: absolute; cursor:move; left:0; top:0; }
</style>
<script>
    // 시작위치
    var startX = 0;
    var startY = 0;
    // 클릭위치
    var clickX = 0;
    var clickY = 0;
    // 맨앞으로
    var zIndex = 0;

    function DragStartFunction(ev,el) {
        if (el.style.left != undefined) {
            startX = el.style.left;
            startX = Number(startX.replace("px", ""));
        }
        if (el.style.top != undefined) {
            startY = el.style.top;
            startY = Number(startY.replace("px", ""));
        }
        clickX = ev.clientX - startX;
        clickY = ev.clientY - startY;
    }
    function DragEndFunction(ev) {
        var moveX = ev.clientX - clickX;
        var moveY = ev.clientY - clickY;
        ev.target.style.left = moveX + "px";
        ev.target.style.top = moveY + "px";
        zIndex++;
        ev.target.style.zIndex = zIndex;
    }

    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            var newDiv = document.createElement("div");
            newDiv.className = "formdiv";
            newDiv.setAttribute("draggable", true);
            newDiv.setAttribute("ondragstart", "DragStartFunction(event,this)");
            newDiv.setAttribute("ondragend", "DragEndFunction(event)");
            // 구분을 위해 랜덤색상
            newDiv.setAttribute("style", "background-color:#" + Math.round(Math.random() * 0xffffff).toString(16));
            document.getElementById("content").appendChild(newDiv);
        }
    }
</script>
</head>
<body>
    <a id="btn">ADD</a>
    <div id="content"></div>
</body>
</html>

22. 1. 13.

웹페이지 페이지 이동(?) 갱신( Javascript History Api )

페이지 이동시 부드럽게 이동하기 위한 방법(=한페이지에서 변화를...)
Javascript 파일(/main.js)

// 뒤로가기시 페이지 새로고침
window.onpopstate = function(event) {
	var np = document.location
	BodyClassLoad(np);
}
// 페이지 시작시 a태그의 href 조정(타 도메인일경우 그대로 두고 같은 도메인일 경우 function 으로 처리되도록..)
window.onload = function(){
	var abtn = document.querySelectorAll("a");
	for(var i = 0; i < abtn.length; i++){
		const loc = abtn[i].getAttribute("href");
		if(loc.indexOf("://") == -1){
			MoveHrefClick(abtn[i],loc);
		}else{
			if(loc.indexOf("://"+window.location.origin) > -1){
				MoveHrefClick(abtn[i],loc);
			}
		}
	}
}
// body class 조정 및 section 의 내용 교체
function BodyClassLoad(url){
	var nc = "";
	var mhref = "";
	if(url.origin != undefined){
		nc = url.href.substring(url.origin.length,url.origin.length+url.href.length);
	}else{
		nc = url;
	}
	mhref = nc;
	if(nc.substring(0,1)=="/"){
		nc = nc.substring(1,nc.length);
	}
	if(nc.substring(nc.length-1,nc.length)=="/"){
		nc = nc.substring(0,nc.length - 1);
	}
	nc = nc.replace("/"," ");
	document.querySelector("body").className = "BodyTag "+ nc;
	var xhr = new XMLHttpRequest(); 
	var loadurl = mhref;
	if(loadurl.indexOf("?") == -1){
		loadurl += "/main.php";
		loadurl = loadurl .replace("//","/");
	}else{
        // PHP 페이지를 불러오도록 상황에 따라 변경
		loadurl = loadurl .replace("?","main.php?");
	}
	xhr.open('GET', loadurl, true); 
	xhr.send(); 
	xhr.onload = function(){ 
		if (xhr.status == 200) {
			document.querySelector("section").innerHTML = xhr.response;
		} else { 
		// 실패 
		} 
	}
}
// a태그 href 비활성화 및 history 에 이전주소로 기록
function MoveHrefClick(el,href){
	el.removeAttribute("href");
	el.onclick = function(){
		history.pushState({page: 1}, document.title, href);
		BodyClassLoad(href)
		
	}
}

PHP 페이지(/index.php, /A/index.php) : 복붙을 위해...

<?php
    $relative_path = preg_replace("`\/[^/]*\.php$`i", "/", $_SERVER['PHP_SELF']);
    $pathNode = explode( '/', $relative_path );
    $bodyClass = "BodyTag";
    for( $i = 0;$i < sizeof($pathNode); $i++){
        if($pathNode[$i] != ""){
            $bodyClass .= " ".$pathNode[$i];
        }
    }
    $path1 = "Order";
	$path2 = "";
	$path3 = "";
    if($bodyClass != "BodyTag"){
        if(sizeof($pathNode)>1){
            $path1 = $pathNode[1];
        }
        if(sizeof($pathNode)>2){
            $path2 = $pathNode[2];
        }
		if(sizeof($pathNode)>3){
            $path3 = $pathNode[3];
        }
    }else{
		$bodyClass .= " ".$path1;
	}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="/main.js" defer></script>
</head>
<body class="<?php echo $bodyClass; ?>">
<header><?php include $_SERVER["DOCUMENT_ROOT"]."/header.html"; ?></header>
<section><?php include $_SERVER["DOCUMENT_ROOT"].$relative_path."main.php"; ?></section>
<footer><?php include $_SERVER["DOCUMENT_ROOT"]."/footer.html"; ?></footer>
</body>
</html>

페이지구성(/header.html)

<a href="/">Home</a>
<a href="/A/">A</a>

PHP 구성(/main.php)

<h2>Home</h2>

PHP 구성(/A/main.php)

<h2>A</h2>

끄적끄적