프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[소스] 특정시간 함수 호출, 버튼 활성 종료 한 자릿수 두 자릿수 변환

2022.11.11
북마크 작성자 정보

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
 






 

이 포스트 공유하기

전체목록