时间戳

首页 > 解决方案 > 使用 Javascript 单击按钮在生成的列表中创建多个时钟

javascript - 使用 Javascript 单击按钮在生成的列表中创建多个时钟

问题描述

我希望用户从下拉列表中选择所需的时区，单击添加并显示时间。很容易。但我也希望用户能够为其他时区添加额外的时钟。我遇到了两个相互矛盾的问题：

  1. 我可以将时钟添加到列表中，但它们不会随着 setInterval 前进，因为我需要使列表中的 id 唯一，这会产生错误。
  2. 如果我消除了唯一的 id 变量（unique++），那么时钟可以工作，但是每次创建一个新时钟时，它们都会相互覆盖，因为它们的 id 不是唯一的。

下面的代码和jsfiddle：

var t; 
var nd;
var uniqueID = 0;

// add timezone clock and add 1 to uniqueID counter
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('addTimeZone').addEventListener('click', getSelectTime);
    document.getElementById('addTimeZone').addEventListener('click', addUniqueID);
});

//add 1 to uniqueID everytime the 'Add' button is clicked
function addUniqueID() {
    uniqueID++;
}
function getSelectTime() {
    //create space for new list item
    document.getElementById("addedClock").style.display = "block";
    
    //get timezone offset from dropdown
    var t = document.getElementById("timezone").value;
    
    //build new list item
    var list = document.getElementById('newClocks');
    var entry = document.createElement('li');
    list.appendChild(entry);
    
    //add div to list to display time and add unique id
    var divValue = document.createElement("div");
    divValue.id = 'resultTZValue' + uniqueID;
    entry.appendChild(divValue);
    
    //run clock function, pass the timezone offset and uniqueID
    tzClock(t , uniqueID);
    setInterval(() => {tzClock(t , uniqueID); }, 1000);
}
function tzClock(t , uniqueID) { 
    var d = new Date();
    utc = d.getTime() + (d.getTimezoneOffset() * 60000);
    nd = new Date(utc + (3600000 * t)).toLocaleTimeString();
    
    //plug this new time data into list item
    document.getElementById("resultTZValue" + uniqueID).innerHTML = nd ;
}
<html>
<head>
<title>Good Times</title>    
<style>
li {list-style-type: none;}
</style>
</head>
<body>
<div id="addedClock" class="infoContainer" style="display:none">
    <ol id="newClocks"></ol>
</div>
<div class="addTimeZone">
    <div class="dropDown"> 
        <form>
          <label for="timezone">Add Additional Timezone:</label>
          <select name="timezone" id="timezone">
            <option value="">Choose</option>
            <option value="0" >Universal Coordinated Time</option>
            <option value="-5">Eastern Standard</option>
            <option value="-6">Central Standard</option>
            <option value="-7">Mountain Standard</option>
            <option value="-8">Pacific Standard</option>
          </select>
        </form>
    </div>
    <div class="addBtn"> 
        <button id='addTimeZone'>Add</button>
    </div>
</div>
<script src="test.js"></script>
</body>
</html>

jsfiddle在这里

标签： javascripthtml

解决方案

我看到有两种方法可以解决这个问题。

第一个选项

在函数中调用另一个setInterval函数会导致它总是获取全局变量，所以不要setInterval(() => {tzClock(t , uniqueID); }, 1000) 像setInterval(tzClock, 1000, t, uniqueID). 工作小提琴。

第二种选择

您始终可以将元素作为参数而不是 id 传递，因此您可以只使用divValue您创建的并调用element.innerHTML而不是document.getElementById(...).innerHTML. 工作小提琴。

推荐阅读