Heim > Artikel > Web-Frontend > Teilen Sie mit, wie Sie das jQuery-Sektor-Timer-Plug-In Pietimer verwenden
Teilen Sie mit, wie Sie das jQuery-Sektor-Timer-Plug-In Pietimer verwenden
- 小云云Original
- 2017-12-31 16:55:451651Durchsuche
Pietimer ist ein Timer-Plug-in, das eine fächerförmige Änderung auf der Seite erzeugen kann. Es basiert auf jQuery. Sie können die Timing-Zeit in Sekunden anpassen, die fächerförmige Farbe, Breite und Höhe usw. anpassen. und unterstützt eine Rückruffunktion, wenn die Zeitmessung endet. Sie können den Start und die Pause steuern, was für Seiten geeignet ist, die Timer erfordern, wie z. B. Online-Prüfungen, Countdowns, zeitlich begrenzte Verkäufe usw. Dieser Artikel stellt hauptsächlich die Verwendung des jQuery-Sektor-Timer-Plug-Ins Pietimer vor. Ich hoffe, dass er jedem helfen kann.
Die Parameter lauten wie folgt:
Rendering:
Der Democode lautet wie folgt :
<!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>Verwandte Empfehlungen:
JS-Timer für einfache Animationseffekte
Timer in JavaScript Detaillierte Erläuterung des Setzens und Löschens
Detaillierte Erläuterung von setTimeout() und setInterval() in JavaScript-Timern
Das obige ist der detaillierte Inhalt vonTeilen Sie mit, wie Sie das jQuery-Sektor-Timer-Plug-In Pietimer verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!