Simple Javascript clock

As the title says:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<html>
<head>
<title>Clock</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<style>
/* Needed for positioning div */
body {
font-size: 58pt;
height: 100vh;
height: 100%;
display: flex;
justify-content: center;
}
#clock {
margin: auto;
text-align: center;
margin: auto;
}
/* Just styling */
body {
background-color: black;
color: yellow;
font-family: 'Arial';
}
</style>
</head>
<body>
<div id=clock>
<div id=date></div>
<div id=time> </div>
</div>
<script>
function nf(i)
{
if (i < 10)
return "0"+i;
else return i;
}
function updateClock()
{
const d = new Date();
d.getTime();
$("#time").html( d.getHours()+":"+
nf(d.getMinutes())+":"+
nf(d.getSeconds()));
let days = ["S&oslash;ndag", "Mandag", "Tirsdag", "Onsdag","Torsdag",
"Fredag","L&oslash;rdag"];
let months = ["Januar","Februar","Marts","April","Maj","Juni","Juli",
"August","September","Oktober","November","December"];
$("#date").html( days[d.getDay()]+" d. "+
d.getDate()+" "+
months[d.getMonth()]+" "+
(1900+d.getYear()));
setTimeout(updateClock, 500);
}
updateClock();
</script>
</body>
</html>
<html> <head> <title>Clock</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"> </script> <style> /* Needed for positioning div */ body { font-size: 58pt; height: 100vh; height: 100%; display: flex; justify-content: center; } #clock { margin: auto; text-align: center; margin: auto; } /* Just styling */ body { background-color: black; color: yellow; font-family: 'Arial'; } </style> </head> <body> <div id=clock> <div id=date></div> <div id=time> </div> </div> <script> function nf(i) { if (i < 10) return "0"+i; else return i; } function updateClock() { const d = new Date(); d.getTime(); $("#time").html( d.getHours()+":"+ nf(d.getMinutes())+":"+ nf(d.getSeconds())); let days = ["S&oslash;ndag", "Mandag", "Tirsdag", "Onsdag","Torsdag", "Fredag","L&oslash;rdag"]; let months = ["Januar","Februar","Marts","April","Maj","Juni","Juli", "August","September","Oktober","November","December"]; $("#date").html( days[d.getDay()]+" d. "+ d.getDate()+" "+ months[d.getMonth()]+" "+ (1900+d.getYear())); setTimeout(updateClock, 500); } updateClock(); </script> </body> </html>
<html>
  <head>
    <title>Clock</title>
    <script 
      src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
    </script>
    <style>
      /* Needed for positioning div */
      body {
        font-size: 58pt;
        height: 100vh;
        height: 100%;
        display: flex;
        justify-content: center;
      }
      #clock {
        margin: auto;
        text-align: center;
        margin: auto;
      }
      /* Just styling */
      body {
        background-color: black;
        color: yellow;
        font-family: 'Arial';
      }
    </style>
  </head>
  <body>
    <div id=clock>
      <div id=date></div>
      <div id=time> </div>
    </div>
    <script>
      function nf(i)
      {
        if (i < 10)
          return "0"+i;
        else return i;
      }
      function updateClock()
      {
        const d = new Date();
        d.getTime();
        $("#time").html( d.getHours()+":"+
                         nf(d.getMinutes())+":"+
                         nf(d.getSeconds()));

        let days = ["S&oslash;ndag", "Mandag", "Tirsdag", "Onsdag","Torsdag",   
                    "Fredag","L&oslash;rdag"];

        let months = ["Januar","Februar","Marts","April","Maj","Juni","Juli",
                      "August","September","Oktober","November","December"];

        $("#date").html( days[d.getDay()]+" d. "+
                         d.getDate()+" "+
                         months[d.getMonth()]+" "+
                        (1900+d.getYear()));
        setTimeout(updateClock, 500);
      }
      updateClock();
    </script>
  </body>
</html>
Dette indlæg blev udgivet i Javascript. Bogmærk permalinket.