我如何改变我的Javascript数字时钟从军事时间到标准时间

How Do I Change My Javascript Digital Clock from Military Time to Standard Time?

本文关键字:时钟 时间 标准时间 数字 Javascript 何改变 改变 我的      更新时间:2023-09-26

我用Javascript在我的网站上创建了一个数字时钟,并想将其从军事时间更改为标准时间。我只是希望它也能显示小时和分钟。我应该做些什么来实现这一点?

body {
  background-color: black;
  margin-left: 5%;
  margin-right: 5%;
}
#txt {
  color: white;
  float: left;
  font-family: OpenSans;
  font-size: 90px;
  margin: 20px;
}
#weather {
  color: white;
  float: right;
  font-family: OpenSans;
  font-size: 40px;
  margin: 20px;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Blooming Time And Temperature</title>
    <link href="css/format.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script>
    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('txt').innerHTML =
        h + ":" + m + ":" + s;
        var t = setTimeout(startTime, 500);
    }
    function checkTime(i) {
        if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
        return i;
    }
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="js/jquery.simpleWeather.min.js"></script>
    <script>
      $(document).ready(function() {
        $.simpleWeather({
          location: 'Brooklyn, NY',
          woeid: '',
          unit: 'f',
          success: function(weather) {
            html = '<p>'+weather.temp+'&deg;'+weather.units.temp+'</p>';
            html += '<div id="city">'+weather.city+', '+weather.region+'</div>';
            $("#weather").html(html);
          },
          error: function(error) {
            $("#weather").html('<p>'+error+'</p>');
          }
        });
      });
    </script>
  </head>
  <body onload="startTime()">
    <div id="txt"></div>
    <div id="weather"></div>
  </body>
</html>

如果你是开放使用插件的时刻,这将是相当简单的。

MomentJs是一个非常方便和有用的插件来处理日期和时间。

var timeOut;
function startTime() {
  document.getElementById('txt').innerHTML =
    moment().format("hh:mm:ss A");
  clearTimeout(timeOut);
  timeOut = setTimeout(startTime, 1000);
}
$(document).ready(function() {
  startTime();
  $.simpleWeather({
    location: 'Brooklyn, NY',
    woeid: '',
    unit: 'f',
    success: function(weather) {
      html = '<p>' + weather.temp + '&deg;' + weather.units.temp + '</p>';
      html += '<div id="city">' + weather.city + ', ' + weather.region + '</div>';
      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>' + error + '</p>');
    }
  });
});
body {
  background-color: black;
  margin-left: 5%;
  margin-right: 5%;
}
#txt {
  color: white;
  float: left;
  font-family: OpenSans;
  font-size: 90px;
  margin: 20px;
}
#weather {
  color: white;
  float: right;
  font-family: OpenSans;
  font-size: 40px;
  margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>
<div id="txt"></div>
<div id="weather"></div>

j08691的评论是正确的,但是我将添加AM/PM信息:

var AMPM = (h >= 12)? " PM":" AM";
if (h > 12) h = h - 12;
if (h < 1) h = h + 12;
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s + AMPM;