Pietimer는 페이지에서 부채꼴 모양의 변화를 생성할 수 있는 타이머 플러그인입니다. jQuery를 기반으로 하며 타이밍 시간을 초 단위로 사용자 정의할 수 있고 부채꼴 색상, 너비 및 높이 등을 사용자 정의할 수 있습니다. 시작 및 일시 정지를 제어할 수 있는 타이밍 종료 시 콜백 기능을 지원하며 온라인 시험, 카운트다운, 기간 한정 판매 등과 같이 타이머가 필요한 페이지에 적합합니다. 이 글은 주로 jQuery 섹터 타이머 플러그인 파이타이머(pietimer)를 사용하는 방법을 자세히 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.
매개변수는 다음과 같습니다.
렌더링:
데모 코드는 다음과 같습니다.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pietimer-基于jQuery的扇形定时器</title>
<style type="text/css">
.start,.pause{display:block;margin:10px auto;background:#0ABF5D;border-radius:6px;width:100px;height:30px;line-height:30px;color:#fff;text-align:center}
.demo{margin:20px auto;text-align:center}
</style>
</head>
<body>
<a class="start">start开始</a>
<a class="pause">pause暂停</a>
<p class="demo"></p>
<script type="text/javascript" src="/static/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="script/jquery.pietimer.min.js"></script>
<script type="text/javascript">
$(function(){
$('.demo').pietimer({
seconds: 2,
color: 'rgba(10, 191, 93, 0.8)',
height: 60,
width: 60,
//is_reversed: true //是否逆时针转
},
function(){
//回调函数
console.log("结束咯！");
});
$('.start').click(function(){
$('.demo').pietimer('start');
return false;
});
$('.pause').click(function(){
$('.demo').pietimer('pause');
return false;
});
});
</script>
</body>
</html>관련 권장 사항:
타이머 JavaScript로 설정 및 삭제에 대한 자세한 설명
JavaScript 타이머의 setTimeout() 및 setInterval()에 대한 자세한 설명
위 내용은 jQuery 섹터 타이머 플러그인 Pietimer 사용법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
