+ @if (ShowDay)
+ {
+
+ @RenderItem(10)
+ @RenderItem(10)
+
+ }
+
@if (ShowHour)
{
diff --git a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs
index 97c1e1af2bd..570cd8b06ff 100644
--- a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs
+++ b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs
@@ -11,6 +11,12 @@ namespace BootstrapBlazor.Components;
///
public partial class FlipClock
{
+ ///
+ /// 获得/设置 是否显示 Day 默认 false
+ ///
+ [Parameter]
+ public bool ShowDay { get; set; }
+
///
/// 获得/设置 是否显示 Hour 默认 true
///
diff --git a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js
index 32ed2bbd0a5..f8680bc31b6 100644
--- a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js
+++ b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js
@@ -14,6 +14,7 @@ export function init(id, options) {
return;
}
+ 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');
const listSecond = el.querySelector('.bb-flip-clock-list.second');
@@ -21,26 +22,41 @@ export function init(id, options) {
let counter = 0;
const getDate = () => {
+ let totalMilliseconds = 0;
let now;
+
if (options.viewMode === "Count") {
counter += 1000;
- now = new Date(new Date().getTimezoneOffset() * 60 * 1000 - options.startValue + counter);
+ totalMilliseconds = counter - options.startValue;
}
else if (countDown) {
counter += 1000;
- now = new Date(new Date().getTimezoneOffset() * 60 * 1000 + options.startValue - counter);
+ totalMilliseconds = options.startValue - counter;
+ if (totalMilliseconds < 0) totalMilliseconds = 0;
}
else {
now = new Date();
+ return {
+ days: now.getDate(),
+ hours: now.getHours(),
+ minutes: now.getMinutes(),
+ seconds: now.getSeconds()
+ };
}
- return { hours: now.getHours(), minutes: now.getMinutes(), seconds: now.getSeconds() };
+
+ const seconds = Math.floor(totalMilliseconds / 1000) % 60;
+ 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 };
}
+ let lastDay;
let lastHour;
let lastMinute;
let lastSecond;
const go = () => {
- const { hours, minutes, seconds } = getDate();
+ const { days, hours, minutes, seconds } = getDate();
if (lastSecond !== seconds) {
lastSecond = seconds;
@@ -54,7 +70,11 @@ export function init(id, options) {
lastHour = hours;
setTime(listHour, hours, countDown);
}
- return { hours, minutes, seconds }
+ if (lastDay !== days) {
+ lastDay = days;
+ setTime(listDay, days, countDown);
+ }
+ return { days, hours, minutes, seconds }
}
let start = void 0
@@ -78,7 +98,6 @@ export function init(id, options) {
}
requestAnimationFrame(flip);
-
Data.set(id, { el, options });
}
diff --git a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.scss b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.scss
index 87ac84264da..e14d4508795 100644
--- a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.scss
+++ b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.scss
@@ -1,4 +1,4 @@
-.bb-flip-clock {
+.bb-flip-clock {
--bb-flip-clock-height: #{$bb-flip-clock-height};
--bb-flip-clock-bg: #{$bb-flip-clock-bg};
--bb-flip-clock-font-size: #{$bb-flip-clock-font-size};
@@ -25,6 +25,7 @@
position: relative;
width: 100%;
flex-shrink: 0;
+ overflow: auto;
.bb-flip-clock-list {
display: flex;
diff --git a/test/UnitTest/Components/FlipClockTest.cs b/test/UnitTest/Components/FlipClockTest.cs
index 9af609f14fa..a67e697115e 100644
--- a/test/UnitTest/Components/FlipClockTest.cs
+++ b/test/UnitTest/Components/FlipClockTest.cs
@@ -46,6 +46,19 @@ public void ShowSecond_Ok()
cut.DoesNotContain("bb-flip-clock-list second");
}
+ [Fact]
+ public void ShowDay_Ok()
+ {
+ var cut = Context.RenderComponent();
+ cut.DoesNotContain("bb-flip-clock-list day");
+
+ cut.SetParametersAndRender(pb =>
+ {
+ pb.Add(a => a.ShowDay, true);
+ });
+ cut.Contains("bb-flip-clock-list day");
+ }
+
[Fact]
public async Task ViewMode_Ok()
{