在线Html5 Canvas圆形计时器_Javascript秒表特效源代码

本Demo是一款html5 canvas圆形计时器源代码、并使用了非常好看的动画特效、Demo是一款简单实用的带有开始暂停按钮的60秒一分钟圆形计时器、效果非常不错、js代码已经封装好了、只需要在index.html里面简单调用即可、效果图如下

JS引入

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pietimer.min.js"></script>

HTML代码

<div class="demo">
    <p>
        <a href="#" id="start" class="btn">开始</a>
        <a href="#" id="pause" class="btn">暂停</a>
    </p>
    <br/>	
    <p id="demo"></p>
    <p class="boom">时间到！</p>
</div>

JS代码

$(function(){    
    $(´.boom´).hide();    
    
    $(´#demo´).pietimer({
        seconds: 60,
        color: ´rgba(0, 0, 0, 0.8)´,
        height: 100,
        width: 100
    },function(){
        $(´.boom´).show(´slow´);
    });
        
    $(´a#start´).click(function(){
        $(´.boom´).hide();
        $(´#demo´).pietimer(´start´);
        return false;
    });
    $(´a#pause´).click(function(){
        $(´#demo´).pietimer(´pause´);
        return false;
    });
});

最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1dDkCuYl 密码: jdw8