플레이스토어 병아리게임 출시!!!~~ [많은 이용 부탁드립니다!]

앵커(Anchor) A태그를 의미한다.

- 방법 1
<a href="javascript:void(0)">링크기능무효화</a>
void(0)의 경우, () 안의 값이 숫자나 영문자 등등을 사용해도 문제는 없지만, 일반적으로 숫자 0을 사용합니다.

- 방법 2
<a href="# return false"> return false 로 링크 기능인 href가 수행시키지 않게 한다.

- 후기 
그냥 # 뒤에 아무거나 붙여도 기능 수행을 안시킨다 하지만 저렇게 return false 처럼 명시해두면 구분하기는 편할 거 같다.

function uuidv4() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  );
}

//이미지 미리보기 
function imagePreview() {
	 var filedata = document.getElementById("license_org_file");
	 var file;
	 var formdata = new FormData();
	 
	 file = filedata.files[0];
	 
	 var img = URL.createObjectURL(file); 
     // blob:http://localhost:8080/b9a326dd-8438-4e17-a0de-99c7e0158bbd
	 
     /** 파일 정보를 읽어 사진이 로컬에 있는 것처럼 보이게 한다. **/
     $("#imageView").attr("src", img); 
      
     return true;
     	 
}

<input style="display: inline-block; width:230px;" id=license_org_file class="form-control" type="file" placeholder="">
<img id=imageView  style="max-width: 100%; height: 50%;">

<!-- 로딩 -->
<div id="fade" class="black_background"></div>
<div id="light" class="white_content">
	<img src="<%=request.getContextPath()%>/resources/image/loading.gif"
		style="width: 100px; height: 100px;"> <span
		style="margin: 0 0 0 10px;">진행 중입니다.</span>
</div>
<!-- 로딩 -->​

.black_background { 
    position: fixed; /* fixed를 사용하여 스크롤에 따라 따라다니지 않도록 합니다. */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #666666 ;
    z-index:1;
    opacity:.50;
} 

.white_content { 
	display: none; 
	position: absolute; 
	padding: 16px; 
	width:350px; 
	border: 16px solid #E3F2FC; 
	background-color: white; 
	z-index:9999; 
	overflow: auto; 
}

function wrapWindowByMask() {
	/** 화면의 높이와 너비를 구한다. **/
	var maskHeight = $(document).height();
	var maskWidth = $(document).width();
	/** 마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다. **/
	$('#fade').css({ 'width': maskWidth, 'height': maskHeight });

}

/// 화면의 중앙에 레이어띄움 
function showLayer() {
	wrapWindowByMask();

	$("#light").css("position", "absolute");
	$("#light").css("top", Math.max(0, (($(window).height() - $("#light").outerHeight()) / 2) + $(window).scrollTop() - 100) + "px");
	$("#light").css("left", Math.max(0, (($(window).width() - $("#light").outerWidth()) / 2) + $(window).scrollLeft()) + "px");
	$('#fade').show(); $('#light').show();
} 

function close() {
	$('#fade').hide(); $('#light').hide();
}

// 최근 검색어 클릭시 해당 검색어로 조회
function inputKeyword (keyword){
	var recent_keyword = $(keyword).text();
	
	$("#txt01").val(recent_keyword); // 검색어

	boardListJson('1');
	
} 

function setLocalStorage(){
	
	/** keyword 쿠기가 존재하는지 체크 **/
	checkingKeywordList = localStorage.getItem("keyword");
	
	/** 쿠키 1개 이상인 경우 처리 **/
	if (checkingKeywordList != null && !(checkingKeywordList === undefined)){
		search_arr = [];
		search_arr = search_arr.concat(localStorage.getItem("keyword").split(","));
		
		var hasSearchWord = search_arr.indexOf(g_search);
        // 같은 값이 존재 할 때 처리 방법
		if(hasSearchWord == -1){
			// getItem 받아올시 배열이 아니라 string이라서 ,로 배열로 만들어줘야한다.
			search_arr.unshift(g_search);
			localStorage.setItem("keyword", search_arr);
		}
	}else{ /** 쿠키가 처음 들어간 경우 **/
		search_arr = [];
		search_arr.unshift(g_search);
		localStorage.setItem("keyword", search_arr);
	}
	
	var recentKeywordTag = "";
	for(var i = 0; i < search_arr.length; i++){
		recentKeywordTag += "<li><a href='#' onclick='inputKeyword(this)'>" + search_arr[i] + "</a></li>";
		if(i == 4) {
			search_arr = search_arr.slice(0, 5); // 너무 쌓이지 않게 5넘어가는 인덱스 삭제 [5개만 보여줄 예정]
			localStorage.setItem("keyword", search_arr);
			break; // 5개만 보여주기
		}
	}
	
	$('#recent_keyword').html(recentKeywordTag);
}

// 페이지 로드 될 때 보여줄 작업
function getLocalStorage(){
	
	/** keyword 쿠기가 존재하는지 체크 **/
	checkingKeywordList = localStorage.getItem("keyword");
	
	/** 쿠키 1개 이상인 경우 처리 **/
	if (checkingKeywordList != null && !(checkingKeywordList === undefined)){
		search_arr = search_arr.concat(localStorage.getItem("keyword").split(",")); 
		console.log("1 localStroage : " + localStorage.getItem("keyword"));
	}
	
	var recentKeywordTag = "";
	for(var i = 0; i < search_arr.length; i++){
		recentKeywordTag += "<li><a href='#' onclick='inputKeyword(this)'>" + search_arr[i] + "</a></li>";
		if(i == 5) break; // 5개만 보여주기
	}
	
	$('#recent_keyword').html(recentKeywordTag);
}

$("#userAnswer").keydown(function(key) {
	if (key.keyCode == 13) {
		// 동작할 내용
	}
});

$(document).ready(function() {
	links = ["A", "B", "C"];
	shuffle(captchaLinks);

	console.log(links);
});

function shuffle(array) {
	array.sort(() => Math.random() - 0.5);
}

// 우측 마우스 클릭시 이벤트 리스너
document.addEventListener('contextmenu', handleCreateContextMenu);

// 나만의 context menu 생성
function handleCreateContextMenu(event) {
	// 기본 Context Menu가 나오지 않게 차단
	event.preventDefault();

	// 나만의 context menu
	const ctxMenu = document.getElementById('context_menu');
	
	// 노출 설정
	ctxMenu.style.display = 'block';

	// 위치 설정
	ctxMenu.style.top = event.pageY + 'px';
	ctxMenu.style.left = event.pageX + 'px';

	// 각주만들기 누를시에 블록지정이 풀려서 카피 내용이 사라지기 때문에 우측을 눌렀을 때 카피되는 과정이 필요하다
	document.execCommand('copy');

	// 클립보드 내용 가져오는 것은 비동기로 처리되기 때문에 
	// 비동기 함수로 처리해서 값이 다 나왔을 때 필요한 값을 받는 과정이 필요하다
	getClipboardContents();

}


// 클립보드 내용을 가져오려면 비동기 처리가 필요하다.
async function getClipboardContents() {
	try {
		footnoteContent = await navigator.clipboard.readText();
		console.log('Pasted content: ', text);
	} catch (err) {
		console.error('Failed to read clipboard contents: ', err);
	}
}


// 좌측 마우스 클릭시 이벤트 리스너
document.addEventListener('click', handleClearContextMenu);


// Context Menu 제거
function handleClearContextMenu(event) {
	const ctxMenu = document.getElementById('context_menu');

	// 노출 초기화
	ctxMenu.style.display = 'none';
	ctxMenu.style.top = null;
	ctxMenu.style.left = null;
}

// 드래그 했을 때 이벤트 리스너
document.addEventListener("drag", function(event) {
	console.log("이동 중");
}, false);




// 블럭지정 했을 때 이벤트 리스너
document.addEventListener('selectionchange', () => {
	console.log(document.getSelection().toString());
});

<!-- 내부 JS 지정 -->
<script>

	/*
	[JS 요약 설명]
	1. window.onload : 브라우저 로드 완료 상태를 나타냅니다 
	2. spin js : 브라우저 내에서 로딩 스핀 상태를 나타낼 수 있습니다 
	3. 로직 : 사용자 통신 요청 시 >> spinnerStart 호출 >> 리턴 응답 받을 시 >> spinnerStop 호출    	
	4. 옵션 참고 공식 사이트 : https://spin.js.org/
	*/


	
	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
	window.onload = function() {
		console.log("");
		console.log("[window onload] : [start]");
		console.log("");

		// 로딩 스피너 호출
		spinnerStart();

		/* setTimeout 호출 : 일정 시간 후 실행 : [함수호출] 일회용 */
		setTimeout(spinnerStop, 3000); //5초후에 spinnerStop() 함수 호출
	};



	/* [spinnerStart 시작 이벤트 호출] */
	function spinnerStart(){
		
		console.log(""); 
		console.log("[spinnerStart] : " + "[start]");           
		console.log("");

		// [로딩 부모 컨테이너 동적 생성] 회색화면
		var createLayDiv = document.createElement("div");
		
		// 설정
		createLayDiv.setAttribute("id", "spinnerLay1000");
		var createLayDivStyle = "width:100%; height:100%; margin:0 auto; padding:0; border:none;";
		createLayDivStyle = createLayDivStyle + " float:top; position:fixed; top:0%; z-index:1000;";
		createLayDivStyle = createLayDivStyle + " background-color:rgba(0, 0, 0, 0.3);"; // 불투명도 설정 >> 자식에게 적용 안됨
		createLayDiv.setAttribute("style", createLayDivStyle);
		
		document.body.appendChild(createLayDiv); //body에 추가 실시


		// [실제 스핀 수행 컨테이너 동적 생성] 스피너
		var createSpinDiv = document.createElement("div");
		
		//설정
		createSpinDiv.setAttribute("id", "spinnerContainer1000");
		var createSpinDivStyle = "width:100px; height:100px; margin:0 auto; padding:0; border:none;"; // 스핀 컨테이너 크기 조절
		createSpinDivStyle = createSpinDivStyle + " float:top; position:relative; top:40%;";
		//createSpinDivStyle = createSpinDivStyle + " background-color:#ff0000;";  
		createSpinDiv.setAttribute("style", createSpinDivStyle);
		
		document.getElementById("spinnerLay1000").appendChild(createSpinDiv); //spinnerLay에 추가 실시


		// [스핀 옵션 지정 실시]
		var opts = {
			lines: 10, // 그릴 선의 수 [20=원형 / 10=막대] [The number of lines to draw]
			length: 10, // 각 줄의 길이 [0=원형 / 10=막대] [The length of each line]
			width: 15, // 선 두께 [The line thickness]
			radius: 42, // 내부 원의 반지름 [The radius of the inner circle]
			scale: 0.85, // 스피너의 전체 크기 지정 [Scales overall size of the spinner]
			corners: 1, // 모서리 라운드 [Corner roundness (0..1)]
			color: '#003399', // 로딩 CSS 색상 [CSS color or array of colors]
			fadeColor: 'transparent', // 로딩 CSS 색상 [CSS color or array of colors]
			opacity: 0.05, // 선 불투명도 [Opacity of the lines]
			rotate: 0, // 회전 오프셋 각도 [The rotation offset]
			direction: 1, // 회전 방향 시계 방향, 반시계 방향 [1: clockwise, -1: counterclockwise]
			speed: 1, // 회전 속도 [Rounds per second]
			trail: 74, // 꼬리 잔광 비율 [Afterglow percentage]
			fps: 20, // 초당 프레임 수 [Frames per second when using setTimeout() as a fallback in IE 9]
			zIndex: 2e9 // 인덱스 설정 [The z-index (defaults to 2000000000)]
		};


		// [스피너 매핑 및 실행 시작]
		var target = document.getElementById("spinnerContainer1000");
		var spinner = new Spinner(opts).spin(target);
	};


	/* [spinnerStop 중지 이벤트 호출] */
	function spinnerStop(){
		console.log("");
		console.log("[spinnerStop] : " + "[start]");
		console.log("");
		try {
			// [로딩 부모 컨테이너 삭제 실시]
			var tagId = document.getElementById("spinnerLay1000");
			document.body.removeChild(tagId); //body에서 삭제 실시 
		}
		catch (exception) {
			// console.error("catch : " + "not find spinnerLay1000");
		}

	};
	
</script>

출저 : https://kkh0977.tistory.com/m/1031