0

Как сделать таймер обратного отсчёта дней, часов, минут и секунд? Есть карточка -

body {
  background-color: #171923;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}


.card-content { 
padding: 1.5rem;
background-color: #ffffff;  
width: 22.2222%;
border: 1px solid black;
border-radius: 32px;
height: 50%;
}

.is-flex-grow-1 { 
flex-grow: 1!important;
 }

.status-dot {
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  padding: 4px 8px;
  border-radius: 50px;
}


.status-dot svg {
  font-size: 8px;
    margin-right: 4px;
}

.custom-card  {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.content-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.subtitle {
  font-size: 15px;
    font-weight: 600;
    color: #888;
    margin: 0!important;
}


.title  {
  font-weight: 600;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.soft-hard-cap { 
font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 0.25rem;
}

.soft-hard-cap span{
font-size: 20px;
    font-weight: 600;
    color: #f95192;
    margin: 0;
}

.status-dot.inprogress {
  background-color: #d1fae5;
  color: #10b981;
}

.has-text-right {
  color: #888;
}

.lockup-time p {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.liquidity-percent p {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.ant-progress-inner {
  height: 8px;
  position: relative;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  vertical-align: middle;
  background-color: #f5f5f5;
  border-radius: 100px;
}

.custom-card .content-progress {
  line-height: 1.125;
}


.soft-hard-cap p {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 0.25rem;
}

.is-flex-grow-1 {
  flex-grow: 1!important;
}

.sub-title {
  font-size: 13px;
  font-weight: 600;
  color: #888;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="card-content is-flex-grow-1">
        <div class="media is-flex is-align-items-center">
            <div class="media-content">
                <div class="is-flex is-justify-content-flex-end">
                    <div class="is-flex has-text-right is-flex-direction-column">
                        <div class="is-flex" style="text-align: right;">
                            <span class="is-flex status-dot inprogress">
                                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 1 0-56 0z"></path>
                                </svg>
                                <span>Sale Live</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-title">
            <p class="title">SUPPERCOIN</p>
            <p class="subtitle" >Fair Launch</p>
        </div>
        <div class="soft-hard-cap">
            <p style="margin-top: 15px;">Soft </p>
            <span>305 BNB</span>
        </div>
        <div class="content-progress" style="font-size: 15px;
        font-weight: 600;
        color: var(--text-color);
        margin: 0 0 0.25rem;
    ">
            <p class="title">Progress (0.00%)</p>
            <div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default" style="margin-top: -4px;">
                <div class="ant-progress-outer">
                    <div class="ant-progress-inner">
                        <div class="ant-progress-bg" style="width: 0%; height: 8px; background: rgba(72, 199, 116, 0.5);"></div>
                        <div class="ant-progress-success-bg" style="width: 0%; height: 8px; background-color: rgb(72, 199, 116);"></div>
                    </div>
                </div>
            </div>
            <div class="sub-title is-flex is-align-items-center" style="padding-bottom: 10px;display: flex;">
                <div class="is-flex-grow-1">0 BNB</div>
                <div class="is-flex-grow-1 has-text-right" style="text-align: right;">305 BNB</div>
            </div>
        </div>
        <div class="liquidity-percent">
            <div class="is-flex is-align-items-center" style="display: flex;">
                <p class="is-flex-grow-1">Liquidity %:</p>
                <span class="is-flex-grow-1 has-text-right time-text" style="text-align: right;">70%</span>
            </div>
        </div>
        <div class="lockup-time" style="border-bottom: 1px solid #a89f9f2b;margin: 0px 0px 0.25rem;">
            <div class="is-flex is-align-items-center" style="display: flex;">
                <p class="is-flex-grow-1">Lockup Time:</p>
                <span class="is-flex-grow-1 has-text-right time-text" style="text-align: right;">365 days</span>
            </div></div>
        <div class="custom-card-footer">
                <div class="is-flex is-align-items-center">
                    <div class="countdown is-flex-grow-1 is-flex-direction-column">
                        <div style="padding-top: 10px;">Sale Starts In:</div>
                        <div class="countdown-text">
                            <strong>
                                <span>00</span>
                                <span class="dotdot">:</span>
                                <span>01</span>
                                <span class="dotdot">:</span>
                                <span>22</span>
                                <span class="dotdot">:</span>
                                <span>06</span>
                            </strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        
</body>
</html>

Сюда нужно внедрить таймер

3
  • А вам общее время в каком формате приходит? Общее кол-во в секундах или как объект, где расписано по-компонентно типа {days: 1, hours: 14, ...}?
    – EzioMercer
    13 июн 2022 в 8:42
  • @EzioMercer нужно, чтобы можно было в ручную вводить время, через код. Задаёшь, предположим, 5 дней и оно начинает отсчитывать. А так как объект
    – Daria
    13 июн 2022 в 8:49
  • Куда вводить вручную? В вопросе только про таймер идёт речь
    – EzioMercer
    13 июн 2022 в 8:54

2 ответа 2

1

Можно сделать так:

const daysCounter = document.querySelector('#days-counter');
const hoursCounter = document.querySelector('#hours-counter');
const minutesCounter = document.querySelector('#minutes-counter');
const secondsCounter = document.querySelector('#seconds-counter');

const saleStart = {days: 16, hours: 8, minutes: 4, seconds: 2};

let saleStartInSeconds = saleStart.seconds + 60 * saleStart.minutes + 3600 * saleStart.hours + 86400 * saleStart.days;

let timeout = setTimeout(function timeoutFunc() {  
  let saleStartInSecondsCopy = saleStartInSeconds;
  
  const days = Math.trunc(saleStartInSecondsCopy / 86400);
  
  daysCounter.innerHTML = `${days}`.padStart(2, '0');
  
  saleStartInSecondsCopy -= days * 86400;
  
  const hours = Math.trunc(saleStartInSecondsCopy / 3600);
  
  hoursCounter.innerHTML = `${hours}`.padStart(2, '0');
  
  saleStartInSecondsCopy -= hours * 3600;
  
  const minutes = Math.trunc(saleStartInSecondsCopy / 60);
  
  minutesCounter.innerHTML = `${minutes}`.padStart(2, '0');
  
  saleStartInSecondsCopy -= minutes * 60;
  
  secondsCounter.innerHTML = `${saleStartInSecondsCopy}`.padStart(2, '0');  
  
  --saleStartInSeconds;
  
  timeout = setTimeout(timeoutFunc, 1000);
  
  if (saleStartInSeconds < 0) {
    clearTimeout(timeout);
  }
}, 1000);
body {
  background-color: #171923;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}


.card-content { 
padding: 1.5rem;
background-color: #ffffff;  
width: 22.2222%;
border: 1px solid black;
border-radius: 32px;
height: 50%;
}

.is-flex-grow-1 { 
flex-grow: 1!important;
 }

.status-dot {
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  padding: 4px 8px;
  border-radius: 50px;
}


.status-dot svg {
  font-size: 8px;
    margin-right: 4px;
}

.custom-card  {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.content-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.subtitle {
  font-size: 15px;
    font-weight: 600;
    color: #888;
    margin: 0!important;
}


.title  {
  font-weight: 600;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.soft-hard-cap { 
font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 0.25rem;
}

.soft-hard-cap span{
font-size: 20px;
    font-weight: 600;
    color: #f95192;
    margin: 0;
}

.status-dot.inprogress {
  background-color: #d1fae5;
  color: #10b981;
}

.has-text-right {
  color: #888;
}

.lockup-time p {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.liquidity-percent p {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.ant-progress-inner {
  height: 8px;
  position: relative;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  vertical-align: middle;
  background-color: #f5f5f5;
  border-radius: 100px;
}

.custom-card .content-progress {
  line-height: 1.125;
}


.soft-hard-cap p {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 0.25rem;
}

.is-flex-grow-1 {
  flex-grow: 1!important;
}

.sub-title {
  font-size: 13px;
  font-weight: 600;
  color: #888;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="card-content is-flex-grow-1">
        <div class="media is-flex is-align-items-center">
            <div class="media-content">
                <div class="is-flex is-justify-content-flex-end">
                    <div class="is-flex has-text-right is-flex-direction-column">
                        <div class="is-flex" style="text-align: right;">
                            <span class="is-flex status-dot inprogress">
                                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 1 0-56 0z"></path>
                                </svg>
                                <span>Sale Live</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-title">
            <p class="title">SUPPERCOIN</p>
            <p class="subtitle" >Fair Launch</p>
        </div>
        <div class="soft-hard-cap">
            <p style="margin-top: 15px;">Soft </p>
            <span>305 BNB</span>
        </div>
        <div class="content-progress" style="font-size: 15px;
        font-weight: 600;
        color: var(--text-color);
        margin: 0 0 0.25rem;
    ">
            <p class="title">Progress (0.00%)</p>
            <div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default" style="margin-top: -4px;">
                <div class="ant-progress-outer">
                    <div class="ant-progress-inner">
                        <div class="ant-progress-bg" style="width: 0%; height: 8px; background: rgba(72, 199, 116, 0.5);"></div>
                        <div class="ant-progress-success-bg" style="width: 0%; height: 8px; background-color: rgb(72, 199, 116);"></div>
                    </div>
                </div>
            </div>
            <div class="sub-title is-flex is-align-items-center" style="padding-bottom: 10px;display: flex;">
                <div class="is-flex-grow-1">0 BNB</div>
                <div class="is-flex-grow-1 has-text-right" style="text-align: right;">305 BNB</div>
            </div>
        </div>
        <div class="liquidity-percent">
            <div class="is-flex is-align-items-center" style="display: flex;">
                <p class="is-flex-grow-1">Liquidity %:</p>
                <span class="is-flex-grow-1 has-text-right time-text" style="text-align: right;">70%</span>
            </div>
        </div>
        <div class="lockup-time" style="border-bottom: 1px solid #a89f9f2b;margin: 0px 0px 0.25rem;">
            <div class="is-flex is-align-items-center" style="display: flex;">
                <p class="is-flex-grow-1">Lockup Time:</p>
                <span class="is-flex-grow-1 has-text-right time-text" style="text-align: right;">365 days</span>
            </div></div>
        <div class="custom-card-footer">
                <div class="is-flex is-align-items-center">
                    <div class="countdown is-flex-grow-1 is-flex-direction-column">
                        <div style="padding-top: 10px;">Sale Starts In:</div>
                        <div class="countdown-text">
                            <strong>
                                <span id="days-counter">00</span>
                                <span class="dotdot">:</span>
                                <span id="hours-counter">00</span>
                                <span class="dotdot">:</span>
                                <span id="minutes-counter">00</span>
                                <span class="dotdot">:</span>
                                <span id="seconds-counter">00</span>
                            </strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        
</body>
</html>

0
1

Вот функция которая будет считывать обратный отчёт от X до 0, передаём функций время в сек и элементы гдк будут обновляться данные

const dayBlock = document.querySelector('#days');
const hourBlock = document.querySelector('#hour');
const minBlock = document.querySelector('#min');
const secBlock = document.querySelector('#sec');
// Время в секундах
let time = 25005000;

window.onload = timer(time, secBlock, minBlock, hourBlock, dayBlock);

let timerController = setInterval(() => {
  if (time <= 0) {
    clearInterval(timerController);
  }
  time--;
  timer(time, secBlock, minBlock, hourBlock, dayBlock);
}, 1000);

function timer(seconds, secDiv, minDiv, hrsDiv, dayDiv) {
  let day = Math.floor(seconds / (3600 * 24));
  let hrs = Math.floor(seconds % (3600 * 24) / 3600);
  let min = Math.floor(seconds % 3600 / 60);
  let sec = Math.floor(seconds % 60);

  secDiv.innerHTML = sec < 10 ? '0' + sec : sec;
  minDiv.innerHTML = min < 10 ? '0' + min : min;
  hrsDiv.innerHTML = hrs < 10 ? '0' + hrs : hrs;
  dayDiv.innerHTML = day < 10 ? '00' + day : (day < 100 ? '0' + day : day);
}
.timer {
  display: flex;
}
<div class="timer">
  <div id="days">000</div>
  &nbsp;
  <div id="hour">00</div>
  :
  <div id="min">00</div>
  :
  <div id="sec">00</div>
</div>

1
  • В конце ф-ии, где вставляете в innerHTML, теперь можно не писать такие проверки, вместо этого используйте padEnd и padStart :) Правда IE их не понимает, но я давно уже его поддержкой не занимаюсь)) И для них есть полифилы насколько я помню, так что думаю и там можно использовать
    – EzioMercer
    13 июн 2022 в 9:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.