zoukankan      html  css  js  c++  java
  • js倒计时

    1、先添加一个js文件,把以下代码复制进去:(jquery.downCount)

    (function ($) {
        var interval;
        $.fn.downCount = function (options, callback) {
            var settings = $.extend({
                date: null
            }, options);
            if (settings.date > 0) {
                if (!settings.date) { $.error('日期未定义'); }
                var container = this;
                var currentDate = function () {
                    var date = new Date();
                    var utc = date.getTime() + (date.getTimezoneOffset() * 60000);
                    var new_date = new Date(utc + (3600000 * 8))
                    return new_date;
                };
                var dateStr = convertDate(settings.date);
                function countdown() {
                    var target_date = new Date(dateStr), // set target date
                        current_date = currentDate(); // get fixed current date
    
                    // difference of dates
                    var difference = target_date - current_date;
    
                    // if difference is negative than it's pass the target date
                    if (difference < 0) {
                        // stop timer
                        window.clearInterval(interval);
                        if (callback && typeof callback === 'function') callback();
                        return;
                    }
                    // basic math variables
                    var _second = 1000,
                        _minute = _second * 60,
                        _hour = _minute * 60,
                        _day = _hour * 24;
    
                    // calculate dates
                    var days = Math.floor(difference / _day),
                        hours = Math.floor((difference % _day) / _hour),
                        minutes = Math.floor((difference % _hour) / _minute),
                        seconds = Math.floor((difference % _minute) / _second);
    
                    // fix dates so that it will show two digets
                    days = (String(days).length >= 2) ? days : '0' + days;
                    hours = (String(hours).length >= 2) ? hours : '0' + hours;
                    minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
                    seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;
    
                    // based on the date change the refrence wording
                    var ref_days = (days === 1) ? 'day' : 'days',
                        ref_hours = (hours === 1) ? 'hour' : 'hours',
                        ref_minutes = (minutes === 1) ? 'minute' : 'minutes',
                        ref_seconds = (seconds === 1) ? 'second' : 'seconds';
    
                    // set to DOM
                    container.find('.days').text(days);
                    container.find('.hours').text(hours);
                    container.find('.minutes').text(minutes);
                    container.find('.seconds').text(seconds);
    
                    container.find('.days_ref').text(ref_days);
                    container.find('.hours_ref').text(ref_hours);
                    container.find('.minutes_ref').text(ref_minutes);
                    container.find('.seconds_ref').text(ref_seconds);
                };
                function convertDate(m) {
                    Date.prototype.Format = function (fmt) {
                        var o = {
                            "M+": this.getMonth() + 1, //月份   
                            "d+": this.getDate(), //
                            "h+": this.getHours(), //小时   
                            "m+": this.getMinutes(), //
                            "s+": this.getSeconds(), //
                            "q+": Math.floor((this.getMonth() + 3) / 3), //季度   
                            "S": this.getMilliseconds() //毫秒   
                        };
                        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                        for (var k in o)
                            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                        return fmt;
                    }
                    var myD = new Date();
                    myD.setMinutes(myD.getMinutes() + parseInt(m), myD.getSeconds(), 0);
                    return myD.Format("MM/dd/yyyy hh:mm:ss");
                }
                //开始倒计时
                interval = setInterval(countdown, 1000);
            }
            else {
                window.clearInterval(interval);
            }
        };
    })(jQuery);
    View Code

    2、在需要倒计时的页面添加新建的js文件

    3、使用方法,添加一段html

    <ul class="countdown" id="timer">
        <li><span class="hours">00</span></li>
        <li class="seperator">:</li>
        <li><span class="minutes">00</span></li>
        <li class="seperator">:</li>
        <li><span class="seconds">00</span></li>
    </ul>
    View Code

    4、调用方法

    //倒计时
    function downCountFun(time) {
        $('.countdown').downCount({ date: time }, function () {
            markingSub();//时间到后执行的函数
        });
    }

    5、注意!时间不支持小数点,{date:0}即time=0时停止倒计时

  • 相关阅读:
    MySQL整理碎片
    华为云容器引擎 单实例模式部署 NACOS DOCKER
    NACOS DOCKER 官方镜像启动失败 No Datasource set
    nginx docker官方镜像使用自定义启动命令启动失败
    windows docker desktop配置国内镜像仓库
    SAP AUFM 针对订单的货物移动
    css 子元素margin-top影响了父元素
    HighCharts 嵌套仪表盘
    JAVA 使用JCO3调用SAP RFC函数
    线下WINDOWS主机挂载华为云存储
  • 原文地址:https://www.cnblogs.com/hllive/p/6530874.html
Copyright © 2011-2022 走看看