博客推行版本更新，成果積累制度，已經寫過的博客還會再次更新，不斷地琢磨，高質量高數量都是要追求的，工匠精神是學習必不可少的精神。因此，大家有何建議歡迎在評論區踴躍發言，你們的支持是我最大的動力，你們敢投，我就敢肝 ...
需求實戰一
效果展示
代碼展示
<template>
<ARow>
<ACol>
<a-statistic-countdown
:value="deadline"
format="HH:mm:ss:SSS"
class="countdown"
/>
</ACol>
</ARow>
</template>
<script setup lang="ts">
const deadline=Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
</script>
<style scoped>
.countdown {
font-size: 48px;
color: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>代碼解讀
這段代碼是一個Vue組件，用於展示一個倒計時。代碼中使用了Ant Design Vue庫中的a-statistic-countdown組件來實現倒計時功能。 在模板部分，使用了<ARow>和<ACol>組件來創建一個行列佈局，將倒計時組件放置在列中。倒計時組件的value屬性綁定到deadline變數，表示倒計時的截止時間。format屬性指定了倒計時的顯示格式為"HH:mm:ss:SSS"，即時、分、秒和毫秒。class屬性設置了倒計時組件的樣式為countdown。 在腳本部分，使用Date.now()獲取當前時間戳，並通過加法運算計算出倒計時的截止時間。這裡的計算是將當前時間加上2天（1000 * 60 * 60 * 24 * 2毫秒）和30秒（1000 * 30毫秒）。 在樣式部分，使用了scoped關鍵字將樣式限定在當前組件中。.countdown選擇器設置了倒計時組件的樣式，包括字體大小、顏色、內邊距、邊框圓角和陰影效果。 這段代碼可以用於在Vue項目中展示一個帶有倒計時功能的UI組件，可以根據需要進行修改和擴展。需求實戰二
效果展示
代碼展示
<template>
<ARow>
<ACol>
<a-statistic-countdown
:value="deadline"
format="HH:mm:ss:SSS"
style="
margin-right: 50px;
font-size: 48px;
color: #00aaff;
text-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff, 0 0 30px #00aaff;
animation: heartbeat 1s infinite;
background: linear-gradient(45deg, #000000, #000000);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border: 2px solid #00aaff;
border-radius: 10px;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 170, 255, 0.5);
"
/>
</ACol>
</ARow>
</template>
<script setup lang="ts">
const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
</script>
<style scoped>
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
</style>代碼解讀
這段代碼是一個Vue組件模板，用於展示一個倒計時的統計數字。具體解讀如下： 1. 在模板中，使用了<a-statistic-countdown>組件來展示倒計時。:value="deadline"表示將deadline變數的值作為倒計時的截止時間。format="HH:mm:ss:SSS"表示倒計時的顯示格式為時:分:秒:毫秒。 2. 在樣式中，設置了一系列樣式屬性來美化倒計時的顯示效果。其中包括字體大小、顏色、文本陰影、動畫效果、背景漸變、邊框、圓角、內邊距和陰影等。 3. 在腳本中，定義了一個deadline變數，表示倒計時的截止時間。這裡使用了Date.now()獲取當前時間戳，並加上2天和30秒的時間作為截止時間。 4. 在樣式中，定義了一個名為heartbeat的關鍵幀動畫，實現了一個心跳效果。動畫從初始狀態開始，通過transform: scale()屬性來改變元素的大小，從而實現心跳效果。 總體來說，這段代碼實現了一個帶有動態倒計時效果的統計數字展示組件，並通過一系列樣式屬性和動畫效果來增強其視覺效果。需求實戰三
樣式展示
代碼展示
<template>
<div class="countdown-container">
<ARow>
<ACol>
<a-statistic-countdown
:value="deadline"
format="HH:mm:ss:SSS"
class="countdown"
/>
</ACol>
</ARow>
</div>
</template>
<script setup lang="ts">
const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
</script>
<style scoped>
.countdown-container {
display: flex;
justify-content: center;
align-items: center;
width:200px;
height:200px;
overflow: hidden;
}
.countdown {
font-size: 48px;
color: #00aaff;
text-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff, 0 0 30px #00aaff;
animation: heartbeat 1s infinite;
background-clip: text;
border: 2px solid #00aaff;
border-radius: 10px;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 170, 255, 0.5);
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
</style>代碼解讀
這段代碼是一個 Vue 組件，用於展示一個倒計時的效果。具體解讀如下： 1. 在 HTML 模板中，使用了 a-statistic-countdown 組件來展示倒計時的數值。:value="deadline" 綁定了 deadline 變數作為倒計時的截止時間，format="HH:mm:ss:SSS" 設置了倒計時的數值格式為小時、分鐘、秒和毫秒。 2. 在 <script> 標簽中，使用 const 定義了一個 deadline 變數，它的值為當前時間加上兩天和三十秒的時間間隔。 3. 在 <style> 標簽中，使用了 CSS 樣式來設置倒計時的樣式。.countdown-container 類用於設置倒計時的容器樣式，其中使用了 display: flex; 和其他屬性來實現居中對齊。.countdown 類設置了倒計時數字的樣式，包括字體大小、顏色、文本陰影等效果。@keyframes heartbeat 是一個動畫樣式，用於實現倒計時數字的心跳效果。需求實戰四
效果展示
代碼展示
<template>
<div class="countdown-container">
<ARow>
<ACol span="6">
<div class="countdown-wrapper">
<div class="countdown-digit">{{ days }}</div>
<div class="countdown-label">Days</div>
</div>
</ACol>
<ACol span="6">
<div class="countdown-wrapper">
<div class="countdown-digit">{{ hours }}</div>
<div class="countdown-label">Hours</div>
</div>
</ACol>
<ACol span="6">
<div class="countdown-wrapper">
<div class="countdown-digit">{{ minutes }}</div>
<div class="countdown-label">Minutes</div>
</div>
</ACol>
<ACol span="6">
<div class="countdown-wrapper">
<div class="countdown-digit">{{ seconds }}</div>
<div class="countdown-label">Seconds</div>
</div>
</ACol>
</ARow>
</div>
</template>
<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
const days = ref(0);
const hours = ref(0);
const minutes = ref(0);
const seconds = ref(0);
const updateCountdown = () => {
const remainingTime = Math.max(deadline - Date.now(), 0);
days.value = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
hours.value = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
minutes.value = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
seconds.value = Math.floor((remainingTime % (1000 * 60)) / 1000);
};
onMounted(() => {
updateCountdown();
setInterval(updateCountdown, 1000);
});
</script>
<style scoped>
.countdown-container {
display: flex;
justify-content: center;
align-items: center;
border: 3px solid #00aaff; /* 設置邊框寬度和顏色 */
border-radius: 10px; /* 設置圓角半徑 */
overflow: hidden;
}
.countdown-wrapper {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}
.countdown-digit {
font-size: 48px;
color: #00aaff;
text-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff, 0 0 30px #00aaff;
animation: heartbeat 1s infinite;
background-clip: text;
}
.countdown-label {
font-size: 14px;
color: #00aaff;
margin-top: 5px;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
</style>
