首页 > 解决方案 > 如何在倒数计时器中显示月份,然后使用简单的 js 更改网页格式

问题描述

我必须为即将到来的 ICC 板球世界杯赛事制作一个倒计时页面,该页面以以下格式显示剩余天数。

格式 #1:01 个月 10 天 10 小时

格式 2:01 小时 20 分 10 秒(如果剩余 <2 天)

下面的代码就是我现在所拥有的。我该如何解决这个问题,请帮助:

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>

我又修改了代码...

标签: javascriptwebpagecountdown

解决方案


这是我的解决方案!您将不得不使用 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>


推荐阅读