html5倒计时效果,jquery和CSS3圆形倒计时特效

这是一款jquery和CSS3圆形倒计时特效。该特效使用CSS对页面进行布局，生成用于倒计时的圆环，然后通过jquery代码来控制圆环的倒计时进度。

使用方法

在页面中引入下面的文件。

HTML结构

Min

Sec

开始

停止

初始化插件

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";

// });