[moment.js] clock timer
How do I make an [moment.js] clock timer?
What is a [moment.js] clock timer? How do you make a [moment.js] clock timer? This script and codes were developed by Mori on 26 October 2022, Wednesday.
[moment.js] clock timer - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>[moment.js] clock timer</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Timer--> <div class="container"> <div class="clock"> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> </div> </div>
<script type="text/javascript" src="http://cdn.gbtags.com/moment.js/2.8.1/moment.min.js"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.gbtags.com/moment.js/2.8.1/moment.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
[moment.js] clock timer - Script Codes CSS Codes
.container { background: silver; padding: 50px 0;
}
.clock { border: 5px solid #FFF; border-radius: 100%; display: block; height: 150px; width: 150px; position: relative; margin: 0 auto;
}
.clock .hour { background: #fff; height: 0; left: 50%; position: absolute; top: 50%; width: 0; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; margin: -42px -2px 0; padding: 42px 2px 0;
}
.clock .minute { background: #fff; height: 0; left: 50%; position: absolute; top: 50%; width: 0; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; margin: -60px -2px 0; padding: 60px 2px 0;
}
.clock .second { background: #fff; background: rgba(255, 255, 255, 0.8); height: 0; left: 50%; position: absolute; top: 50%; width: 0; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; margin: -60px -1px 0; padding: 60px 1px 0;
}
[moment.js] clock timer - Script Codes JS Codes
function clock() { var t = moment(), s = t.seconds() * 6, a = t.minutes() * 6, o = t.hours() % 12 / 12 * 360 + (a / 12); $(".hour").css("transform", "rotate(" + o + "deg)"); $(".minute").css("transform", "rotate(" + a + "deg)"); $(".second").css("transform", "rotate(" + s + "deg)"); } function refreshClock() { clock(), setTimeout(refreshClock, 1000); } refreshClock();
Developer | Mori |
Username | moriko232 |
Uploaded | October 26, 2022 |
Rating | 3 |
Size | 2,499 Kb |
Views | 22,264 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
PACE loadding effect | 2,164 Kb |
Sticky menu | 3,297 Kb |
Auto zoom in background | 1,994 Kb |
Hover menu | 3,040 Kb |
Menu item hover line effect | 2,998 Kb |
FadeToggle | 1,467 Kb |
Tab menu style | 3,615 Kb |
Scroll and change numbers | 2,249 Kb |
Animate hover effect for products | 3,137 Kb |
Hover line effect | 2,439 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
Cut and Paste Roll Link | BottomlineInteractive | 2,546 Kb |
CSS Chat Bubbles | Boylett | 2,094 Kb |
A Pen by Xand0r | Xand0r | 1,928 Kb |
Filtering with shuffle.js | Deyand | 2,712 Kb |
Retina canvas w. resize | Erikterwan | 1,882 Kb |
Marching Squares Visualized | Sakri | 7,074 Kb |
NeeilTimer | Neeilan | 2,836 Kb |
Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
A Pen by Jim Savage | Madebyjam | 2,418 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!