jQuery环型进度倒计时

所属分类:UI,输入-圆边,日期和时间

 22738  279  查看评论 (2)
分享到微信朋友圈
X
jQuery环型进度倒计时 ie兼容12

使用方法

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

<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";
// });
相关插件-圆边,日期和时间

圆边

方形切换成圆边
  圆边
 29671  338

完美支持IE圆角/阴影等CSS3样式

让ie6也完美支持IE圆角/阴影等CSS3样式
  圆边
 46170  455

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    wikinomics 0
    2019/6/21 20:51:57
    这个查件样式不错, 支持的浏览器多 回复
    贝加尔湖 0
    2019/6/1 15:23:15
    这插件演示里面怎么用的,我不明白,而且倒计时动态条的样式不齐 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复