javascript

1
2
3
4
5
6
7
8
9
10
window.addEventListener("scroll", function () {
  const SCROLLED_HEIGHT = window.scrollY;
  const WINDOW_HEIGHT = window.innerHeight;
  const DOC_TOTAL_HEIGHT = document.body.offsetHeight;
  const IS_BOTTOM = WINDOW_HEIGHT + SCROLLED_HEIGHT === DOC_TOTAL_HEIGHT;
 
  if (IS_BOTTOM) {
    alert('is bottom');
  }
});
 cs

ref : https://hye-on-astrogrammer.tistory.com/21

 

+) 응용.

스크롤이 없는 페이지에서 자동적으로 나오게 하고싶다면?

함수로 따로 떼어서 진행한다. 

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
//스크롤시
window.addEventListener("scroll", function () {
    check_scroll_appear_footer();
});
 
//DOM로드시
document.addEventListener("DOMContentLoaded", function(){
     check_scroll_appear_footer();
});
 
function check_scroll_appear_footer(){
 
    const SCROLLED_HEIGHT = window.scrollY;
    const WINDOW_HEIGHT = window.innerHeight;
    const DOC_TOTAL_HEIGHT = document.body.offsetHeight;
    let is_bottom = WINDOW_HEIGHT + SCROLLED_HEIGHT === DOC_TOTAL_HEIGHT;
 
    //문서의 총길이가 창길이보다 작으면 스크롤이 발생되지 않으므로 바닥이 보이는 상태로 설정한다.
    if(DOC_TOTAL_HEIGHT < WINDOW_HEIGHT){ is_bottom = true; }
 
    if (is_bottom) {
        alert('IS_BOTTOM'); //바닥이 붙거나 스크롤이 없을때
    }else{
        alert('IS_NOT_BOTTOM'); //바닥에서 떨어질때
    }
 
}
 cs

'JQuery|JavaScript' 카테고리의 다른 글

아코디언 메뉴(게시판)  (0) 2016.12.28
클릭을 카운트하여 경고창을 내보냄.  (0) 2016.11.23
클릭시 숫자를 증가시키는 버튼  (0) 2016.11.23


1
2
3
4
5
6
<div class="heading">
    <!-- 제목으로 보일부분 -->
</div>
<div class="content">
    <!-- 클릭시 보여질 부분 -->
</div>
cs

간단한 html. 안쪽에 구현한다.

class를 기준으로 한다.


1
2
3
4
5
6
7
8
9
$(document).ready(function() {
  $(".content").hide();
  //content 클래스를 가진 div를 표시/숨김(토글)
  $(".heading").click(function()
  {
    $(this).next(".content").slideToggle(500);
    $("i", this).toggleClass("fa-chevron-down fa-chevron-up");
  });
});
cs

상위가 클릭하고 그 아래쪽으로 나오는 부분을 toggle 로 보여지게 하는 부분.


i 는 font awsome의 아이콘. down 아이콘이 기본 클릭시 up. 이다


toggle의 경우. jquery 자체 세션으로 이전 display를 기억한다.


즉 이전 display가 inline 이면 다른 값을 주지 않으면 inline 으로 돌아간다고..



이런느낌..



'JQuery|JavaScript' 카테고리의 다른 글

[javascript] 스크롤 바닥에 닿았을때 동작(onload)  (0) 2022.11.14
클릭을 카운트하여 경고창을 내보냄.  (0) 2016.11.23
클릭시 숫자를 증가시키는 버튼  (0) 2016.11.23

click을 count하려 alert창을 띄웁니다.


응용해서. 버튼태그이면 이미지를 보여준다거나 href로 이동시킬수도 있네요 nok! nok! nok!


input은 몇번째 클릭인지 알려주기위해 만들었습니다.

ㅇ3ㅇ 필요없으면 삭제 ㅋ


0부터시작하여 5번째일경우 Boom!! 하는 경고창을 띄웁니다.



<input type='text' id='btn_result' value='0' />

<input type='button' value='버튼' onclick='button_onclick()' />


var count = 0;

function button_onclick(){
count++;
if(count == 5){
alert("boom!!!");
count = 0; //5번째일때 카운트 초기화 : 다시 5번째일때 alert가 뜬다.
}
$("#btn_result").attr('value', count); //숫자를 보기위한 input에 카운팅된 숫자를 넣는다.
}

input을 selector.
on function.click으로 해서 전체를 만들면 숫자를 바꾸기위해 클릭을 n번 눌럿을때 boom! 하고 이벤트를 띄울수 있겠네요.



'JQuery|JavaScript' 카테고리의 다른 글

[javascript] 스크롤 바닥에 닿았을때 동작(onload)  (0) 2022.11.14
아코디언 메뉴(게시판)  (0) 2016.12.28
클릭시 숫자를 증가시키는 버튼  (0) 2016.11.23

 

저런 모양으로 숫자버튼을 클릭하면 해당 버튼모양의 아이콘 숫자가 변경되는 방식입니다.

 

JQuery를 이용합니다.
-숫자를 클릭하면 해당 버튼모양에 숫자가 쌓이는 방식입니다.
-0~9로만 변경됩니다.(예:숫자자물쇠 퍼즐용)
-값받아서 보낼 목적으로 input을 이용합니다.

-역순이 될경우 "+"를  "-"로 바꾸면 됩니다.

-개인적으로는 onclick 함수가 보이지 않는 2번 구현을 좋아합니다.

순서는 다음과 같습니다.
1. 클릭시 (해당 위치에 입력되어있는)값을 가져온다. 
2. 숫자가있다면 +1처리, 9인경우 0.
3. 값이 있던 곳에 계산된 숫자를 넣어준다. 

 

/* 1번 방식*/ 

<input type='button' class="btn btn-default " onclick = "count_num(this);" value='0' >

<input type='button' class="btn btn-default " onclick = "count_num(this);" value='1' >

<input type='button' class="btn btn-default " onclick = "count_num(this);" value='2' >

<input type='button' class="btn btn-default " onclick = "count_num(this);" value='3' >

 
:스크립트
1
2
3
4
5
6
7
8
9
10
11
<script>
function count_num(num){
    var number = ($(num).attr('value'));
    if(number==9){     // 숫자가 9라면 0으로 만든다.
        $(num).attr('value', '0'); //초기화 : 0 
    }else{
        var plus_num = parseInt(number) + 1; //숫자화해서 1을 추가한다(역순카운트일경우 -1)
        $(num).attr('value', plus_num);
    }
}
</script>
 cs
 
/* 2번 방식*/
 
<input type='button' class="btn btn-default chkcount" value='0' >
<input type='button' class="btn btn-default chkcount" value='1' >
<input type='button' class="btn btn-default chkcount" value='2' >
<input type='button' class="btn btn-default chkcount" value='3' >

 

:스크립트

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
 
$('input').on({ //원하는 target을 입력하면 됨. .chkcount를 사용해도 됨.
 
    "click" : function(){ // "click"이 발생할때
        
        var number = ($(this).attr('value')); // 해당 발생한값의 value를 가져온다.
 
        if(number==9){ // 숫자가 9라면
            $(this).attr('value', '0'); // 숫자가 9라면 0으로 만든다.
        }else{ //9 가 아니라면
            var plus_num = parseInt(number) + 1; //+1을 증가. 
            $(this).attr('value', plus_num); //해당값을 적용해준다.
        }
 
    }
 
});
</script>
 cs

 

'JQuery|JavaScript' 카테고리의 다른 글

[javascript] 스크롤 바닥에 닿았을때 동작(onload)  (0) 2022.11.14
아코디언 메뉴(게시판)  (0) 2016.12.28
클릭을 카운트하여 경고창을 내보냄.  (0) 2016.11.23

+ Recent posts

티스토리툴바