Skip to content

Instantly share code, notes, and snippets.

@rgaz1962

rgaz1962/index.html

Created February 15, 2022 20:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rgaz1962/7682345eacda7dcd23cfca56bbcbcc73 to your computer and use it in GitHub Desktop.
Save rgaz1962/7682345eacda7dcd23cfca56bbcbcc73 to your computer and use it in GitHub Desktop.
Download ZIP
Moment.js formatting examples
Raw
index.html
<head>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/mckamey/countdownjs/master/countdown.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
</head>
<h1>A Moment in time...</h1>
</div>
<span>
<div class="text">Time displayed as moment.format('HH:mm:ss') <div class=".countdown" id ="clock"></div><br></div>
<div class="text">Time displayed as moment().format('MMMM Do YYYY, h:mm:ss a') <div class=".countdown" id ="clock2"></div><br></div>
<div class="text">Time displayed as moment().format('LLLL'); <div class=".countdown" id ="clock3"></div><br></div>
<div class="text">Time displayed as moment().format();<div class=".countdown" id ="clock4"></div><br></div>
<div class="text">Time displayed as moment().add(7, 'days').subtract(1, 'months').calendar();<div class=".countdown" id ="clock5"></div><br></div>
<div class="text">Time displayed as moment().add(7, 'days').subtract(1, 'months').year(2009).hours(0).minutes(0).seconds(0).fromNow();<div class=".countdown" id ="clock6"></div><br></div>
</span>
<img src="https://i.imgur.com/PeqnDDA.gif" class="hacked" id="hack">
Raw
script.js
function displayTime() {
var time = moment().format('HH:mm:ss');
var time2 = moment().format('MMMM Do YYYY, h:mm:ss a')
var time3 = moment().format('LLLL');
var time4 = moment().format();
var time5 = moment().add(7, 'days').subtract(1, 'months').calendar();
var time6 = moment().add(7, 'days').subtract(1, 'months').year(2009).hours(0).minutes(0).seconds(0).fromNow();
$('#clock').html(time);
$('#clock2').html(time2);
$('#clock3').html(time3);
$('#clock4').html(time4);
$('#clock5').html(time5);
$('#clock6').html(time6);
setTimeout(displayTime, 1000);
}
$(document).ready(function() {
displayTime();
});
Raw
style.css
body {
background:black;
}
h1 {
font-family: 'Helvetica';
display:flex;
align-items:center;
justify-content:center;
background:black;
color: #7BD711;
text-shadow: 1px 1px darkslategrey;
}
.text {
font-family: 'Helvetica';
font-size:22px;
display:relative;
color: white;
align-items:center;
justify-content:center;
background:black;
}
#timer{
font-family: 'Inconsolata', monospace;
color: aqua;
font-size:22px;
text-shadow: 1px 1px darkslategrey;
}
.duration { font-weight: bold; }
.countdown, #clock, #clock2, #clock3, #clock4, #clock5, #clock6 {
display: flex;
font-size:42px;
color:#7BD711;
text-shadow: 2px 2px 5px darkslategrey;
font-family: 'Inconsolata';
text-align: center;
justify-content: center;
position: relative;
}
.hacked {
display: block;
opacity: 0;
margin-left: auto;
margin-right: auto;
width: 40%;
animation-name: pwned;
animation-duration: 4s;
animation-timing-function: ease, cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-delay: 172s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running;
}
@keyframes pwned {
0%{
opacity: 0;
width: 75px;
height: 100px;
top: 50%;
}
50% {
opacity: 1;
width: 100%;
height: 100%;
top: 50%;
}
100% {
opacity: 0;
top: 50%;
display: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment