jquery和CSS3圆形倒计时特效

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

预览 下载

使用方法

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

html 复制代码
<link href="css/style.css" rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
HTML结构
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>
初始化插件
javascript 复制代码
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";
// });     
相关推荐
培根芝士12 分钟前
使用 Canvas 替代 <video> 标签加载并渲染视频
前端·javascript·音视频
小螺号dididi吹43 分钟前
菜鸟速通:React入门 01
前端·react.js·前端框架
Lstmxx1 小时前
解放前端生产力:我如何用 LLM 和 Bun.js 构建一个 YApi to TypeScript 的自动化代码生成服务
前端·ai编程·mcp
持续前行1 小时前
vue3 : 导出pdf , 除iframe之外 ,还有其他内容一并导出方式
前端·javascript·vue.js
唐某人丶1 小时前
前端仔如何在公司搭建 AI Review 系统
前端·人工智能·aigc
没有鸡汤吃不下饭1 小时前
排查vue项目线上才会出现的故障
前端·vue.js·nginx
吃饭睡觉打豆豆嘛1 小时前
React Router 传参三板斧:新手也能 5 秒做决定
前端
裘乡1 小时前
storybook配合vite + react生成组件文档
前端·react.js
Carolinemy1 小时前
ElementUI 之 el-table
前端·vue.js
裘乡1 小时前
vonage音视频基本使用--web@opentok/client
前端·音视频开发