在线Html5 Canvas圆形计时器_Javascript秒表特效源代码
2015-11-03 10:52:53  By: dwtedx

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

html5计时器


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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

DD记账
top
+