jQuery計時器轉圈是一種非常常見的特效,可以用于展示倒計時、加載過程等,下面我們就來介紹一下如何使用jQuery實現這一效果。
<div class="circle"></div> <p id="time"></p>
首先,我們需要在HTML中添加一個圓形的div,以及一個用于展示倒計時的p標簽。接下來,我們通過CSS將div設置為一個圓形,并設置其中心點為div的中心。
.circle { width: 100px; height: 100px; margin: 20px auto; position: relative; border-radius: 50%; background-color: #ccc; } .circle::before { content: ''; width: 50%; height: 50%; border-radius: 50% 0 0 50%; position: absolute; top: 0; left: 0; background-color: #f00; transform-origin: 100% 100%; }
接下來,我們使用jQuery編寫計時器的代碼。
$(function() { var time = 10; // 設置倒計時時間 var count = 0; // 記錄當前轉動的角度 var timer = setInterval(function() { count += 6; // 角度加6 $('.circle::before').css('transform', 'rotate(' + count + 'deg)'); // 旋轉圓弧 $('#time').text(time--); // 更新倒計時 if (time < 0) { // 判斷是否到達倒計時結束時間 clearInterval(timer); } }, 1000); });
在代碼中,我們首先設置了倒計時時間和角度的初始值,然后使用setInterval周期性地更新角度和倒計時。在更新角度時,我們使用css函數設置旋轉的角度,通過計算變化的角度來實現圓形轉動的效果。最后,當倒計時結束時,我們清除計時器。
通過上面的代碼,我們可以輕松實現一個簡單的jQuery計時器轉圈效果,如果你有更多的需求,可以根據需要進行修改。
上一篇div csss實戰