zoukankan      html  css  js  c++  java
  • jQuery实现倒计时效果-杨秀徐

    本实例效果:剩余368天22小时39分57秒结束

    代码简单易懂,适用各种倒计时;

    <!DOCTYPE html>
    <head>
        <title>jQuery实现倒计时效果-杨秀徐</title>
        <script type="text/javascript" src="/scripts/jquery.js"></script>
        <script type="text/javascript">
            /*
            @作者:杨秀徐,主页 http://www.gzmsg.com
            @用途:jQuery实现倒计时效果$(".time").countDown({time: "2015/12/1 10:00:00",type:0})
            @参数:time: 结束时间,type:显示方式(0显示天数,1不显示天数)
            */
            $.fn.countDown = function (opt) {
                var opt = $.extend({
                    time : null,
                    type : 0
                }, opt);
    
                var edtime   = new Date(opt.time).getTime(),                  //月份是实际月份-1
    	            edsecond = (edtime - new Date().getTime()) / 1000;  
    
                var eday    = $(this).find('.day'),
                    ehour   = $(this).find('.hour'),
                    eminute = $(this).find('.minute'),
                    esecond = $(this).find('.second');
    
                var timer = setInterval(function () {
                    if (edsecond > 1) {
                        edsecond -= 1;
                        var day = Math.floor((edsecond / 3600) / 24),
                        hour = Math.floor((edsecond / 3600) % 24),
                        minute = Math.floor((edsecond / 60) % 60),
                        second = Math.floor(edsecond % 60);
                        if(opt.type===0){
                            $(eday).text(day);                                  //计算天
                            $(ehour).text(hour < 10 ? "0" + hour : hour);       //计算小时
                        }else{
                            hour = day * 24;
                            $(ehour).text(hour < 10 ? "0" + hour : hour);       //计算小时-没有天数  
                        }
                        $(eminute).text(minute < 10 ? "0" + minute : minute);   //计算分钟
                        $(esecond).text(second < 10 ? "0" + second : second);   //计算秒杀
                    } else {
                        clearInterval(timer);
                    }
                }, 1000);
            }
            $(function () {
                $(".time").countDown({
                    time: "2015/12/1 10:00:00",
                    type:0
                });
            });
        </script>
    </head>
    <body>
        <div class="time">剩余<span class="day">0</span>天<span class="hour">00</span>小时<span class="minute">00</span>分<span class="second">00</span>秒结束</div>
    </body>
    </html>
    
  • 相关阅读:
    使用pycharm开发代码上传到GitLab和GitHub
    私有仓库GitLab快速入门篇
    修改Linux Operating System的时间与时区
    版本控制工具Git工具快速入门-Linux篇
    Hadoop生态圈-Oozie实战之调度shell脚本
    Hadoop生态圈-Oozie实战之逻辑调度执行多个Job
    JavaScript基础知识-相等运算符
    Hadoop生态圈-Oozie部署实战
    Tomcat定义虚拟主机案例
    Tomcat的配置文件详解
  • 原文地址:https://www.cnblogs.com/sntetwt/p/4125958.html
Copyright © 2011-2022 走看看