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

Question

I created a digital clock on my site with Javascript and would like to change it from military time to standard time. I just want it to show the hours and minutes as well. What should I do to implement this?

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>

I'm sorry guys, I'm completely new to Javascript and my professor just gave us this clock assignment as a one week exercise, I don't know what's being referred to or what you guys mean unfortunately. :( — Alison Dyer, Oct 17 '16 at 02:53
The question posted immediately before yours also happened to be about converting from 24-hour to am/pm format. Perhaps [my answer to that question](http://stackoverflow.com/a/40077780/615754) can give you some clues. — nnnnnn, Oct 17 '16 at 02:58

R. Schifini · Answer 1 · 2016-10-17T13:10:11.377

0

The comment by j08691 is correct, but I'll add the AM/PM information:

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;

edited Oct 17 '16 at 13:10

answered Oct 17 '16 at 02:53

R. Schifini

9,085
2
26
32

Sreekanth · Accepted Answer · 2016-10-17T03:00:31.390

If you are open to use a plugin like moment, it would be pretty simple.

MomentJs is a pretty handy and useful plugin to deal with date and time.

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>

Rob this does answer my question! It was super helpful. I am sorry if I didn't explain myself more clearly, and apologize for any confusion. The only thing I'm still not sure of is how to remove the seconds from the clock. But this is exactly what I needed! — Alison Dyer, Oct 17 '16 at 03:06
Oh sorry let me explain Rob, our professor wants us to use plugins since this class (and this assignment) is about design, not code. I know HTML and CSS but right now have absolutely no knowledge of Javascript to know how to actually implement this myself. We get graded on the design and that it works, not that we used our own code. — Alison Dyer, Oct 17 '16 at 03:11

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

2 Answers2