如何在同一网页中使用同一JavaScript控件2次？
如何在同一网页中使用同一JavaScript控件2次？
提问于 2020-12-03 23:50:12
我在Codepen上找到了一个小工具，并在我的网站上实现了它。但是，我想在我的网站的两个不同的页面中使用它两次。当我将HTML复制到其他页面时，它不工作。我知道我必须在我的代码中做一些修改，但我真的不太擅长JS。
你能教我如何使用第二个小工具吗？
var countDate = new Date("Jan 01, 2021 00:00:00").getTime();
function newYear() {
var now = new Date().getTime();
gap = countDate - now;
var second = 1000;
var minute = second * 60;
var hour = minute * 60;
var day = hour * 24;
var d = Math.floor(gap / day);
var h = Math.floor((gap % day) / hour);
var m = Math.floor((gap % hour) / minute);
var s = Math.floor((gap % minute) / second);
document.getElementById("day").innerText = d;
document.getElementById("hour").innerText = h;
document.getElementById("minute").innerText = m;
document.getElementById("second").innerText = s;
}
setInterval(function() {
newYear();
}, 1000);.countdown {
display: flex;
justify-content: center;
}
.countdown .separator {
font-weight: 400;
}
.countdown div {
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #45deb0;
margin: 0 -15px;
font-size: 3em;
font-weight: 500;
}
.countdown div:before {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 35px;
color: #45deb0;
font-size: 0.35em;
line-height: 35px;
font-weight: 300;
}
.countdown div#day:before {
content: "Dagen";
}
.countdown div#hour:before {
content: "Uren";
}
.countdown div#minute:before {
content: "Uren";
}
.countdown div#second:before {
content: "Seconden";
}<div class="countdown">
<div id="day">na</div>
<div class="separator"><span>:</span></div>
<div id="hour">na</div>
<div class="separator"><span>:</span></div>
<div id="minute">na</div>
<div class="separator"><span>:</span></div>
<div id="second">na</div>
</div>
<p>How can I make the second countdown widget(the one in bottom) work with same codes?</p>
<div class="countdown">
<div id="day">na</div>
<div class="separator"><span>:</span></div>
<div id="hour">na</div>
<div class="separator"><span>:</span></div>
<div id="minute">na</div>
<div class="separator"><span>:</span></div>
<div id="second">na</div>
</div>
Stack Overflow用户
回答已采纳
发布于 2020-12-04 00:05:04
您正在使用重复的类，而document.getElementById返回单个元素。请改用id并循环访问它们：
var countDate = new Date("Jan 01, 2021 00:00:00").getTime();
function newYear() {
var now = new Date().getTime();
gap = countDate - now;
var second = 1000;
var minute = second * 60;
var hour = minute * 60;
var day = hour * 24;
var d = Math.floor(gap / day);
var h = Math.floor((gap % day) / hour);
var m = Math.floor((gap % hour) / minute);
var s = Math.floor((gap % minute) / second);
var dayDivs = document.querySelectorAll(".day");
var hourDivs = document.querySelectorAll(".hour");
var minuteDivs = document.querySelectorAll(".minute");
var secondDivs = document.querySelectorAll(".second");
for (let i = 0; i < dayDivs.length; i++) {
dayDivs[i].innerText = d;
hourDivs[i].innerText = h;
minuteDivs[i].innerText = m;
secondDivs[i].innerText = s;
}
}
setInterval(function() {
newYear();
}, 1000);.countdown {
display: flex;
justify-content: center;
}
.countdown .separator {
font-weight: 400;
}
.countdown div {
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #45deb0;
margin: 0 -15px;
font-size: 3em;
font-weight: 500;
}
.countdown div:before {
content: attr(data-time);
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 35px;
color: #45deb0;
font-size: 0.35em;
line-height: 35px;
font-weight: 300;
}<div class="countdown">
<div class="day" data-time="Dagen">na</div>
<div class="separator"><span>:</span></div>
<div class="hour" data-time="Uren">na</div>
<div class="separator"><span>:</span></div>
<div class="minute" data-time="Uren">na</div>
<div class="separator"><span>:</span></div>
<div class="second" data-time="Seconden">na</div>
</div>
<p>How can I make the second countdown widget(the one in bottom) work with same codes?</p>
<div class="countdown">
<div class="day" data-time="Day">na</div>
<div class="separator"><span>:</span></div>
<div class="hour" data-time="Hour">na</div>
<div class="separator"><span>:</span></div>
<div class="minute" data-time="Minute">na</div>
<div class="separator"><span>:</span></div>
<div class="second" data-time="Second">na</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65129337
复制相关文章
相似问题
腾讯云开发者
