其他代码
CSS3圆形倒计时jQuery特效
PetitQ
这是一款 jquery 和 CSS3 圆形倒计时特效，该特效使用 CSS 对页面进行布局，生成用于倒计时的圆环，然后通过 jquery 代码来控制圆环的倒计时进度。
使用方法
在页面中引入下面的文件。
也想出现在这里？联系我们吧
<link href="css/style.css" rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
HTML 结构
<div class="flex-container">
<div class="outbox">
</div>
<!-- SVG AREA -->
<svg class="svg">
<circle id="cls" class="cls run-anim" cx="130" cy="130" r="125"></circle>
</svg>
<!-- SVG AREA END -->
<div class="control">
<div class="time">
<label for="min">
Min<input id="min" type="number" min="0" max="59" placeholder="mm" value="0" />
</label>
<label for="sec">
Sec
<input id="sec" type="number" min="0" max="59" placeholder="ss" value="0" />
</label>
</div>
<div class="action">
<button id="start" class="">
开始
</button>
<button id="reset" class="">
停止
</button>
</div>
</div>
</div>
初始化插件
let circle = document.getElementById('cls');
let total ;let start = $('#start');
start.click( ()=>{
let minute = document.getElementById('min').value;
let second = document.getElementById('sec').value;
// console.log("seconds:"+(minute*60)+"secs:"+second);total = (parseInt(minute)*60) + parseInt(second);
console.log("total:"+total);
circle.style.strokeDashoffset = "800";
circle.style.animationDuration = total+"s";
circle.style.animationPlayState = "running";
set(1000*total);
circle.classList.add("run-anim");
});
function set(total){
let interval = setInterval(ret,total);
function ret(){
confirm('Timer Completed! Press Reset');
circle.classList.remove("run-anim");
void circle.offsetWidth;
clearInterval(interval);
}}// let reset = $('#reset');// reset.click(()=>{// circle.style.animationPlayState = "paused";// });
Github 网址：https://github.com/Bhanu8047/Timer-Animation
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
