전땡
98
2021-06-27 12:32:23 작성 2021-06-27 12:33:32 수정됨
0
65

메인화면의 로그인버튼을 로그아웃 글자랑 기능을 추가로 넣고 싶습니다.


메인화면 로그인 버튼 -> 로그인화면에 들어가서

로그인버튼 -> 다시 메인화면으로 돌아오면

로그인이였던 버튼을 로그아웃으로 글자를 바꾼다음에 로그아웃기능도 넣고  싶은데

어떻게 해야하는지 잘 모르겠습니다


<메인화면 index.html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>메인화면</title>

<style type="text/css">
 	@import url("css/index.css");
</style>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="js/index.js"></script>

<style>
* {	
	margin: 0px auto; 
	padding: 0px; 
}

#wrap {
	width: 1024px;
	position: relative;
}

#header {
	right: 0px;
	position: absolute;
}

#login{
border: none;
background-color: #6bedcf;
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
}

#signup {
border: none;
background-color: #6bedcf;
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
}

.hd { 
	text-align: center; 
}

/* Animation Canvas */
.animation_canvas {
	overflow: hidden;
	position: relative;
	width: 1000px;
	height: 600px;
	margin: 0 auto;
}

/* Slider Panel */
.slider_panel {
	width: 6000px; /* slider image 장당 1000px * 6 = 6000 */
	position: relative;
}

.slider_image {
	float: left;
	width: 1000px;
	height: 600px;
}

/* Slider Text Panel */
.slider_text_panel {
	position: absolute;
	top: 300px;
	left: 50px;
}

.slider_text {
	position: absolute;
	width: 250px;
	height: 150px;
	color: white;
}

/* Control Panel */
.control_panel {
	position: absolute;
	top: 380px;
	left: 270px;
	height: 13px;
	overflow: hidden;
}

.control_button {
	width: 12px;
	height: 46px;
	position: relative;
	float: left;
	cursor: pointer;
	background-image: url('img/point_button.png');
}

.control_button:hover {
	top: -16px;
}

.control_button.active {
	top: -31px;
}

footer {
	width: 1000px;
}
footer>div {
	overflow: hidden;
}
footer>div>div {
	float: left;
	border: 1px solid black;
	margin: 1px;
}
footer>div a {
	display: block;
	width: 320px;
	height: 320px;
	line-height: 320px;
	text-align: center;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
	var timer = null;
	var refreshInterval = null;
	
	var imgCnt = $(".slider_panel").children().length;
	var imgIdx = 1;
	
	//moveSlider 함수
	function moveSlider(index) {
		//그림 불러오기
		var willMoveLeft = -(index * 1000);
		
		$(".slider_panel").animate({
			left: willMoveLeft	//세미콜론 없음
		},"slow");
		
		//텍스트 가져오기
		$(".slider_text[data-index =" + index +"]").show("fast").animate({
			left: 0	//세미콜론 없음
		});
		$(".slider_text[data-index !=" + index +"]").hide("fast").animate({
			left: -300 //세미콜론 없음
		});
		
		//control버튼 active하기
		$(".control_button[data-index=" + index + "]").addClass("active")
		$(".control_button[data-index!=" + index + "]").removeClass("active")
		
	}	//moveSlider
	
	//timer 함수로 돌리기 위해서
	timer = function() {
		moveSlider(imgIdx);
		if (imgIdx < imgCnt - 1) {
			imgIdx++;
		} else {
			imgIdx = 0;
		}
		
	}; //timer
	
	//canvas에 올려놨을 때 그림 정지
	$(".animation_canvas").on({
		"mouseenter": function() {
			clearInterval(refreshInterval);		
		},
		
		"mouseleave": function() {
			refreshInterval = setInterval(timer, 3000);
		}
	
	});
	
	//control_button data-index 할당, 슬라이더 그림 불러오기
	$(".control_button").each(function(index){
		$(this).attr("data-index",index);
	}).click(function() {
		var index = $(this).attr("data-index");
		imgIdx = index;	//내가 클릭한 index번호를 3초마다 돌리는 imgIdx로 전달
		//해당인덱스에 대한 그림 및 텍스트 불러오기
		moveSlider(index);
	});
	
	//초기 텍스트 위치 지정 및 data-index 할당
	$(".slider_text").css("left",-300).each(function(index){
		$(this).attr("data-index",index);	//data-index 라는 이름으로 index 할당
	});
	
	//초기 0번째 텍스트 가져오기
	$(".slider_text[data-index=" + 0 + "]").show("fast").animate({
		left: 0	//세미콜론 없음
	},"slow");
	
	//초기 0번째 control_button을 active로 설정
	$(".control_button[data-index=" + 0 + "]").addClass("active");
	
	//3초마다 자동으로 움직이는 timer함수 호출
	refreshInterval = setInterval(timer, 3000);
	
});//ready
</script>
</head>
<body>
	<div id="wrap">
		<div id="header">
		<a  href="login.html"><button id="login">로그인</button></a>
		<a href="signup.html"><button id="signup">회원가입</button></a>
		</div>
	<h1 class="hd">Header</h1>
	
	<div class="animation_canvas">
		<div class="slider_panel">
			<a href="http://www.starbucks.co.kr" target="_blank"><img src="img/starbucks.jpg" class="slider_image" /></a> 
			<a href="http://www.hollys.co.kr/" target="_blank"><img src="img/hollys.jpg" class="slider_image" /></a> 
			<a href="http://www.ediya.com/" target="_blank"><img src="img/ediya.jpg" class="slider_image" /></a>
			<a href="http://www.twosome.co.kr/" target="_blank"><img src="img/twosome.jpg" class="slider_image" /></a>
			<a href="http://www.dalkomm.com//" target="_blank"><img src="img/dalkomm.jpg" class="slider_image" /></a>
			<a href="http://www.paikdabang.com/" target="_blank"><img src="img/paiks.jpg" class="slider_image" /></a>
		</div>
		<div class="slider_text_panel">
			<div class="slider_text">
				<h1>0. STARBUCKS</h1>
				<p>Starbucks coffee Seattle 1st place.</p>
			</div>
			<div class="slider_text">
				<h1>1. HOLLYS</h1>
				<p>Holly's Coffee Thailand Bangkok 1st Branch.</p>
			</div>
			<div class="slider_text">
				<h1>2. EDIYA</h1>
				<p>Ediya Coffee Chung-Ang University 1st Branch.</p>
			</div>
			<div class="slider_text">
				<h1>3. A TWOSOME PLACE</h1>
				<p>A Twosome Place Sinchon 1st Branch.</p>
			</div>
			<div class="slider_text">
				<h1>4. DAL KOMM</h1>
				<p>Dalcom Coffee Morocco Casablanca 1st store.</p>
			</div>
			<div class="slider_text">
				<h1>5. PAIKS</h1>
				<p>THE BORN KOREA</p>
			</div>
		</div>
		<div class="control_panel">
			<!-- control_button과 같은 요소는 div태그로 만들고 
			스타일시트에서 background속성으로 이미지를 설정 
			이렇게 하면 스타일시트의 hover필터와 active필터 사용 가능-->
			<div class="control_button"></div>
			<div class="control_button"></div>
			<div class="control_button"></div>
			<div class="control_button"></div>
			<div class="control_button"></div>
			<div class="control_button"></div><!-- 버튼 추가 -->
		</div>
	</div>
	
	<h1 class="hd">Footer</h1>
	<footer>
		<div >
	<div id="footer_div_1"><a href="http://www.starbucks.co.kr/" target="_blank"><img src="images/starbucks.jpg" class="footer_image" /></a></div>
	<div id="footer_div_2"><a href="http://www.hollys.co.kr/" target="_blank"><img src="images/hollys.jpg" class="footer_image" /></a></div>
	<div id="footer_div_3"><a href="http://www.ediya.com/" target="_blank"><img src="images/ediya.jpg" class="footer_image" /></a></div>
	</div>
	<div>
	<div id="footer_div_4"><a href="http://www.twosome.co.kr/" target="_blank"><img src="images/twosome.jpg" class="footer_image" /></a></div>
	<div id="footer_div_5"><a href="http://www.dalkomm.com/" target="_blank"><img src="images/dalkomm.jpg" class="footer_image" /></a></div>
	<div id="footer_div_6"><a href="http://www.paikdabang.com/" target="_blank"><img src="images/paiks.jpg" class="footer_image" /></a></div>
	</div>
	</footer>
</div>
</body>
</html>


-------------------------------------------------------------------------------------------------------------------------------------------

<로그인화면 login.html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>로그인</title>

<style type="text/css">
 	@import url("https://fonts.googleapis.com/css?family=Black+Han+Sans&display=swap");
 	@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
 	
* {
	background-color: white;
	font-family: 'Black Han Sans', sans-serif;
}

form {
	border: 2px solid black;
	width: 530px;
	height: 370px;
	margin: 0px auto;
	box-shadow: 5px 5px 5px 5px gray;
}

table {
	margin-left: 30px;
	text-align: center;
	border-collapse: separate;
	border-spacing: 0 20px;
}

h1 {
	margin: 5px;
}

input {
	border-radius: 30px;
	border: 2px solid black;
}

#id:focus {
	border-color : red;
}
#pw:focus {
	border-color : red;
}

input::placeholder {
 	color: black;
}
	
#btn input{
	 width: 180px;
	 height: 40px;
}

#id, #pw {
	border-color: #3273a8;
	width: 300px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	margin-left: 15px;
	font-size: 20px;
}

#login, #cancel {
	border-color: #32a875;
	margin-top: 5px;
	font-size: 20px;
}

#login:hover, #cancel:hover{
	border-color: #a89632;
	cursor: pointer;
}

#eyes {
	margin-left: 10px;
	color: #fcba03;
	cursor: pointer;
}

#pwchk {
	margin-left: 10px;
	color: blue;
	font-size: 20px;
	cursor: default;
}

table tr:last-child td {
	font-size: 30px;
}

table tr td:last-child a {
	color: red;
}

#close {
	float: right;
	display: block;
}
	
#close button {
	border: 0px;
	color: red;
}

</style>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="js/login.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var cnt = 0;
	document.getElementById("login_form").onsubmit = function() {
		$.ajax({
			url: "loginCheck.json",
			type: "post",
			
	success: function(result) {
		$(result).each(function(key, value) {
			if ($("#id").val() == value.id && $("#pw").val() == value.pw) {
				alert("로그인 되었습니다.");
				cnt = 0;
				location.href = "index.html";	//로그인 성공시 메인화면으로 이동
				return false;
			}else{
				cnt++;
			}//if
		});//each
			if(cnt != 0){
				alert("아이디가 존재하지 않거나 비밀번호가 틀립니다.");
			}else{
				window.history.back();
			}//if
		}//success result
	});//ajax
  return false;
}//login submit

	
	$("#eyes").mousedown(function() {
		$("#pw").attr("type", "text");
	})//mousedown
	
	$("#eyes").mouseup(function() {
		$("#pw").attr("type", "password");
	})//mousedown
	
	$("#close").click(function() {
		window.close();
	})//click
	
});//ready
</script>
</head>
<body>
	<form action="#" id="login_form" name="login_form">
	<div id="close"><button type="button">X</button></div>
	
	<table>
		<tr align="center">
			<th colspan="3"><h1>LOGIN</h1></th>
		</tr>
		
		<tr>
			<td><label for="id"><img src="images/id_icon.png"/></label></td>
			<td><input type="text" name="id" id="id" 
					 placeholder="아이디(이메일)를 입력하세요" onclick="this.placeholder='';"/>
			</td>
		</tr>
		<tr>
			<td><label for="pw"><img src="images/pw_icon.png"/></label></td>
			<td><input type="password" name="pw" id="pw" 
					 placeholder="비밀번호를 입력하세요" onclick="this.placeholder='';"/>
			</td>
			<td><div id="eyes">
						<i class="fa fa-eye fa-lg"></i>
					</div></td>
			<td><div id="pwchk">비번보기</div></td>
		</tr>
		
		<tr id="btn" style="text-align: center;">
			<td colspan="3"> 
			<input type="submit" id="login" value="로그인" />&nbsp;&nbsp;&nbsp; 
			<input  type="reset" id="cancel" value="취소" />
			</td>
		</tr>
		
		<tr>
			<td colspan="3">잠깐 회원이 아니세요? 
			<a href="signup.html">가입</a>하세요
			</td>
		</tr>
		
	</table>
</form>
	<h2 id="txt"></h2>
</body>
</html>






















0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.