Как сделать обратный отсчет товара в реальном времени, используя Javascript - PullRequest
Новая
       10

Как сделать обратный отсчет товара в реальном времени, используя Javascript

0 голосов
/ 27 февраля 2020

Мне нужен обратный отсчет в реальном времени. Например, я установлю дату вроде (28 февраля 2020 года), и она будет заканчиваться sh в (29 февраля 2020 года). И между этими двумя датами я буду устанавливать количество товаров. Это будет постоянно уменьшаться. Поэтому я хочу, чтобы число продуктов было равно нулю.

Кроме того, когда разные пользователи входят с другого компьютера, количество продуктов должно продолжаться с того места, на котором они остановились. Я не мог сделать это

Я искал решение, но я не мог найти.

Мне нужна помощь .. С уважением.

Это мой js код, 

today           = new Date();
BigDay          = new Date("February "+day+",2020");

msPerDay        = 24 * 60 * 60 * 1000;

timeLeft        = (BigDay.getTime() - today.getTime());

e_daysLeft      = timeLeft / msPerDay;
daysLeft        = Math.floor(e_daysLeft);
e_hrsLeft       = e_daysLeft*24;
hrsLeft         = Math.floor(e_hrsLeft);
minsLeft        = Math.floor((e_hrsLeft - hrsLeft)*60);

var productCount = 400;

document.write("<p>There are only<b> " + daysLeft + " days " + hrsLeft +" hours and " + minsLeft + " minutes left </b> Until December 25th 2025</p>");

Ответы [ 3 ]

0 голосов
/ 27 февраля 2020 

function updateTimer() {
  future = Date.parse("february 29, 2020 11:30:00");
  now = new Date();
  diff = future - now;

  days = Math.floor(diff / (1000 * 60 * 60 * 24));
  hours = Math.floor(diff / (1000 * 60 * 60));
  mins = Math.floor(diff / (1000 * 60));
  secs = Math.floor(diff / 1000);

  d = days;
  h = hours - days * 24;
  m = mins - hours * 60;
  s = secs - mins * 60;

  document.getElementById("timer")
    .innerHTML =
    '<div>' + d + '<span>days</span></div>' +
    '<div>' + h + '<span>hours</span></div>' +
    '<div>' + m + '<span>minutes</span></div>' +
    '<div>' + s + '<span>seconds</span></div>';
}
setInterval('updateTimer()', 1000);
body {
  text-align: center;
  padding: 70px 50px;
  background: #0D1A29;
  font-family: "Helvetica Neue", "Open Sans", helvetica, arial, sans-serif;
}

#timer {
  font-size: 3em;
  font-weight: 100;
  color: white;
  text-shadow: 0 0 20px #48C8FF;
  div {
    display: inline-block;
    min-width: 90px;
    span {
      color: #B1CDF1;
      display: block;
      font-size: .35em;
      font-weight: 400;
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timer"></div>

0 голосов
/ 27 февраля 2020

Вот пример с вашими ванильными js и функциями для построения. 


const day = 28;
const BigDay = new Date("February "+day+",2020");
const BigDayTime = BigDay.getTime();
const msPerDay = 24 * 60 * 60 * 1000;
const productCount = 400;

const getLeftTimeObject = () => {
  const today = new Date();
  const timeLeft = BigDayTime - today.getTime();
  const e_daysLeft = timeLeft / msPerDay;
  const daysLeft = Math.floor(e_daysLeft);
  const e_hrsLeft = e_daysLeft*24;
  const hrsLeft = Math.floor(e_hrsLeft);
  const minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60);
  return {
    days: daysLeft,
    hours: hrsLeft,
    minutes: minsLeft
  }
}

const setCounter = () => {
  const { days, hours, minutes } = getLeftTimeObject();
  const counterContainer = document.querySelector(.'counter-container');
  if(counterContainer) {
    document.querySelector('.counter-container .days').innerHTML = days;
    document.querySelector('.counter-container .hours').innerHTML = hours;
    document.querySelector('.counter-container .minutes').innerHTML = minutes;
  } else {
    document.write(
      `
       <p class="counter-container">
          There are only
          <b><span class="days">${days}</span> days<b>
          <b><span class="hours">${hours}</span> hours and<b>
          <b><span class="minutes">${minutes}</span> minutes left<b>
          Until February ${day}th 2020
       </p>
      `
    );
  }
}

setInterval(() => {
  setCounter();
}, productCount)
0 голосов
/ 27 февраля 2020

Вот небольшой фрагмент. 

var productCount = 400;

function countdown(){
  
  day = 28;
  today           = new Date();
  BigDay          = new Date("February "+day+",2020");

  msPerDay        = 24 * 60 * 60 * 1000;

  timeLeft        = (BigDay.getTime() - today.getTime());

  e_daysLeft      = timeLeft / msPerDay;
  daysLeft        = Math.floor(e_daysLeft);
  e_hrsLeft       = e_daysLeft*24;
  hrsLeft         = Math.floor(e_hrsLeft);
  minsLeft        = Math.floor((e_hrsLeft - hrsLeft)*60);
  document.getElementById('output').innerHTML = "<p>There are only<b> " + daysLeft + " days " + hrsLeft +" hours and " + minsLeft + " minutes left </b> Until December 25th 2025</p>";
}
//Call on intial point
countdown()
window.setInterval(function(){ countdown(); productCount -=1; },60000) //Auto time after every 1 minute
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="output"></div>

Надеюсь, это поможет вам

...