как показать месяцы в таймере обратного отсчета, а затем изменить формат, используя простые js для веб-страницы - PullRequest
Новая
       29

как показать месяцы в таймере обратного отсчета, а затем изменить формат, используя простые js для веб-страницы

0 голосов
/ 22 февраля 2019

Мне нужно сделать страницу обратного отсчета для предстоящего турнира Кубка мира по крикету ICC, на котором будут показаны оставшиеся дни в следующем формате.

Формат № 1: 01 месяц 10 дней 10 часов

Формат 2: 01 часов 20 минут 10 секунд (если осталось <2 дня) </p>

и приведенный ниже код - это то, что у меня есть сейчас.Как мне решить эту проблему, пожалуйста, помогите: 

body {
			background-image: url("https://www.somersetcountycc.co.uk/wp-content/uploads/2018/09/getimage.png");
			background-size: 100%;
		
		}

		.countdownContainer{
			position: absolute;;
			top: 50%;
			left: 50%;
			transform : translateX(-50%) translateY(-50%);
			text-align: center;
			background: rgba(221, 221, 221, 0.8);
			border: 1px solid #999;
			padding: 10px;
			box-shadow: 0 0 5px 3px #ccc;
		}

		.info {
			font-size: 50px;
		}
<!DOCTYPE html>
<html>
	<head>
		<title>ICC World cup 2019 countdown</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<table class="countdownContainer" id="mytable">
			<tr class="info">
				<td colspan="5">Countdown to ICC World Cup 2019:</td>
			</tr>
			<tr class="info">
				<td id="months"></td>
				<td id="days"></td>
				<td id="hours"></td>
				<td id="minutes"></td>
				<td id="seconds"></td>
			</tr>
			<tr>
				<td>Months</td>
				<td>Days</td>
				<td>Hours</td>
				<td>Minutes</td>
				<td>Seconds</td>
			</tr>
		</table>
		<script type="text/javascript">

			function countdown(){
				let now = new Date();
				let eventDate = new Date("May 30, 2019 15:00:00");

				let currentTiime = now.getTime();
				let eventTime = eventDate.getTime();

				let remTime = eventTime - currentTiime;

				let s = Math.floor(remTime / 1000);
				let m = Math.floor(s / 60);
				let h = Math.floor(m / 60);
				let d = Math.floor(h / 24);
				let mo = Math.floor(d / 30);

				mo %= 30;
				h %= 24;
				m %= 60;
				s %= 60;

				mo = (mo < 10) ? "0"+mo : mo;
				h = (h < 10) ? "0" + h : h;
				m = (m < 10) ? "0" + m : m;
				s = (s < 10) ? "0" + s : s;

				if(d>2){
					document.getElementById("months").textContent = mo;
					document.getElementById("days").textContent = d;
					document.getElementById("hours").textContent = h;
				}
				else{
					document.getElementById("hours").textContent = h;
					document.getElementById("minutes").textContent = m;
					document.getElementById("seconds").textContent = s;
				}

				setTimeout(countdown, 1000);
			}

			countdown();
		</script>
	</body>
</html>

Я снова изменил код ...

1 Ответ

0 голосов
/ 22 февраля 2019

Вот мое решение!Вам нужно будет использовать плагин диапазона дат MomentJS и Moment.js: http://momentjs.com/

https://github.com/codebox/moment-precise-range

В приведенном ниже примере они импортированы, но вы можете перейти по этим ссылкам и найти CDN илиминимизированные версии библиотеки.

Вот также коды и окно примера LIVE: https://codesandbox.io/s/98y5800y34

import moment from "moment";
import { preciseDiff } from "moment-precise-range-plugin";

function countdown() {
  var now = new Date();
  var eventDate = new Date(now.getFullYear(), 1, 23);

  var currentTiime = now.getTime();
  var eventTime = eventDate.getTime();

  var remTime = eventTime - currentTiime;

  var s = Math.floor(remTime / 1000);
  var m = Math.floor(s / 60);
  var h = Math.floor(m / 60);
  var d = Math.floor(h / 24);
  var starts = moment(eventDate);
  var ends = moment(now);
  var duration = moment.duration(ends.diff(starts));
  var diff = moment.preciseDiff(starts, ends, true);

  h %= 24;
  m %= 60;
  s %= 60;

  h = h < 10 ? "0" + h : h;
  m = m < 10 ? "0" + m : m;
  s = s < 10 ? "0" + s : s;

  if (d >= 2) {
    document.querySelector(".info1").style.cssText = "display:none";
    document.querySelector(".descrip1").style.cssText = "display:none";
    document.getElementById("f1months").textContent = diff.months;
    document.getElementById("f1days").textContent = diff.days;
    document.getElementById("f1hours").textContent = diff.hours;
  } else {
    document.querySelector(".info2").style.cssText = "display:none";
    document.querySelector(".descrip2").style.cssText = "display:none";
    document.getElementById("days").textContent = d;
    document.getElementById("hours").textContent = h;
    document.getElementById("minutes").textContent = m;
    document.getElementById("seconds").textContent = s;
  }

  // setTimeout(countdown, 1000);
}

countdown();
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <table class="countdownContainer">
      <tr class="info">
        <td colspan="4">Countdown to ICC World Cup 2019:</td>
      </tr>
      <tr class="info1">
        <td id="days">120</td>
        <td id="hours">4</td>
        <td id="minutes">12</td>
        <td id="seconds">22</td>
      </tr>
      <tr class="descrip2">
        <td>Days</td>
        <td>Hours</td>
        <td>Minutes</td>
        <td>Seconds</td>
      </tr>

      <tr class="info2">
        <td id="f1months">120</td>
        <td id="f1days">4</td>
        <td id="f1hours">12</td>
        <td></td>
      </tr>
      <tr class="descrip2">
        <td>months</td>
        <td>days</td>
        <td>hours</td>
        <td></td>
      </tr>
    </table>

    <script src="src/index.js"></script>
  </body>
</html>
...