feat: 增加 ShowMonth 参数

Author: ArgoZhang

src/BootstrapBlazor/Components/FlipClock/FlipClock.razor

@@ -3,6 +3,14 @@
 @attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
 
 <div @attributes="@AdditionalAttributes" class="@ClassString" style="@StyleString" id="@Id">
+    @if (ShowDay)
+    {
+        <div class="bb-flip-clock-list month">
+            @RenderItem(3)
+            @RenderItem(10)
+        </div>
+    }
+
     @if (ShowDay)
     {
         <div class="bb-flip-clock-list day">

src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs

@@ -11,6 +11,12 @@ namespace BootstrapBlazor.Components;
 /// </summary>
 public partial class FlipClock
 {
+    /// <summary>
+    /// 获得/设置 是否显示 Month 默认 false
+    /// </summary>
+    [Parameter]
+    public bool ShowMonth { get; set; }
+
     /// <summary>
     /// 获得/设置 是否显示 Day 默认 false
     /// </summary>

src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js

@@ -14,6 +14,7 @@ export function init(id, options) {
         return;
     }
 
+    const listMonth = el.querySelector('.bb-flip-clock-list.month');
     const listDay = el.querySelector('.bb-flip-clock-list.day');
     const listHour = el.querySelector('.bb-flip-clock-list.hour');
     const listMinute = el.querySelector('.bb-flip-clock-list.minute');
@@ -37,6 +38,7 @@ export function init(id, options) {
         else {
             now = new Date();
             return {
+                months: now.getMonth() + 1,
                 days: now.getDate(),
                 hours: now.getHours(),
                 minutes: now.getMinutes(),
@@ -48,15 +50,16 @@ export function init(id, options) {
         const minutes = Math.floor(totalMilliseconds / (1000 * 60)) % 60;
         const hours = Math.floor(totalMilliseconds / (1000 * 60 * 60)) % 24;
         const days = Math.floor(totalMilliseconds / (1000 * 60 * 60 * 24));
-        return { days, hours, minutes, seconds };
+        return { months, days, hours, minutes, seconds };
     }
 
+    let lastMonth;
     let lastDay;
     let lastHour;
     let lastMinute;
     let lastSecond;
     const go = () => {
-        const { days, hours, minutes, seconds } = getDate();
+        const { months, days, hours, minutes, seconds } = getDate();
 
         if (lastSecond !== seconds) {
             lastSecond = seconds;
@@ -74,7 +77,11 @@ export function init(id, options) {
             lastDay = days;
             setTime(listDay, days, countDown);
         }
-        return { days, hours, minutes, seconds }
+        if (lastMonth !== months) {
+            lastDay = days;
+            setTime(listMonth, months, countDown);
+        }
+        return { months, days, hours, minutes, seconds }
     }
 
     let start = void 0