0

css我为我编辑了，countdown timer但它没有显示出来。

我想为每个hour、、minute和second单元格编辑 css。

请帮我。

这是一个链接

const span = document.getElementById("countdown");
const deadline = new Date();
deadline.setHours(0);
deadline.setMinutes(0);
deadline.setSeconds(0);
function displayRemainingTime() {
	if (deadline < new Date()) deadline.setDate(deadline.getDate() + 1);
	const remainingTime = deadline - new Date();
	const extract = (maximum, factor) => Math.floor((remainingTime % maximum) / factor);
	let seconds = extract(60000, 1000);
	let minutes = extract(3600000, 60000);
	let hours = extract(10800000, 3600000);
	if (hours < 10) { hours = "0" + hours; }
	if (minutes < 10) { minutes = "0" + minutes; }
	if (seconds < 10) { seconds = "0" + seconds; }
	const string = `${hours} hours ${minutes} minutes ${seconds} seconds remaining`;
	span.innerText = `${hours} hours ${minutes} minutes ${seconds} seconds`;
}
window.setInterval(displayRemainingTime, 1000);
displayRemainingTime();
span#minutes {
	background: #fff;
	font-size: 18px;
	border-radius: 2px;
}

span#hours {
	background: #fff;
	font-size: 18px;
	border-radius: 2px;
}

span#seconds {
	background: #fff;
	font-size: 18px;
	border-radius: 2px;
}
<div id="countdown">
<span id="hours"> 00</span> :
<span id="minutes"> 00</span> :
<span id="seconds"> 00</span>

4

1 回答 1

0

好吧，innerText 替换了你#countdown元素的所有内容。以下代码有效：

const span = document.getElementById("countdown");
const deadline = new Date();
deadline.setHours(0);
deadline.setMinutes(0);
deadline.setSeconds(0);
function displayRemainingTime() {
    if (deadline < new Date()) deadline.setDate(deadline.getDate() + 1);
    const remainingTime = deadline - new Date();
    const extract = (maximum, factor) => Math.floor((remainingTime % maximum) / factor);
    let seconds = extract(60000, 1000);
    let minutes = extract(3600000, 60000);
    let hours = extract(10800000, 3600000);
    if (hours < 10) { hours = "0" + hours; }
    if (minutes < 10) { minutes = "0" + minutes; }
    if (seconds < 10) { seconds = "0" + seconds; }
    span.innerHTML = `<span id="hours">${hours}</span> hours <span id="minutes">${minutes}</span> minutes <span id="seconds">${seconds}</span> seconds remaining`;
}
window.setInterval(displayRemainingTime, 1000);
displayRemainingTime();

另一件事是，您不需要span#id-of-the-element在 CSS 上添加它的层次结构的特异性，不需要它，ID 选择器更强，所以我建议您简单地添加：（添加一些颜色仅用于演示）

#minutes {
    background: #fff;
    font-size: 18px;
    border-radius: 2px;
    color:green;
}

#hours {
    background: #fff;
    font-size: 18px;
    border-radius: 2px;
    color:blue;
}

#seconds {
    background: #fff;
    font-size: 18px;
    border-radius: 2px;
    color:red;
}

这是示例工作的 JsFiddle： https ://jsfiddle.net/fabiangarga/hk428a0n/7/

于 2020-02-10T03:18:46.330 回答