"Clock"
Bootstrap 4.1.1 Snippet by Milind_Kamthe

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row" style="text-align:center;color:#fff"> <h2 style="text-align:center;color:#fff;width:100%">Minutes Remaining</h2> </div> </div> <!DOCTYPE html> <html> <head> <title>clock</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet"> <style> </style> </head> <body> <div id="MyClockDisplay" class="clock" onload="showTime()"></div> <div id="clock"> <span id="seconds">180 Min.</span> </div> <script> function showTime(){ var date = new Date(); var h = date.getHours(); // 0 - 23 var m = date.getMinutes(); // 0 - 59 var s = date.getSeconds(); // 0 - 59 var session = "AM"; if(h == 0){ h = 12; } if(h > 12){ h = h - 12; session = "PM"; } h = (h < 10) ? "0" + h : h; m = (m < 10) ? "0" + m : m; s = (s < 10) ? "0" + s : s; var time = h + ":" + m + ":" + s + " " + session; document.getElementById("MyClockDisplay").innerText = time; document.getElementById("MyClockDisplay").textContent = time; setTimeout(showTime, 1000); } showTime(); </script> <script type="text/javascript"> timeLeft = 228; function countdown() { timeLeft--; document.getElementById("seconds").innerHTML = String( timeLeft ); if (timeLeft > 0) { setTimeout(countdown,60000); } }; setTimeout(countdown, 0); </script> </body> <html>
body { background-image: radial-gradient( circle 610px at 5.2% 51.6%, rgba(5,8,114,1) 0%, rgba(7,3,53,1) 97.5% ); } .clock { position: absolute; top: 60%; left: 50%; transform: translateX(-50%) translateY(-50%); color: #fff; font-size: 25px; letter-spacing:0px;box-shadow:0 0 5px #000,inset 0 0 5px #000;padding:10px;border: 2px solid #fff;border-radius:7px;background:green;text-shadow: 2px 2px 2px #000;} #clock { width: auto; height: 70px; border-radius: 0; background-color: lightgrey; margin: auto; } span { display: block; width: 100%; margin: auto; padding-top: 0; text-align: center; font-size: 60px; }
timeLeft = 228; function countdown() { timeLeft--; document.getElementById("seconds").innerHTML = String( timeLeft ); if (timeLeft > 0) { setTimeout(countdown,60000); } }; setTimeout(countdown, 0);

Related: See More

Rotating CSS Card

Questions / Comments: