zoukankan      html  css  js  c++  java
  • 自己写一个倒计时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祝大家写代码写的愉快!

    作者:大神神风
    出处:http://www.cnblogs.com/tandyshen/
    感谢您点【推荐】 ,祝您事业有成,生活愉快,健康美丽。
  • 相关阅读:
    android升级软件版本号,您安装后的新版本号,成功安装画面没有出现,或直接回到桌面
    Linux下安装Tomcat服务器和部署Web应用
    Linux下开启mysql数据库的远程访问权限
    【项目管理和构建】——Maven简介(一)
    用maven搭建多模块项目
    Maven之自定义pom类型的基础项目
    Maven之搭建本地私服(nexus)仓库
    Maven之自定义archetype生成项目骨架(一)
    Maven多模块项目搭建
    安装maven之后,cmd提示mvn不是内部命令的解决办法
  • 原文地址:https://www.cnblogs.com/tandyshen/p/CountDownDemo.html
Copyright © 2011-2022 走看看