文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >如何在同一网页中使用同一JavaScript控件2次？

问如何在同一网页中使用同一JavaScript控件2次？
EN

Stack Overflow用户
提问于 2020-12-03 23:50:12
回答 2查看 46关注 0票数 1

我在Codepen上找到了一个小工具，并在我的网站上实现了它。但是，我想在我的网站的两个不同的页面中使用它两次。当我将HTML复制到其他页面时，它不工作。我知道我必须在我的代码中做一些修改，但我真的不太擅长JS。

你能教我如何使用第二个小工具吗？

​

代码语言：javascript
运行
复制
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);
代码语言：javascript
运行
复制
.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";
}
代码语言：javascript
运行
复制
<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>

​

html
css
javascript
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-04 00:05:04

您正在使用重复的类，而document.getElementById返回单个元素。请改用id并循环访问它们：

​

代码语言：javascript
运行
复制
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);
代码语言：javascript
运行
复制
.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;
}
代码语言：javascript
运行
复制
<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>

​

票数 3
EN

Stack Overflow用户

发布于 2020-12-04 00:42:14

理想情况下，要使其真正可重用和可定制，最好将函数重命名为countdown()，并简单地传入DOM块的元素，然后在元素上使用data-*属性来定义和标签和分隔符。

同时简化CSS，这样就适合了，你只需要将一些不需要的文本居中。

​

代码语言：javascript
运行
复制
function countdown(elm) {
  var countDate = new Date(elm.getAttribute('data-to') || new Date).getTime();

  var now = new Date().getTime();
  var gap = countDate - now;

  var second = 1000;
  var minute = second * 60;
  var hour = minute * 60;
  var day = hour * 24;

  var result = {
    day: Math.floor(gap / day),
    hour: Math.floor((gap % day) / hour),
    minute: Math.floor((gap % hour) / minute),
    second: Math.floor((gap % minute) / second)
  }
  
  Object.keys(result).forEach((key) => {
    var sector = elm.getElementsByClassName(key)[0]
    sector.innerText = (result[key] || 0) + sector.getAttribute('data-label') || ''
  })
}

document.querySelectorAll('.countdown').forEach((elm) => setInterval(() => countdown(elm), 1000));
代码语言：javascript
运行
复制
.text-center {
  text-align: center;
}

.countdown .separator {
  font-weight: 400;
}

.countdown div {
  display: inline-block;
  height: 100px;
  line-height: 100px;
  color: #45deb0;
  font-size: 2em;
  font-weight: 500;
}
代码语言：javascript
运行
复制
<div class="text-center">
  <div class="countdown" data-to="Jan 01, 2021 00:00:00">
    <div class="day">na</div>
    <div class="separator"><span>:</span></div>
    <div class="hour">na</div>
    <div class="separator"><span>:</span></div>
    <div class="minute">na</div>
    <div class="separator"><span>:</span></div>
    <div class="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" data-to="Jan 01, 2022 00:00:00">
    <div class="day" data-label="days, "></div>
    <div class="hour" data-label="hours, "></div>
    <div class="minute" data-label="minutes, "></div>
    <div class="second" data-label="seconds"></div>
  </div>

  <div class="countdown" data-to="Jan 01, 2023 00:00:00">
    <div class="day" data-label="d - "></div>
    <div class="hour" data-label="h - "></div>
    <div class="minute" data-label="m - "></div>
    <div class="second" data-label="s"></div>
  </div>

</div>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/65129337

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档