显示12小时和24小时时间

crcmnpdw  于 2022-10-09  发布在  jQuery
关注(0)|答案(6)|浏览(405)

我想制作一个显示当前时间的网页。当点击“12小时制”按钮时,12小时制的时间将显示在div区域。当点击“24小时格式”按钮时,时间将以24小时显示在div区域。目前,当点击这些按钮时没有任何React。帮助!

Html:

<html>
<head>
    <title>Clock</title>
    <script type="text/javascript" src="clock.js"></script>
</head>
<body>
    <div id="textbox"></div>
    <br/>
    <button type="radio" onclick="getTwelveHrs()">12 Hour Format</button>
    <button type="radio" onclick="getTwentyFourHrs()">24 Hour Format</button>
</body>
</html>

JavaScrip:

function getTwelveHours{
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('textbox').innerHTML = h + ":" + m + ":" + s;
    t = setTimeout(function () {
        startTime()
    }, 500);
}

startTime();

function getTwentyFourHrs() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('textbox').innerHTML = h + ":" + m + ":" + s;
    var t = setTimeout(function() {
        startTime()
    }, 500);
}

function checkTime(i) {
    if (i < 10) {
        i = "0" + i
    }; 
    return i;
}
kyvafyod

kyvafyod1#

为什么不使用像Moment.js这样的库来为您做这件事呢?

http://momentjs.com/docs/

H, HH       24 hour time
h, or hh    12 hour time (use in conjunction with a or A)

因此,在使用oment.js时,只需在JavaScript中使用以下代码

Moment()方法以您指定的格式返回当前日期。因此,当用户单击该按钮时,可以对每个按钮调用以下方法

moment().format("YYYY-MM-DD HH:mm"); // 24H clock
moment().format("YYYY-MM-DD hh:mm"); // 12H clock

我还没有测试过,但它应该可以工作

ars1skjm

ars1skjm2#

12小时格式可以通过使用moment js获得,moment js是执行时间和日期操作的良好库。

Moment().Format(‘YYYY-MM-DD,HH:MM:SS A’)

其中Post或Ante meridiem*(请注意a p中仅有一个字符也被视为有效)*

Moment Js链接:-

https://momentjs.com

y53ybaqx

y53ybaqx3#

同意其他人的观点,是的,该代码有问题,但对于时间转换部分-也许您可以使用JavaScript内置函数来做一些简单的事情:

12小时格式:

let formattedTime = new Date().toLocaleTimeString('en-US');
console.log(formattedTime)

24小时格式:

let currentDateTime = new Date();
    let formattedTime = currentDateTime.getHours() + ":" + currentDateTime.getMinutes() +":" + currentDateTime.getSeconds();
    console.log(formattedTime)
oalqel3c

oalqel3c4#

坦率地说,我不完全确定你是如何试图实现这一点的,但我想我明白你想要什么。

试一试:

window.onload = function() {
 var h, m, s;
 document.getElementById('twelveHrs').style.display = 'none';
 document.getElementById('twentyFourHrs').style.display = 'none';
 getTwelveHrs();
 getTwentyFourHrs();

 function getTwelveHrs() {
  var tag = 'AM';
  checkTime();
  if(h > 12) {
   h -= 12
   tag = 'PM';
  }
  document.getElementById('twelveHrs').innerHTML = h + ':' + m + ':' + s + ' ' + tag;
  t = setTimeout(function() {
   getTwelveHrs()
  }, 1000);
 }

 function getTwentyFourHrs() {
  checkTime();
  document.getElementById('twentyFourHrs').innerHTML = h + ':' + m + ':' + s;
  var t = setTimeout(function() {
   getTwentyFourHrs()
  }, 1000);
 }

 function checkTime() {
  var today = new Date();
  h = today.getHours();
  m = today.getMinutes();
  s = today.getSeconds();
  if(h < 10)
   h = '0' + h;
  if(m < 10)
   m = '0' + m;
  if(s < 10)
   s = '0' + s;
  return h, m, s;
 }
}

function displayTwelveHrs() {
 document.getElementById('twentyFourHrs').style.display = 'none';
 document.getElementById('twelveHrs').style.display = '';
}

function displayTwentyFourHrs() {
 document.getElementById('twelveHrs').style.display = 'none';
 document.getElementById('twentyFourHrs').style.display = '';
}

然后将您的HTML替换为:

<div id="twelveHrs"></div>
<div id="twentyFourHrs"></div>
<br />
<button type="radio" onclick="displayTwelveHrs()">12 Hour Format</button>
<button type="radio" onclick="displayTwentyFourHrs()">24 Hour Format</button>

基本上,当页面加载时,它将启动时钟并隐藏相应的div标记。然后你点击一个按钮,它就会显示你想要的div,而隐藏另一个。

可以在http://jsfiddle.net/fp3Luwzc/中找到可用的JSFdle

oxiaedzo

oxiaedzo5#

const time = new Date().getHours('en-US',{hour12:false});
const time = new Date().getHours('en-US',{hour12:true});
5kgi1eie

5kgi1eie6#

既然工作的最后期限就要到了,现在真的就快到了,我决定回答这个5年前的问题。

大多数人推荐使用Moment.js库,这真的很好,因为在大多数情况下,重新发明轮子是没有意义的,相信一个每周有9,897,199次NPM下载量的库无疑是一个明智的选择。

然而,由于提供基于OP代码的解决方案的唯一答案似乎有一些错误;我想谦虚地提出我的解决方案:

const FORMATS = {
  TwelveHours: 12,
  TwentyFourHours: 24
}

class Clock {
  format = FORMATS.TwentyFourHours;

  constructor(clockDivId) {
    this.clockDivId = clockDivId;

    this.clockInterval = setInterval(() => {
      document.getElementById(clockDivId).innerHTML = this.getCurrentTime().format(this.format);
    }, 500)
  }

  getCurrentTime() {
    let today = new Date();
    return new Time(today.getHours(), today.getMinutes(), today.getSeconds());
  }

  switchTo12HourFormat() {
    this.format = FORMATS.TwelveHours
  }

  switchTo24HourFormat() {
    this.format = FORMATS.TwentyFourHours
  }

  destroy() {
    clearInterval(this.clockInterval);
  }

}

class Time {

  constructor(hours, minutes, seconds) {
    this.hours = hours;
    this.minutes = minutes;
    this.seconds = seconds;
  }

  format(type) {
    switch (type) {
      case FORMATS.TwentyFourHours: {
        return this.print(this.hours)
      }
      case FORMATS.TwelveHours: {
        let tag = this.hours >= 12 ? 'p.m' : 'a.m';
        let hours = this.hours % 12;
        if (hours == 0) {
          hours = 12;
        }
        return this.print(hours) + ' ' + tag;
      }

    }

  }

  //private
  to2Digits(number) {
    return number < 10 ? '0' + number : '' + number;
  }

  print(hours) {
    return this.to2Digits(hours) + ':' + this.to2Digits(this.minutes) + ':' + this.to2Digits(this.seconds);
  }

}

let clock = new Clock("clock");
<html>

<head>
  <title>Clock</title>
</head>

<body>
  <div id="clock"></div>
  <br/>
  <button onclick="clock.switchTo12HourFormat()">12 Hour Format</button>
  <button onclick="clock.switchTo24HourFormat();">24 Hour Format</button>
</body>

</html>

哦不,哦,叉子,不!我写了“print”而不是“this.print”,并且我已经在Google Chrome上运行了它。

基本上,UI被打印对话框阻止了,我丢失了所有的代码,不得不重新编写它,现在我要回家享受一些睡眠,也许,也许是一集HIMYM。

相关问题