클릭 할 때 카운트 다운을 1로 줄여서 카운트 다운이 0에 도달하면 창을 엽니 다.

스노 라브

반대 투표자가 이유를 남길 수 있다면. 그것은 좋을 것입니다.

내 웹 페이지에 10의 값과 버튼이 있다고 가정 해 보겠습니다.

사용자가이 버튼을 클릭 할 때마다 1 씩 감소하는 값을 시각적으로 표시하고 싶습니다.

값이 0이면 (10 회 클릭 후) div를 숨기고 다른 div를 표시합니다.

하지만 버튼을 클릭하면 카운터를 1 씩 줄여야 할뿐만 아니라 창을 열어야합니다. (클릭 할 때마다 같은 창)

클릭 할 때마다 style = "width : x %"``를 10-20-30 % 등으로 변경하고 싶습니다. (그러나 5 초 지연)

누구든지 코드의 양에 과도하지 않고이 모든 것을 수행하는 방법에 대한 아이디어를 가지고 있습니까?

단계는 다음과 같습니다.

  • 클릭 버튼
  • 창이 열립니다
  • 카운터는 10에서 9로 이동합니다.
  • 5 초 후 진행률 표시 줄의 스타일이
    width: 10%;

...

카운터가 0에 도달 :

  • div X 숨기기 (페이드 아웃)
  • div X 표시

소스 코드:

function countdown() {
    var i = document.getElementById('counter');
    if (parseInt(i.innerHTML)<=0) {
        //hide div
        //show div
    }
    i.innerHTML = parseInt(i.innerHTML)-1;
    window.open("");
    //change loader
}
야콥 레이 펠름

이 코드는 원하는 솔루션 일 수 있습니다.

function countdown() {
  var i = document.getElementById('counter');
  if (parseInt(i.innerHTML)<=0) {
    $("#counter").fadeout();
    i.innerHTML =10;
    i.style.width="100%";
    $("#counter").fadein(10);
  } else {
    i.innerHTML = parseInt(i.innerHTML)-1;
    setTimeout(function(){
      var i = document.getElementById('counter');
      i.style.width="10%";
      i.innerHTML="1";
    },5000)
  }
  var msg = window.open("", "Window name", "width=200, height=100");
  msg.document.write("Some HTML");
}

html 헤드에 jquery를 추가해야합니다! 코드가 도움이되지 않으면 코멘트를 남겨주세요.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

카운트 다운 타이머에서 카운트 다운을 표시하려면 어떻게합니까

분류에서Dev

Jquery : 다음 페이지로 이동할 때 카운트 다운을 재설정하면 안됩니다.

분류에서Dev

Jquery : 다음 페이지로 이동할 때 카운트 다운을 재설정하면 안됩니다.

분류에서Dev

0에 도달하면 카운트 다운 타이머에 "0"을 추가합니다.

분류에서Dev

음수 카운트 다운을 계속하는 대신 새로 고침 타이머가 0에 도달하면 텍스트를 표시하도록합니다.

분류에서Dev

행을 검색 할 때 카운트는 0으로 돌아옵니다.

분류에서Dev

자동 카운트 다운하는 방법, 클릭 자바 스크립트에서 계속 카운트 다운

분류에서Dev

1 시간 후에 카운트 다운을 시작하는 자바 스크립트에서 카운트 다운 타이머 만들기

분류에서Dev

이 자바 스크립트 카운트 다운을 0에서 중지하고 싶습니다.

분류에서Dev

카운트 다운 타이머는 분과 초가 0 일 때 시간을 줄이지 않습니다.

분류에서Dev

카운트 다운 시간 (H : i : s)을 사용하여 jquery 또는 js에 대한 메이커 카운트 다운 타이머는 어떻게됩니까?

분류에서Dev

클릭시 다른 페이지로 리디렉션되는 동시에 카운트 다운을 시작하려면 어떻게해야합니까?

분류에서Dev

Java에서 가변 길이 정수 배열을 0으로 카운트 다운

분류에서Dev

자바 스크립트 카운트 다운 문제. 버튼을 클릭 할 때마다 clearInterval을 원함

분류에서Dev

카운트 다운 시간을 설정하고 마감 시간을 PHP로 줄이고 싶습니다.

분류에서Dev

Rainmeter에서이 카운트 다운을 다시 시작하려면 어떻게해야합니까?

분류에서Dev

kivy / python에서 화면을 변경하는 카운트 다운 / 타이머

분류에서Dev

카운트 다운 타이머가 모달 창 부트 스트랩을 표시하도록합니다.

분류에서Dev

0 일 때 카운트 다운이 잘 작동하지 않습니다.

분류에서Dev

마크 다운 파일을 두 번 클릭 할 때 gedit 대신 atom을 사용하여 마크 다운 파일을 엽니 다.

분류에서Dev

서버 측 Node.JS에서 시간을 카운트 다운하고 페이지 응답을 보냅니다.

분류에서Dev

새로운 다른 필드가 다시 1로 나타나고 카운트 업할 때 Oracle 함수 카운트를 1에서 찾고

분류에서Dev

카운트를 사용할 때 SQL 쿼리가 0을 반환합니다.

분류에서Dev

카운트 다운을 완료하는 데 남은 시간이 30 분 밖에 남지 않은 상태에서 카운트 다운 타이머의 배경 또는 텍스트 색상을 녹색으로 변경하는 방법은 무엇입니까?

분류에서Dev

시간 카운트 다운이 0 : 0.0에서 멈추지 않고 else 문에 도달하지 않습니다.

분류에서Dev

30 초에서 0 초로 카운트 다운하여 Xamarin.Forms C #을 사용하여 마지막 초에 소수점 2 자리를 표시합니다.

분류에서Dev

C에서 밀리 초 카운트 다운을 수행하는 가장 쉬운 방법은 무엇입니까?

분류에서Dev

PHP에서 카운트 다운으로 변경하고 싶습니다.

분류에서Dev

실행중인 카운트 다운 타이머에서 시간을 빼려면 어떻게합니까?

Related 관련 기사

  1. 1

    카운트 다운 타이머에서 카운트 다운을 표시하려면 어떻게합니까

  2. 2

    Jquery : 다음 페이지로 이동할 때 카운트 다운을 재설정하면 안됩니다.

  3. 3

    Jquery : 다음 페이지로 이동할 때 카운트 다운을 재설정하면 안됩니다.

  4. 4

    0에 도달하면 카운트 다운 타이머에 "0"을 추가합니다.

  5. 5

    음수 카운트 다운을 계속하는 대신 새로 고침 타이머가 0에 도달하면 텍스트를 표시하도록합니다.

  6. 6

    행을 검색 할 때 카운트는 0으로 돌아옵니다.

  7. 7

    자동 카운트 다운하는 방법, 클릭 자바 스크립트에서 계속 카운트 다운

  8. 8

    1 시간 후에 카운트 다운을 시작하는 자바 스크립트에서 카운트 다운 타이머 만들기

  9. 9

    이 자바 스크립트 카운트 다운을 0에서 중지하고 싶습니다.

  10. 10

    카운트 다운 타이머는 분과 초가 0 일 때 시간을 줄이지 않습니다.

  11. 11

    카운트 다운 시간 (H : i : s)을 사용하여 jquery 또는 js에 대한 메이커 카운트 다운 타이머는 어떻게됩니까?

  12. 12

    클릭시 다른 페이지로 리디렉션되는 동시에 카운트 다운을 시작하려면 어떻게해야합니까?

  13. 13

    Java에서 가변 길이 정수 배열을 0으로 카운트 다운

  14. 14

    자바 스크립트 카운트 다운 문제. 버튼을 클릭 할 때마다 clearInterval을 원함

  15. 15

    카운트 다운 시간을 설정하고 마감 시간을 PHP로 줄이고 싶습니다.

  16. 16

    Rainmeter에서이 카운트 다운을 다시 시작하려면 어떻게해야합니까?

  17. 17

    kivy / python에서 화면을 변경하는 카운트 다운 / 타이머

  18. 18

    카운트 다운 타이머가 모달 창 부트 스트랩을 표시하도록합니다.

  19. 19

    0 일 때 카운트 다운이 잘 작동하지 않습니다.

  20. 20

    마크 다운 파일을 두 번 클릭 할 때 gedit 대신 atom을 사용하여 마크 다운 파일을 엽니 다.

  21. 21

    서버 측 Node.JS에서 시간을 카운트 다운하고 페이지 응답을 보냅니다.

  22. 22

    새로운 다른 필드가 다시 1로 나타나고 카운트 업할 때 Oracle 함수 카운트를 1에서 찾고

  23. 23

    카운트를 사용할 때 SQL 쿼리가 0을 반환합니다.

  24. 24

    카운트 다운을 완료하는 데 남은 시간이 30 분 밖에 남지 않은 상태에서 카운트 다운 타이머의 배경 또는 텍스트 색상을 녹색으로 변경하는 방법은 무엇입니까?

  25. 25

    시간 카운트 다운이 0 : 0.0에서 멈추지 않고 else 문에 도달하지 않습니다.

  26. 26

    30 초에서 0 초로 카운트 다운하여 Xamarin.Forms C #을 사용하여 마지막 초에 소수점 2 자리를 표시합니다.

  27. 27

    C에서 밀리 초 카운트 다운을 수행하는 가장 쉬운 방법은 무엇입니까?

  28. 28

    PHP에서 카운트 다운으로 변경하고 싶습니다.

  29. 29

    실행중인 카운트 다운 타이머에서 시간을 빼려면 어떻게합니까?

뜨겁다태그

보관