1

我希望在单击我的标签时执行一个 javascript 函数，该函数将返回该单击的确切时间，包括小时、分钟和秒。我有一个 javascript 函数可以执行我想要的操作，但是当我单击标签时，我什么也看不到。难道我做错了什么？

function getTime() {
    const timeNow = new Date();
    const hours = timeNow.getHours();
    const minutes = timeNow.getMinutes();
    const seconds = timeNow.getSeconds();
    let timeString = '' + ((hours > 24) ? hours - 12 : hours);
    timeString += ((minutes < 10) ? ":0" : ":") + minutes;
    timeString += ((seconds < 10) ? ":0" : ":") + seconds;
    timeString += (hours >= 12) ? "" : "";
    return timeString;
}

const hoursSpan = document.getElementById('hours');
hoursSpan.textContent = getTime();
<div class="wrap-input100 rs1-wrap-input100 validate-input">
    <span class="label-input100">Date</span>
    <input class="input100" onclick="getTime()" id="hours" name="Date" placeholder="Date">
    <span class="focus-input100"></span>
</div>

4

5 回答 5

2

<input>元素没有textContent你应该改变。将value你的onclick事件设置为另一个每次点击function都会改变的事件。 您还可以添加以下行以摆脱其他value

getTime()changeTime()

hoursSpan.textContent = getTime();


const hoursSpan = document.getElementById('hours');
function getTime() {
        const timeNow = new Date();
        const hours = timeNow.getHours();
        const minutes = timeNow.getMinutes();
        const seconds = timeNow.getSeconds();
        let timeString = '' + ((hours > 24) ? hours - 12 : hours);
        timeString += ((minutes < 10) ? ":0" : ":") + minutes;
        timeString += ((seconds < 10) ? ":0" : ":") + seconds;
        timeString += (hours >= 12) ? "" : "";
        return timeString;
    }

function changeTime(){
  hoursSpan.value = getTime();
}
<div class="wrap-input100 rs1-wrap-input100 validate-input">
    <span class="label-input100">Date</span>
    <input class="input100" onclick="changeTime()" id="hours" name="Date" placeholder="Date">
    <span class="focus-input100"></span>
 </div>

于 2019-03-11T16:09:42.957 回答
0

我想说这里最可能的问题是您const在 vanilla JS 中用作变量声明符。您的浏览器可能不知道如何正确处理它，因此它会中断。使用 Babel 编译时，您的代码在此处 (CodePen) 在线运行。也许将您的代码更改为：

function getTime() {
    var timeNow = new Date();
    var hours = timeNow.getHours();
    var minutes = timeNow.getMinutes();
    var seconds = timeNow.getSeconds();
    var timeString = '' + ((hours > 24) ? hours - 12 : hours);
    timeString += ((minutes < 10) ? ":0" : ":") + minutes;
    timeString += ((seconds < 10) ? ":0" : ":") + seconds;
    timeString += (hours >= 12) ? "" : "";
    return timeString;
}

var hoursSpan = document.getElementById('hours');
hoursSpan.textContent = getTime();

在 getTime 之外拥有 document.getElementById 不是问题。

编辑

我没有意识到您正在设置输入的值，只需更改：

const hoursSpan = document.getElementById('hours');
hoursSpan.textContent = getTime();

至：

const hoursSpan = document.getElementById('hours');
hoursSpan.value = getTime();

不过我想补充一点，如果您要使用 Let/Const 声明，我建议您使用Babel之类的东西编译您的代码，以便它可以跨浏览器工作。

于 2019-03-11T16:10:40.373 回答
0

HTML：

<div class="wrap-input100 rs1-wrap-input100 validate-input">
    <span class="label-input100">Date</span>
    <!-- this reference is passed to the called function -->
    <input class="input100" onclick="getTime(this)" id="hours" name="Date" placeholder="Date">
    <span class="focus-input100"></span>
 </div>

JavaScript：（将时间字符串分配给输入字段的 value 属性而不是 textContext 属性）

<script language="JavaScript">

    function getTime(self) {
        const timeNow = new Date();
        const hours = timeNow.getHours();
        const minutes = timeNow.getMinutes();
        const seconds = timeNow.getSeconds();
        let timeString = '' + ((hours > 24) ? hours - 12 : hours);
        timeString += ((minutes < 10) ? ":0" : ":") + minutes;
        timeString += ((seconds < 10) ? ":0" : ":") + seconds;
        timeString += (hours >= 12) ? "" : "";
        // Assign timeString to value property
        self.value = timeString;
    }

</script>
于 2019-03-11T16:09:25.570 回答
0

只需将时间显示也放入 getTime 函数中

function getTime() {
     const timeNow = new Date();
     const hours = timeNow.getHours();
     const minutes = timeNow.getMinutes();
     const seconds = timeNow.getSeconds();
     let timeString = '' + ((hours > 24) ? hours - 12 : hours);
     timeString += ((minutes < 10) ? ":0" : ":") + minutes;
     timeString += ((seconds < 10) ? ":0" : ":") + seconds;
     timeString += (hours >= 12) ? "" : "";


     const hoursSpan = document.getElementById('hours');
     hoursSpan.textContent = timeString;
 }
于 2019-03-11T16:09:35.027 回答
0

你需要使用value& 不textContent

function getTime() {
  const timeNow = new Date();
  const hours = timeNow.getHours();
  const minutes = timeNow.getMinutes();
  const seconds = timeNow.getSeconds();
  let timeString = '' + ((hours > 24) ? hours - 12 : hours);
  timeString += ((minutes < 10) ? ":0" : ":") + minutes;
  timeString += ((seconds < 10) ? ":0" : ":") + seconds;
  timeString += (hours >= 12) ? "" : "";
  let hoursSpan = document.getElementById('hoursCon');
  hoursSpan.value = timeString;
  return timeString;
}
<div class="wrap-input100 rs1-wrap-input100 validate-input">
  <span class="label-input100">Date</span>
  <input class="input100" onclick="getTime()" id="hoursCon" name="Date" placeholder="Date">
  <span class="focus-input100"></span>
</div>

于 2019-03-11T16:23:29.710 回答