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>
    
  • 相关阅读:
    java-抽象类
    java-接口
    java-面向对象总结
    java-单例设计模式
    java数组
    .Net框架整理
    PHP结合memcacheq消息队列解决并发问题
    浅谈DDos攻击
    PHP+ffmpeg+nginx的配置实现视频转码(转)
    使用Nginx的X-Accel-Redirect实现大文件下载
  • 原文地址:https://www.cnblogs.com/sntetwt/p/4125958.html
Copyright © 2011-2022 走看看