1. 특정시간 함수 호출, 한 자릿수 두 자릿수 변환
* 특정 시간 또는 페이지 접속 시간을 조회하여 함수 호출 방법
1. 접속시간과 특정시간 생성 필요에 따라 ( 년, 월, 일, 시, 분, 초). new Date()
2. 생성된 시간( 접속시간, 특정시간)이 한 자릿수 이면 두 자릿수로 변환 (0 -> 00)
3. 생성된 시간( 접속시간, 특정시간) 문자 변환 String
4. 생성된 시간( 접속시간, 특정시간) getTime() 변환, 값 비교 함수 호츨
** 시간( 접속시간, 특정시간)을 비교하여 버튼활성, 비활성
- http://relation.co.kr/images_board/board_system_publishing/301/index.html
2. 특정시간 버튼 활성
- timer < 0 이상 일때 버튼 활성.
- http://relation.co.kr/images_board/board_system_publishing/301/index2.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RELATION.CO.KR_5_301</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;700&display=swap');
/* font-family: 'Noto Sans KR', sans-serif;*/
* { margin:0; padding:0; }
body { font-family: 'Noto Sans KR', sans-serif; font-size:16px; }
section { width:100%; }
.section_area { margin:0 auto; width:1170px; height:800px; }
.section_area .section_box { width:100%; padding:50px; display:flex; justify-content:space-between; align-items:center; flex-direction:row; box-sizing:border-box; }
.section_area .section_box .left,.right { display:flex; justify-content:center; align-items:center; width:50%; height:800px; border:1px solid #ececec; }
.section_area .section_box .left .input_area { text-align:center; }
.section_area .section_box .left .input_area .nowtime { display:block; margin-bottom:5px; }
.section_area .section_box .left .input_area p { margin-bottom:20px; line-height:23px; font-size:22px; }
.section_area .section_box .left .input_area p span { font-size:11px; }
.section_area .section_box .left .input_area p span.t_time { font-size:22px; }
.section_area .section_box .left .input_box { width:200px; height:50px; border:1px solid #ddd; background:#fff; text-align:center; }
.section_area .section_box .left button { border-width:0px; }
.section_area .section_box .left .btn_int { width:200px; height:50px; background:#000; color:#fff; margin-top:30px; cursor:pointer; }
.section_area .section_box .left .inpt_btn_p { width:200px; height:50px; background:navy; color:#fff; margin-top:10px; }
.section_area .section_box .left .inpt_btn_m { width:200px; height:50px; background:red; color:#fff; margin-top:10px; }
.section_area .section_box .right .input_area { text-align:center; }
.section_area .section_box .right .input_area p { margin-top:20px; margin-bottom:20px; line-height:23px; font-size:22px; }
.section_area .section_box .right .input_area p span { font-size:11px; }
.section_area .section_box .right .input_area p span.t_time { font-size:22px; }
.section_area .section_box .right .input_area a { display:block; width:200px; height:50px; color:#fff; border-radius:25px; text-align:center; line-height: 50px; text-decoration:none; }
.section_area .section_box .right .input_area .fuc_btn_n { display:block; background:#ddd; }
</style>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
let nowTime = new Date();
let nyy = nowTime.getFullYear();
let nmm = numFormat( nowTime.getMonth()+1);
let ndd = numFormat( nowTime.getDate());
let nddn = nowTime.getDay();
let nhh = numFormat( nowTime.getHours());
let nmt = numFormat (nowTime.getMinutes());
let nss = numFormat (nowTime.getSeconds());
let nowTimeVal = new Date (nyy, nmm, ndd, nhh,nmt, nss);
let nowtxt = " "+nyy+"년 "+nmm+"월 "+ndd+"일 "+nhh+"시 "+nmt+"분 "+nss+"초 ";
$("#nowtime").append( nowtxt );
$(".btn_int").click(function(){
let inpTime = $(".input_box").val();
if( inpTime.length == "" ){
alert("기준0000년 00월 00일 00시 00분 00초를 넣어주세요");
return;
}else{
let yy = numFormat(inpTime.substring(0,4));
let mm = numFormat(inpTime.substring(4,6));
let dd = numFormat(inpTime.substring(6,8));
let hh = numFormat(inpTime.substring(8,10));
let mt = numFormat(inpTime.substring(10,12));
let sc = numFormat(inpTime.substring(12,14));
let inpTimeVal = new Date (yy, mm, dd, hh, mt, sc);
let settxt = " "+yy+"년 "+mm+"월 "+dd+"일 "+hh+"시 "+mt+"분 "+sc+"초 ";
$("#settime").append( settxt );
var timer = inpTimeVal.getTime() - nowTimeVal.getTime();
console.log("nowTimeVal "+ nowTimeVal.getTime());
console.log("inpTimeVal "+ inpTimeVal.getTime());
console.log("timer "+ timer);
if( timer > 0 ){
$(".fuc_btn_n").attr("href","https://wwww.relation.co.kr/").css({"background":"#000"});
$(".fuc_btn_n > span").text("버튼활성!!");
}
}
});
});
function numFormat(variable){
variable = Number(variable).toString();
if(Number(variable) < 10 && variable.length == 1)
variable = "0" + variable;
return variable;
}
</script>
</head>
<body>
<section>
<div class="section_area">
<div class="section_box">
<div class="left">
<div class="input_area">
<input type="text" name="dday" id="dday" class="input_box" placeholder="20220101000000"><br>
<button class="btn_int">입력</button><br>
</div>
</div>
<div class="right">
<div class="input_area" >
<a href="#" class="fuc_btn_n"><span>버튼NO</span></a>
<p>
<span class="t_time"></span><br>
<span>현재 보다 미래 시간 일떄 활성</span><br>
<span id="nowtime">NOW:</span><br>
<span id="settime">SET:</span><br>
</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
3. 아날로그 시계
http://relation.co.kr/images_board/board_system_publishing/301/index3.html
