倒计时超期图标制作

前端时间美工有出图做一个事件还剩时间的动态图标.
因为页面是在首页,希望可以动态改变剩余的时间,效果如下图:

这功能的确挺让人眼前一亮的,于是想分享一下当时自己写的框架.
框架是基于canvas去做的.

先给个源码demo链接:
动态倒计时图标

demo效果:

demo中的common.js是一些简单的时间处理函数,其他地方抄来的,我很多地方都会用common.js就不细说了.

框架源码里有几个常量说一下:

• var CANVAS_WIDTH = 64; 定义绘制图片的canvas的宽高,最终图片会是拉伸状态,最好是和最后生成的图片宽高相同.
• var FONT_SIZE = 13; 绘制图片上的文字字体大小,这个是和宽高联合调整的,宽高大了,字当然也要相对调整大.
• var CLOCK_FONT_SIZE = 10; 这个是画时钟里面那个字的大小(本人写的是 "超" 字,时间超了后会显示)
• var IMAGE_COLOR_ARRAY = [{overValue:,color:},...] 这个数组是定义剩余不同时间,时钟所显示的颜色.要按照overValue降序排列,第一个必然是overValue=null,
  表示默认显示颜色.

程序框架默认剩余分秒状态下会自动更新,超过1天的状态就不更新了,如果有需要也可以把超过1天的状态的也加入更新,更新位置在下面函数过程中,比较简单,就不多做说明.
程序返回一个毫秒数,在setTimeout函数中会调用.

//下一次更新图片的时间.
function nextUpdateTime(timeObject) {
    var obj = timeObject;
    var sDate;
    var num;
    if(obj.day != 0) return 0; //不用更新了.

    if(obj.hour != 0) {
        //未验证,应该没问题,如果有问题改成1分钟刷一次好了
        var s = obj.minute % 3600;
        if(s < 0) s = 3600 + s;
        if(s == 0) {
            s = Math.abs(obj.hour) > 1 ? 3600 : 60;
        }
        num = s * 1000;

    } else if(obj.minute != 0) {

        var s = obj.second % 60;
        if(s < 0) s = 60 + s;
        if(s == 0) {
            s = Math.abs(obj.minute) > 1 ? 60 : 1;
        }
        num = s * 1000;

    } else {
        num = 1000;
    }
    return num;

}

发现什么问题的,欢迎联系作者邮箱^_^