自己写一个倒计时Demo(类似于团购网站)

  今天与大家分享一下,倒计时的js函数,由于最近项目要用到倒计时的一个效果,和团购网站那种倒计时效果差不多。在网上也搜索了一下,没发现比较好的,于是乎自己写一吧~写起来也很简单,为了方便使用,我还是尽量的封装了一下。

  好吧,闲话少说,直接上代码吧...

function CountDown(end) { //end是结束时间
        var starttime = new Date();
        var endtime = new Date(Date.parse(end.replace(/-/g, "/")));
        var dvalue = parseInt((endtime.getTime() - starttime.getTime()) / 1000);
        var strtime="";
        if (dvalue > 0) {
            var day = parseInt(dvalue / 3600 / 24);
            if (day > 0) {//注意把int类型转化为string类型再判断length;
                if (day.toString().length > 1) {
                    strtime += "<span>" + day + "</span>" + "天";
                }
                else {
                    strtime += "<span>0" + day + "</span>" + "天";
                }
            }
            else {
                strtime += "<span>00</span>天";
            }
            var hour = parseInt((dvalue / 3600) % 24);
            if (hour > 0) {
                if (hour.toString().length > 1) {
                    strtime += "<span>" + hour + "</span>" + "小时";
                }
                else {
                    strtime += "<span>0" + hour + "</span>" + "小时";                    
                }                    
            }
            else {
                strtime += "<span>00</span>小时";
            }
            var minute = parseInt((dvalue / 60) % 60);
            if (minute > 0) {
                if (minute.toString().length > 1) {
                    strtime += "<span>" + minute + "</span>" + "分";
                }
                else {
                    strtime += "<span>0" + minute + "</span>" + "分"; 
                }                    
            }
            else {
                strtime += "<span>00</span>分";                
            }
            var second = parseInt(dvalue % 60);
            if (second.toString().length > 1) {
                strtime += "<span>" + second + "</span>" + "秒";
            }
            else {
                strtime += "<span>0" + second + "</span>" + "秒";
            }
            return (strtime);
        }
        else {
            //alert("时间已到!");
            return "";
        }
    }
    //调用方法
    function tick(obj, time) {
        $("#"+obj+"").html(CountDown(time));
        window.setTimeout("tick('"+obj+"','"+time+"')", 1000);
    }

  以上是主要的一个function代码,然后调用就行了。

  调用方法也很简单:

  <script type="text/javascript">
         tick("元素ID","结束时间");
  </script>

  效果图:  

  

  主要是太简单了,所以也没什么要解释的啦,就这样吧。

  附:Demo

  PS:Tandy Tang祝大家写代码写的愉快!

posted @ 2012-08-24 11:57  大神神风  阅读(789)  评论(4编辑  收藏  举报