CodeSwaps の上部にカウントダウン タイマーを作成する方法を次に示します.
15334 ワード
私は running a promotion で、それについてホームページで明確にしたかったのです.私はいくつかの異なることを調査しましたが、不要なコードの肥大化につながり、私が試した解決策では、ブランド化されていないバージョンを使用するのは非常に高価だったので、自分でコーディングすることにしました.
here で動作していることがわかります.このコードが他の誰かにとっても役立つことを願っています.
here で動作していることがわかります.このコードが他の誰かにとっても役立つことを願っています.
<a class="countdown-wrapper" href="https://www.codeswaps.com/giving-away-1500-dollars/" target="_blank">
⚡️ $1500 CodeSwaps Giveaway! 2nd winner in:
<div id="countdown">
<div class="countdown-timer">
<div class="countdown-timer-group">
<div id="days" class="countdown-timer-digits"></div><span>Days</span>
</div>
<div class="countdown-timer-group">
<div id="hours" class="countdown-timer-digits"></div><span>Hours</span>
</div>
<div class="countdown-timer-group">
<div id="minutes" class="countdown-timer-digits"></div><span>Mins</span>
</div>
<div class="countdown-timer-group">
<div id="seconds" class="countdown-timer-digits"></div><span>Secs</span>
</div>
</div>
</div>
</a>
.countdown-wrapper {
color: #fff;
text-align: center;
display: flex;
text-decoration: none;
font-size: 18px;
justify-content: center;
align-items: center;
width: 100%;
padding: 2px 10px;
background: #000;
min-height: 60px;
border-bottom: 1px solid #333;
animation: slideDown 0.3s;
animation-delay: 1s;
animation-fill-mode:forwards, none;
animation-iteration-count: 1;
animation-timing-function: ease;
transform: translateY(-100%);
opacity: 0;
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
&:hover,
&:visited {
color: #fff;
}
}
.countdown-timer {
display: flex;
margin: 4px 10px 0 10px;
justify-content: center;
&-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 4px;
min-width: 38px;
}
&-digits {
background: #ffd803;
color: #141414;
font-weight: 700;
padding: 3px 0;
border-radius: 3px;
margin: 0 4px;
display: block;
width: 100%;
}
span {
font-size: 11px;
margin-top: 2px;
display: block;
}
}
(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
//Change end date as required, next deadline is end of August
let givesway = "Aug 30, 2021 00:00:00",
countDown = new Date(givesway).getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
document.getElementById("days").innerText = Math.floor(distance / (day)),
document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
//hide when date is reached
if (distance < 0) {
let countdownBanner = document.getElementById("countdown-banner");
countdownBanner.style.display = "none";
clearInterval(x);
}
//seconds
}, 0)
}());
Reference
この問題について(CodeSwaps の上部にカウントダウン タイマーを作成する方法を次に示します.), 我々は、より多くの情報をここで見つけました https://dev.to/codeswaps/here-is-how-i-built-the-countdown-timer-at-the-top-of-codeswaps-5h2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol