jQuery 타이머 / jQuery 타이머 만들기 / 스톱, 스타드 구현

 

ajax 호출 후 응답시간이 얼마나 걸리는지 확인 하기 위해서 하나 만들어 보았습니다.

ajax 호출시작시 startTimer() 를 호출하고, ajax success 부분에서 stopTimer() 함수 호출해주면 되겠네요.

 

결과페이지

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script language="javascript">


var timer =0;

function resetTimer(){
	$("#hid_sec").val(0);
	$("#sec").html("0");
}


function startTimer(){
	timer = setInterval(function () {
		$("#hid_sec").val(Number($("#hid_sec").val()) + 1);
		$("#sec").html($("#hid_sec").val());
	 }, 1000); 
}


function stopTimer(){
	clearInterval(timer);
}

</script>
</head>
<body>
 <div>
	<span id="sec">0</span>
	<input type="hidden" id="hid_sec" value="0"/>
	<a href="javascript:;" onclick="startTimer();">시작</a> 
	<a href="javascript:;" onclick="stopTimer();">스톱</a> 
	<a href="javascript:;" onclick="resetTimer();">리셋</a> 
</div>

</body>

</html>

 

'웹프로그래밍 > JQUERY' 카테고리의 다른 글

[ jquery ] 팝업 마스크 / 레이어 팝업 / 배경이 가려진 팝업 뛰우기  (3) 2016.07.29
[ jquery ] 이미지 슬라이더 / 탭 슬라이더 / setInterval / 슬라이더 만들기  (2) 2016.07.01
jQuery 4일째 (ajax)  (0) 2014.07.31

[ jquery ] 팝업 마스크 / 레이어 팝업 / 배경이 가려진 팝업 뛰우기 



팝업을 사용할때 배경을 흐리게 만들어 팝업에 집중할 수 있게 효과를 주는 방법이다.

인터넷에서 조금만 검색을 해봐도 쉽게 찾을 수 있겠지만, 막상 또 만들어 쓰려고 하면 시간을 많이 잡아먹기 마련이다.



예전에 아주 유용하게 사용한 소스라서 저장해 두고 있다가 같이 공유해본다.













1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>배경이 가려진 레이어 팝업 뛰우기</title>
<style> 
/* 마스크 뛰우기 */
#mask {  
    position:absolute;  
    z-index:9000;  
    background-color:#000;  
    display:none;  
    left:0;
    top:0;
} 
/* 팝업으로 뜨는 윈도우 css  */ 
.window{
    display: none;
    position:absolute;  
    left:50%;
    top:50px;
    margin-left: -500px;
    width:1000px;
    height:500px;
    background-color:#FFF;
    z-index:10000;   
 }
 
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"> 
//<![CDATA[
    function wrapWindowByMask(){
 
        //화면의 높이와 너비를 구한다.
        var maskHeight = $(document).height();  
        var maskWidth = $(window).width();  
 
        //마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
        $("#mask").css({"width":maskWidth,"height":maskHeight});  
 
        //애니메이션 효과 - 일단 0초동안 까맣게 됐다가 60% 불투명도로 간다.
 
        $("#mask").fadeIn(0);      
        $("#mask").fadeTo("slow",0.6);    
 
        //윈도우 같은 거 띄운다.
        $(".window").show();
 
    }
 
    $(document).ready(function(){
        //검은 막 띄우기
        $(".openMask").click(function(e){
            e.preventDefault();
            wrapWindowByMask();
        });
 
        //닫기 버튼을 눌렀을 때
        $(".window .close").click(function (e) {  
            //링크 기본동작은 작동하지 않도록 한다.
            e.preventDefault();  
            $("#mask, .window").hide();  
        });       
 
        //검은 막을 눌렀을 때
        $("#mask").click(function () {  
            $(this).hide();  
            $(".window").hide();  
 
        });      
 
    });
 
//]]>
</script>
</head>
<body>
    <div id ="wrap"> 
        <div id = "container">  
            <div id="mask"></div>
            <div class="window">
                <p style="width:1000px;height:500px;text-align:center;vertical-align:middle;">팝업 내용 입력</p>
                <p style="text-align:center; background:#ffffff; padding:20px;"><a href="#" class="close">닫기X</a></p>
            </div>
            <table border="0" cellpadding="0" cellspacing="0" width="100%">       
                <tr>
                    <td align="center">
                    <a href="#" class="openMask">레이어 팝업 발생</a>
                    </td>
                </tr>       
            </table>
        </div>
    </div>
</body>
</html>
cs


저작자표시

'웹프로그래밍 > JQUERY' 카테고리의 다른 글

jQuery 타이머 / jQuery 타이머 만들기 / 스톱, 스타드 구현  (0) 2019.11.01
[ jquery ] 이미지 슬라이더 / 탭 슬라이더 / setInterval / 슬라이더 만들기  (2) 2016.07.01
jQuery 4일째 (ajax)  (0) 2014.07.31

[ jquery 슬라이더 ] 이미지 슬라이더 / 탭 슬라이더 / setInterval 




단순하게 인터벌 함수를 이용해서 만든 슬라이더 함수이다.


아직 추가할 기능이 몇 가지 남아있지만 기본적인 작동 원리를 이해하기에는

괜찮은 예제인 것 같다.


 - 탭 위에 마우스를 가져다가 되면 슬라이딩 정지

 - 배너위에 마우스를 올리면 슬라이딩 정지


위 두가지 기능은 다음 포스팅에서 다루기로 하고..


아래 예제는 display:none 을 사용하지 않고  visibility:hidden 과 position:absolute 속성을 이용해서

만들어 졌다.





예제 1)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<head>
<style>
ul,li{list-style:none;}
#TopSlider{width:500px; height:300px; border:1px solid #d2d2d2;}
#TopSlider div{width:498px;height:298px; float:left; visibility:hidden; position:absolute;}
#top_0{background-color:red;}
#top_1{background-color:blue;}
#top_2{background-color:gray;}
#top_3{background-color:yellow;}
#ul_btns{float:left; width:420px; border:1px solid #e0e0e0;}
#ul_btns a{float:left; width:100px; border:1px solid #e0e0e0;}
#ul_btns .on{background-color:red;}
 
</style>
<script    src="https://code.jquery.com/jquery-3.0.0.min.js" 
        integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   
        crossorigin="anonymous"></script>
<script>
 
    var intv;
    var current = 0;
    var sIdx = 0;
    var sCnt =  4;
    
 
    function startTopSlider() {
        intv = setInterval(function () {
            $("#ul_btns").find("a").eq(current++ % sCnt).click();
        }, 3000);
    }
 
    function setBnr(idx, bnr, allTab, addCls) {
        $(bnr).css("visibility", "hidden")
              .eq(idx).css("visibility", "visible");
        $(allTab).removeClass(addCls);
        $(allTab).eq(idx).addClass(addCls);
    }
 
    $(document).ready(function () {
        
        //set init
        $("#top_0").css("visibility", "visible");
        $("#btn_0").addClass("on");
        startTopSlider();
        
        
        $("#ul_btns").find("a").click(function(){
            var idx = $(this).attr("id").split("_")[1];
            setBnr(idx, "#TopSlider > div" , "#ul_btns > a" , "on" );
            
        });
 
        
    });
</script>
 
</head>
<body>
    <p>setInterval 을 이용한 슬라이더 예제</p>
    <div id="TopSlider">
        <div id="top_0">배너 0</div>
        <div id="top_1">배너 1</div>
        <div id="top_2">배너 2</div>
        <div id="top_3">배너 3</div>
    </div>
    <div id="TopSliderBtn">
        <ul id="ul_btns">
            <a href="#" id="btn_0"><li>tab0</li></a>
            <a href="#" id="btn_1"><li>tab1</li></a>
            <a href="#" id="btn_2"><li>tab2</li></a>
            <a href="#" id="btn_3"><li>tab3</li></a>
        </ul>
    </div>
</body>
</html>
 
 
cs




디자인이 아주 부끄럽지만.. 디자인을 보려고 만든 예제는 아니니까 이해하고 넘어가도록 하자.


tab0 -> tab1 -> tab2 -> tab3 으로 이동하면서 배너 0 ~~> 배너 3 까지 노출 되는 방식이다.




예제 1 - 결과화면 )






간단하게 예제를 만드려고 노력했는데, 만들고 나니 다소 복잡한 것 같기도 하다.



예제파일 : 

test.html


display:none 과 visibility:hidden 의 차이는 아래 포스팅을 참고하도록 하자!



http://gyunbox.tistory.com/entry/visibility



"끝"






저작자표시

'웹프로그래밍 > JQUERY' 카테고리의 다른 글

jQuery 타이머 / jQuery 타이머 만들기 / 스톱, 스타드 구현  (0) 2019.11.01
[ jquery ] 팝업 마스크 / 레이어 팝업 / 배경이 가려진 팝업 뛰우기  (3) 2016.07.29
jQuery 4일째 (ajax)  (0) 2014.07.31

Sizzle - > selector 기반의 Dom Handler

Qunit - > javascript 기반의 단위테스트 도구

 

저작자표시

'웹프로그래밍 > JQUERY' 카테고리의 다른 글

jQuery 타이머 / jQuery 타이머 만들기 / 스톱, 스타드 구현  (0) 2019.11.01
[ jquery ] 팝업 마스크 / 레이어 팝업 / 배경이 가려진 팝업 뛰우기  (3) 2016.07.29
[ jquery ] 이미지 슬라이더 / 탭 슬라이더 / setInterval / 슬라이더 만들기  (2) 2016.07.01

+ Recent posts

티스토리툴바