Question

你能告诉我如何设置这种格式的时间HH：MM：SS。我想在div中设置这个吗？

Answer 1

function checkTime(i) {
  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();
  // add a zero in front of numbers<10
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
  t = setTimeout(function() {
    startTime()
  }, 500);
}
startTime();

<div id="time"></div>

DEMO仅使用javaScript

<强>更新

Updated Demo

(function () {
    function checkTime(i) {
        return (i < 10) ? "0" + i : i;
    }

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

Answer 2

您可以使用原生函数Date.toLocaleTimeString()：

var d = new Date();
var n = d.toLocaleTimeString();

这将显示例如：

"11:33:01"

我在http://www.w3schools.com/jsref/jsref_tolocaletimestring.asp

上找到了它

Answer 3

您可以在Javascript。

中执行此操作

var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());

目前它返回15:5:18。请注意，如果任何值小于10，它们将仅使用一个数字而不是两个数字显示。

在JSFiddle

中查看此内容

<强>更新
对于前缀0的尝试

var time = new Date();
console.log(
    ("0" + time.getHours()).slice(-2)   + ":" + 
    ("0" + time.getMinutes()).slice(-2) + ":" + 
    ("0" + time.getSeconds()).slice(-2));

Answer 4

您可以使用moment.js执行此操作。

var now = new moment();
console.log(now.format("HH:mm:ss"));

输出：

16:30:03

Answer 5

new Date().toTimeString().slice(0,8)

请注意，toLocaleTimeString（）可能返回类似9:00:00 AM的内容。

Answer 6

new Date().toLocaleTimeString('it-IT')

如果需要，it-IT语言环境会增加时间，并忽略PM或AM 01:33:01

Answer 7

紧凑型时钟功能：

Register::Register(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Register)
{
    ui->setupUi(this);
    QRegExp rx(EMAIL_RX);
    QRegExpValidator *vali = new QRegExpValidator(rx,this);
    ui->Txtemail->setValidator(vali);
}

Register::~Register()
{
    delete ui;
}

void Register::on_BtnLogin_clicked()
{
   Login *l = new Login();
   l->show();
   hide();
}

Answer 8

此代码将在控制台中以HH：MM：SS格式输出当前时间，它会考虑GMT时区。

var currentTime = Date.now()
var GMT = -(new Date()).getTimezoneOffset()/60;
var totalSeconds = Math.floor(currentTime/1000);
seconds = ('0' + totalSeconds % 60).slice(-2);
var totalMinutes = Math.floor(totalSeconds/60);
minutes = ('0' + totalMinutes % 60).slice(-2);
var totalHours = Math.floor(totalMinutes/60);
hours = ('0' + (totalHours+GMT) % 24).slice(-2);
var timeDisplay = hours + ":" + minutes + ":" + seconds;
console.log(timeDisplay);
//Output is: 11:16:55

Answer 9

这是如何使用javascript在div（only_time）中设置时间的示例。

function date_time() {
    var date = new Date();
    var am_pm = "AM";
    var hour = date.getHours();
    if(hour>=12){
        am_pm = "PM";
    }
    if (hour == 0) {
        hour = 12;
    }
    if(hour>12){
        hour = hour - 12;
    }
    if(hour<10){
        hour = "0"+hour;
    }

    var minute = date.getMinutes();
    if (minute<10){
        minute = "0"+minute;
    }
    var sec = date.getSeconds();
    if(sec<10){
        sec = "0"+sec;
    }

    document.getElementById("time").innerHTML =  hour+":"+minute+":"+sec+" "+am_pm;
}
setInterval(date_time,500);
<per>
<div class="date" id="time"></div>
</per>

Answer 10

function realtime() {
  
  let time = moment().format('h:mm:ss a');
  document.getElementById('time').innerHTML = time;
  
  setInterval(() => {
    time = moment().format('h:mm:ss a');
    document.getElementById('time').innerHTML = time;
  }, 1000)
}

realtime();

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

<div id="time"></div>

使用moment.js和setInterval的非常简单的方法。

setInterval(() => {
  moment().format('h:mm:ss a');
}, 1000)

示例输出

使用setInterval()设置为1000ms或1秒，输出将每1秒刷新一次。

3:25:50 pm

这就是我在我的一个附属项目中使用此方法的方式。

setInterval(() => {
  this.time = this.shared.time;
}, 1000)

也许您想知道使用setInterval()是否会导致某些性能问题。

Is setInterval CPU intensive?

我认为setInterval本质上不会给您带来严重的性能问题。我怀疑这种声誉可能来自更早的时代，当时CPU的功能不那么强大。 ...-寂寞的一天

否，setInterval本身并不占用大量CPU。如果您有很多间隔以非常短的周期运行（或者以非常长的间隔运行非常复杂的操作），则这很容易占用CPU资源，具体取决于间隔的执行情况和执行的频率。 ...-aroth

但是，总的来说，在您的站点上确实像在很多地方使用setInterval可能会减慢速度。 20个同时运行的间隔或多或少的繁重工作都会影响演出。然后再说一次..我真的可以弄乱任何部分，我想这不是setInterval的问题。 ...-jAndy

Answer 11

使用这种方式：

var d = new Date();
localtime = d.toLocaleTimeString('en-US', { hour12: false });

结果：18:56:31

Answer 12

new Date().toLocaleTimeString()

Answer 13

function realtime() {
  
  let time = moment().format('hh:mm:ss.SS a').replace("m", "");
  document.getElementById('time').innerHTML = time;
  
  setInterval(() => {
    time = moment().format('hh:mm:ss.SS A');
    document.getElementById('time').innerHTML = time;
  }, 0)
}

realtime();

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

<div id="time"></div>

如何以HH：MM：SS格式在JavaScript中显示当前时间？

13 个答案: