타이머 기간 동안 카운트 업하는 Flipclock

Daniyal dehleh

나는 플립 클럭이 다운 대신 카운트 업하고 스톱워치처럼 멈추고 리셋 할 수 있기를 원합니다. 나는 그들이 특정 기간 (즉, 30 분)까지 카운트 다운하는 많은 플립 클록 카운트 다운 타이머를 발견했다. 날짜 대신 특정 기간으로 카운트 업하여 중지 및 재설정 할 수있는 방법이 궁금합니다.

codepen 에서 샘플을 빌 렸습니다 .

HTML

<br />
<div class="clock" id="clock1"></div>

CSS

#clock1 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 700px;
    margin-left: -350px; /*set to a negative number 1/2 of your width*/
    height:100px;
    margin-top: -60px; /*set to a negative number 1/2 of your height*/
}

JS

// Just for running purpose
//=======================================
var start = new Date();
start.setDate(start.getDate());
start.setHours(0,0,0,0)
//======================================
var now   = new Date();

var diff = (now.getTime() - start.getTime()) / 1000;

    var clock = $('#clock1').FlipClock(diff, {
        clockFace: 'HourlyCounter',
        countdown: false,
        showSeconds: false
    });

안타깝게도 사이트 가 참조 용으로 다운 되었다고 생각합니다 .

예 : diff30 초로 교체하면 . 이 계산됩니다 에서 30 대신 30 초.

Nemo9703

좋아, 다음은 나를 위해 일한 것입니다.

JS :

var clock = $('.clock').FlipClock(0, {
clockFace: 'DailyCounter',
countdown: false });
function reset(){
  clock = $('.clock').FlipClock(0, {
    clockFace: 'DailyCounter',
    countdown: false });
}
function stop(){
  clock.stop();
}
countup = setInterval(function() { 
     if(clock.getTime().time > 30) { 
       clock.stop();
       clearInterval(countup);
     }
    },500); 

HTML :

<br />
<button style="width:200px; height: 50px;"onclick="reset()">Reset</button>
 <button style="width:200px; height: 50px;"onclick="stop()">Stop</button>                                                         
<div class="clock" id="clock1"></div>

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

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

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

카운트 업 타이머 꾸미기

분류에서Dev

시작 시간이 걸리는 카운트 다운 타이머

분류에서Dev

JavaFX에서 카운트 다운 타이머를 동기화하는 가장 좋은 방법

분류에서Dev

동적 날짜가있는 카운트 다운 타이머

분류에서Dev

카운트 다운 타이머 카운터가 작동하지 않음

분류에서Dev

곧 페이지를 만드는 동안 카운트 다운 타이머가 작동하지 않습니다.

분류에서Dev

다른 시간 설정 안드로이드 카운트 다운 타이머

분류에서Dev

안드로이드의 초간단 js 카운트 다운 타이머?

분류에서Dev

간격 타이머를 사용하여 카운트 증가

분류에서Dev

어떻게 HH에서 카운트 다운 타이머를 표시하기 : MM : SS (영업 시간 : 분 : 초)

분류에서Dev

jQuery 360 카운트 다운-타이머가 실행되는 동안 초를 추가하는 버튼

분류에서Dev

시간을 표시하지 않는 카운트 다운 타이머

분류에서Dev

PHP를 사용하는 카운트 다운 타이머, 작동하지 않음

분류에서Dev

ASP.NET C # AJAX 컨트롤 카운트 다운 타이머는 미래 시간이 하드 코딩 된 경우에만 작동합니다.

분류에서Dev

파이썬 3.4, 타이머 카운트 다운이 작동하지 않음

분류에서Dev

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

분류에서Dev

카운트 다운 타이머가 꺼지는 동안 게임 일시 중지 해제

분류에서Dev

플래시에서 카운트 다운 타이머를 만드는 동안 오류가 발생했습니다.

분류에서Dev

카운트 다운 타이머 및 진행률 표시 줄 동기화

분류에서Dev

카운트 다운 타이머 Android에서 분과 시간을 업데이트하지 않음

분류에서Dev

카운트 다운 타이머 Android에서 분과 시간을 업데이트하지 않음

분류에서Dev

연속 대신 동시에 실행되는 카운트 다운 타이머

분류에서Dev

분 / 초 카운트 다운 타이머가 작동하지 않습니까?

분류에서Dev

카운트 다운 타이머가 작동하지 않습니다.

분류에서Dev

카운트 다운 타이머가 작동하지 않습니다.

분류에서Dev

타이머를 사용하는 동안 데이터베이스 업데이트

분류에서Dev

자바 스크립트에서 카운트 업 타이머 만들기

분류에서Dev

카운트 업 타이머 표시

분류에서Dev

각도 2 카운트 업 타이머

Related 관련 기사

  1. 1

    카운트 업 타이머 꾸미기

  2. 2

    시작 시간이 걸리는 카운트 다운 타이머

  3. 3

    JavaFX에서 카운트 다운 타이머를 동기화하는 가장 좋은 방법

  4. 4

    동적 날짜가있는 카운트 다운 타이머

  5. 5

    카운트 다운 타이머 카운터가 작동하지 않음

  6. 6

    곧 페이지를 만드는 동안 카운트 다운 타이머가 작동하지 않습니다.

  7. 7

    다른 시간 설정 안드로이드 카운트 다운 타이머

  8. 8

    안드로이드의 초간단 js 카운트 다운 타이머?

  9. 9

    간격 타이머를 사용하여 카운트 증가

  10. 10

    어떻게 HH에서 카운트 다운 타이머를 표시하기 : MM : SS (영업 시간 : 분 : 초)

  11. 11

    jQuery 360 카운트 다운-타이머가 실행되는 동안 초를 추가하는 버튼

  12. 12

    시간을 표시하지 않는 카운트 다운 타이머

  13. 13

    PHP를 사용하는 카운트 다운 타이머, 작동하지 않음

  14. 14

    ASP.NET C # AJAX 컨트롤 카운트 다운 타이머는 미래 시간이 하드 코딩 된 경우에만 작동합니다.

  15. 15

    파이썬 3.4, 타이머 카운트 다운이 작동하지 않음

  16. 16

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

  17. 17

    카운트 다운 타이머가 꺼지는 동안 게임 일시 중지 해제

  18. 18

    플래시에서 카운트 다운 타이머를 만드는 동안 오류가 발생했습니다.

  19. 19

    카운트 다운 타이머 및 진행률 표시 줄 동기화

  20. 20

    카운트 다운 타이머 Android에서 분과 시간을 업데이트하지 않음

  21. 21

    카운트 다운 타이머 Android에서 분과 시간을 업데이트하지 않음

  22. 22

    연속 대신 동시에 실행되는 카운트 다운 타이머

  23. 23

    분 / 초 카운트 다운 타이머가 작동하지 않습니까?

  24. 24

    카운트 다운 타이머가 작동하지 않습니다.

  25. 25

    카운트 다운 타이머가 작동하지 않습니다.

  26. 26

    타이머를 사용하는 동안 데이터베이스 업데이트

  27. 27

    자바 스크립트에서 카운트 업 타이머 만들기

  28. 28

    카운트 업 타이머 표시

  29. 29

    각도 2 카운트 업 타이머

뜨겁다태그

보관