https://www.ciie.org/resource/static/zbh/default/assets-2024/js/edi/core/edi.countDownTime.js

1(function($) {
2    $.fn.countDown = function(options) {
3        var settings = $.extend({
4            endTime: new Date().getTime() + (1000 * 60 * 60 * 24), // 默认结束时间为24小时后
5            dayPad: false, // 是否在天小于10时补两个0
6             // 添加模板选项
7             templates: {
8                day: '<span class="u-day u-num"><i>{{number}}</i></span>',
9                hour: '<span class="u-hour u-num"><i>{{number}}</i></span>',
10                minute: '<span class="u-minute u-num"><i>{{number}}</i></span>',
11                second: '<span class="u-second u-num"><i>{{number}}</i></span>'
12            },
13            // 添加错误回调选项
14            errorCallback: function() {
15                console.error('倒计时结束时间不能小于当前时间');
16            }
17        }, options);
18
19        // 确保endTime是一个Date对象
20        if (typeof settings.endTime === 'string') {
21            settings.endTime = new Date(settings.endTime);
22        }
23
24        // 初始化函数
25        var init = function() {
26            settings.t = settings.endTime.getTime();
27            // 缓存DOM元素
28            var $day = this.find('#day'),
29                $hours = this.find('#hours'),
30                $minutes = this.find('#minutes'),
31                $seconds = this.find('#seconds');
32            this.elements = {
33                day: $day,
34                hours: $hours,
35                minutes: $minutes,
36                seconds: $seconds
37            };
38        }.bind(this);
39
40        // 计时函数
41        var timer = function() {
42            var now = new Date(),
43                remaining = settings.t - now.getTime(),
44                days = Math.floor(formatTime(remaining, "day")),
45                hours = Math.floor(formatTime(remaining, "hours")),
46                minutes = Math.floor(formatTime(remaining, "minutes")),
47                seconds = Math.floor(formatTime(remaining, "seconds")),
48                dayText, hoursText, minutesText, secondsText;
49
50            if (settings.dayPad) {
51                days = formatNumber(days, 3);
52            } else {
53                days = formatNumber(days);
54            }
55
56            hours = formatNumber(hours);
57            minutes = formatNumber(minutes);
58            seconds = formatNumber(seconds);
59
60            // 更新DOM元素
61            if (this.elements.day.text() !== days) {
62                dayText = days.toString().split('').map(function(number) {
63                    return settings.templates.day.replace('{{number}}', number);
64                }).join('');
65                this.elements.day.html(dayText);
66            }
67
68            if (this.elements.hours.text() !== hours) {
69                hoursText = hours.toString().split('').map(function(number) {
70                    return settings.templates.hour.replace('{{number}}', number);
71                }).join('');
72                this.elements.hours.html(hoursText);
73            }
74
75            if (this.elements.minutes.text() !== minutes) {
76                minutesText = minutes.toString().split('').map(function(number) {
77                    return settings.templates.minute.replace('{{number}}', number);
78                }).join('');
79                this.elements.minutes.html(minutesText);
80            }
81
82            if (this.elements.seconds.text() !== seconds) {
83                secondsText = seconds.toString().split('').map(function(number) {
84                    return settings.templates.second.replace('{{number}}', number);
85                }).join('');
86                this.elements.seconds.html(secondsText);
87            }
88        }.bind(this);
89
90        // 格式化数字函数
91        var formatNumber = function(num, pad) {
92            pad = pad || 2;
93            return num <= 0 ? "0".repeat(pad) : num.toString().padStart(pad, '0');
94        };
95
96        // 格式化时间函数
97        var formatTime = function(remaining, unit) {
98            switch (unit) {
99                case "day":
100                    return remaining / 1000 / 60 / 60 / 24;
101                case "hours":
102                    return remaining / 1000 / 60 / 60 % 24;
103                case "minutes":
104                    return remaining / 1000 / 60 % 60;
105                case "seconds":
106                    return remaining / 1000 % 60;
107                default:
108                    return 0;
109            }
110        };
111
112        init();
113        // 启动倒计时
114        setInterval(timer, 1000); // 使用$.proxy来确保this的正确性
115
116        return this; // 返回jQuery对象，以支持链式调用
117    };
118}(jQuery));