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";
// });