소스 코드 download_jquery를 사용하여 jQuery를 기반으로 구현된 섹터 타이머

렌더링은 다음과 같습니다.

효과 시연 소스코드 다운로드

Pietimer는 페이지에서 부채꼴 모양의 변화를 생성할 수 있는 타이머입니다. jQuery를 기반으로 하며 타이밍 시간을 초 단위로 사용자 정의할 수 있고 부채꼴 색상, 너비, 높이 등을 사용자 정의할 수 있으며 타이밍이 끝나면 콜백 기능을 제어하여 온라인 시험 및 기간 한정 판매 시나리오와 같이 타이머가 필요한 페이지에 적합합니다.

HTML

먼저 jquery 라이브러리 파일과 Pietimer.js 파일을 로드합니다.

<script src="jquery.min.js"></script> 
<script src="jquery.pietimer.min.js"></script> 

그런 다음 페이지에 "시작" 및 "일시 중지" 버튼을 배치하고 팬 그래픽 그리기를 위한 #demo 요소를 배치한 다음 예정된 완료를 묻는 .boom을 배치합니다.

<p><a href="#" id="start" class="btn">开始</a> <a href="#" id="pause" class="btn">暂停</a></p> 
<p id="demo"></p> 
<p class="boom">时间到！</p> 

jQuery

먼저 $('#demo').pietimer()를 통해 호출되는 #demo에 섹터를 그려야 합니다. 매개변수 second는 타이밍 시간(초)을 나타내고 color는 섹터의 색상을 나타냅니다. rgba를 통해 설정할 수도 있고, #FFFFFF와 같은 16진수 색상 값을 사용하여 너비와 높이는 섹터의 반경을 나타내며 후속 콜백 함수는 타이밍이 완료되면 트리거됨을 나타냅니다.

$(function(){  
 $('.boom').hide();  
 $('#demo').pietimer({ 
  seconds: , 
  color: 'rgba(, , , .)', 
  height: , 
  width: 
 }, 
 function(){ 
  $('.boom').show('slow'); 
 }); 
}); 

물론 위 코드는 섹터를 그리고 관련 매개변수 옵션을 정의하지만 실제로 타이머를 트리거하려면 $('#demo').pietimer('start')를 호출해야 하며 동일한 일시정지는 다음과 같습니다. : $('#demo').pietimer('pause'), 일시 중지한 후 "시작"을 클릭하여 타이머를 계속할 수도 있습니다.

$(function(){  
 $('a#start').click(function(){ 
  $('.boom').hide(); 
  $('#demo').pietimer('start'); 
  return false; 
 }); 
 $('a#pause').click(function(){ 
  $('#demo').pietimer('pause'); 
  return false; 
 });  
}); 

위 내용은 소스코드 다운로드와 함께 jQuery 기반의 팬 타이머에 대한 편집자의 소개입니다.