javascript - 如何在倒数计时器中显示月份,然后使用简单的 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>
我又修改了代码...
解决方案
这是我的解决方案!您将不得不使用 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>
推荐阅读
- javascript - javascript函数和属性
- django - Django 删除主对象删除上的所有 M2M 相关对象
- javascript - 使用 GET 请求动态填充表
- python - Numpy Matmul 导致错误说模块没有属性 matmul
- java - 将 Actions 变量发送到方法
- php - 我想将网页的某些部分调用/拉到另一个页面中
- javascript - mongoose put 方法作为 post 方法工作
- mysql - 如何计算体育投注的责任
- javascript - Laravel Mix 说“构建成功”,但在 resources/app.js 中所做的更改不会执行
- algorithm - 使用数学优先级将后缀转换为后缀