Seconds counter
How do I make an seconds counter?
What is a seconds counter? How do you make a seconds counter? This script and codes were developed by Asakasinsky on 27 December 2022, Tuesday.
Seconds counter - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>seconds counter</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Oswald);
body, html { width:100%; height:100%; margin:0; padding:0;
}
body { background: #555555; background-image: -webkit-radial-gradient(cover, #f1f1f1, #cbcbcb); background-image: -moz-radial-gradient(cover, #f1f1f1, #cbcbcb); background-image: -o-radial-gradient(cover, #f1f1f1, #cbcbcb); background-image: radial-gradient(cover, #f1f1f1, #cbcbcb);
}
h1 { font-family:'Roboto Condensed', cursive; text-align:center; line-height:100px; font-size:28px; font-weight:normal; position:absolute; top:50%; left:50%; margin:-50px 0 0 -300px; width:600px; color:#939393;
}
h1 .counter { font-size:50px; width:80px; height:50px; font-family:'Oswald', sans-serif; display:inline-block; padding:0 30px 0 10px; perspective: 200px; position:relative; top:-7px;
}
h1 .counter > span { display:block; position:absolute; overflow:hidden; padding:0 25px; background:-webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#f2f2f2)); background:-webkit-linear-gradient(#FFF 0%, #f2f2f2 100%); background:-moz-linear-gradient(#FFF 0%, #f2f2f2 100%); background:-o-linear-gradient(#FFF 0%, #f2f2f2 100%); background:linear-gradient(#FFF 0%, #f2f2f2 100%); height:45px; width:50px; text-align:center; backface-visibility:hidden; transform-style: preserve-3d;
}
h1 .counter > span span { color:#99df1c;
}
h1 .counter > span.decor.top { box-shadow: 0 24px 43px -3px rgba(0, 0, 0, 0.45);
}
h1 .counter > span.decor.bottom { box-shadow: 0 2px 0px -1px #d8d8d8, 0 4px 0px -2px #c7c7c7, 0 6px 0px -3px #d8d8d8, 0 8px 0px -4px #c6c6c6, 0 10px 0px -5px #d6d6d6, 0 12px 0px -6px #c9c9c9, 0 14px 0px -7px #d8d8d8, 0 14px 23px -9px rgba(0, 0, 0, 0.8);
}
h1 .counter > span.top { box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.2); border-radius:3px 3px 0 0;
}
h1 .counter > span.top span { position:relative; bottom:5px;
}
h1 .counter > span.bottom { top:46px; box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.2); border-radius:0 0 3px 3px;
}
h1 .counter > span.bottom span { position:relative; top:-51px;
}
h1 .counter > span.from.bottom { z-index:1; transform-origin: 0% 0%; animation: from-flip 1s;
}
h1 .counter > span.to.top { z-index:1; transform-origin: 100% 100%; animation: to-flip 1s;
}
@keyframes from-flip { 0% { transform: rotateX(180deg); } 100% { transform: rotateX(0deg); }
}
@keyframes to-flip { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(-180deg); }
}
@keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }
}
.counter .shadow { display:block; width:120px; height:45px; left:-25px; top:-100px !important; overflow:hidden; z-index:0; opacity:0;
}
.counter .top .shadow { background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
}
.counter .bottom .shadow { background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
}
.counter .from.top .shadow { animation: fade-out 1s; }
.counter .to.bottom .shadow { animation: fade-in 1s; }
.hide .shadow { animation:none !important; }
@media screen and (-webkit-min-device-pixel-ratio:0) { h1 .counter > span span { color:rgba(0, 0, 0, 0); background: linear-gradient(#99df1c 0%, #6dbe0a 100%); -webkit-background-clip: text; -webkit-text-stroke:0.03em #85c614; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1> Still <div class="counter"> <span class="decor top"></span> <span class="decor bottom"></span> <span class="from top"><span></span><span class="shadow"></span></span> <span class="from bottom"><span></span><span class="shadow"></span></span> <span class="to top"><span></span><span class="shadow"></span></span> <span class="to bottom"><span></span><span class="shadow"></span></span> </div> seconds from this minute.
</h1> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Seconds counter - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Oswald);
body, html { width:100%; height:100%; margin:0; padding:0;
}
body { background: #555555; background-image: -webkit-radial-gradient(cover, #f1f1f1, #cbcbcb); background-image: -moz-radial-gradient(cover, #f1f1f1, #cbcbcb); background-image: -o-radial-gradient(cover, #f1f1f1, #cbcbcb); background-image: radial-gradient(cover, #f1f1f1, #cbcbcb);
}
h1 { font-family:'Roboto Condensed', cursive; text-align:center; line-height:100px; font-size:28px; font-weight:normal; position:absolute; top:50%; left:50%; margin:-50px 0 0 -300px; width:600px; color:#939393;
}
h1 .counter { font-size:50px; width:80px; height:50px; font-family:'Oswald', sans-serif; display:inline-block; padding:0 30px 0 10px; perspective: 200px; position:relative; top:-7px;
}
h1 .counter > span { display:block; position:absolute; overflow:hidden; padding:0 25px; background:-webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#f2f2f2)); background:-webkit-linear-gradient(#FFF 0%, #f2f2f2 100%); background:-moz-linear-gradient(#FFF 0%, #f2f2f2 100%); background:-o-linear-gradient(#FFF 0%, #f2f2f2 100%); background:linear-gradient(#FFF 0%, #f2f2f2 100%); height:45px; width:50px; text-align:center; backface-visibility:hidden; transform-style: preserve-3d;
}
h1 .counter > span span { color:#99df1c;
}
h1 .counter > span.decor.top { box-shadow: 0 24px 43px -3px rgba(0, 0, 0, 0.45);
}
h1 .counter > span.decor.bottom { box-shadow: 0 2px 0px -1px #d8d8d8, 0 4px 0px -2px #c7c7c7, 0 6px 0px -3px #d8d8d8, 0 8px 0px -4px #c6c6c6, 0 10px 0px -5px #d6d6d6, 0 12px 0px -6px #c9c9c9, 0 14px 0px -7px #d8d8d8, 0 14px 23px -9px rgba(0, 0, 0, 0.8);
}
h1 .counter > span.top { box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.2); border-radius:3px 3px 0 0;
}
h1 .counter > span.top span { position:relative; bottom:5px;
}
h1 .counter > span.bottom { top:46px; box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.2); border-radius:0 0 3px 3px;
}
h1 .counter > span.bottom span { position:relative; top:-51px;
}
h1 .counter > span.from.bottom { z-index:1; transform-origin: 0% 0%; animation: from-flip 1s;
}
h1 .counter > span.to.top { z-index:1; transform-origin: 100% 100%; animation: to-flip 1s;
}
@keyframes from-flip { 0% { transform: rotateX(180deg); } 100% { transform: rotateX(0deg); }
}
@keyframes to-flip { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(-180deg); }
}
@keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }
}
.counter .shadow { display:block; width:120px; height:45px; left:-25px; top:-100px !important; overflow:hidden; z-index:0; opacity:0;
}
.counter .top .shadow { background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
}
.counter .bottom .shadow { background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
}
.counter .from.top .shadow { animation: fade-out 1s; }
.counter .to.bottom .shadow { animation: fade-in 1s; }
.hide .shadow { animation:none !important; }
@media screen and (-webkit-min-device-pixel-ratio:0) { h1 .counter > span span { color:rgba(0, 0, 0, 0); background: linear-gradient(#99df1c 0%, #6dbe0a 100%); -webkit-background-clip: text; -webkit-text-stroke:0.03em #85c614; }
}
Seconds counter - Script Codes JS Codes
calcValues();
var int = setInterval(calcValues, 1000);
function calcValues() { $('.counter .to') .addClass('hide') .removeClass('to') .addClass('from') .removeClass('hide') .addClass('n') .find('span:not(.shadow)').each(function (i, el) { $(el).text(getSec(true)); }); $('.counter .from:not(.n)') .addClass('hide') .addClass('to') .removeClass('from') .removeClass('hide') .find('span:not(.shadow)').each(function (i, el) { $(el).text(getSec(false)); }); $('.counter .n').removeClass('n');
}
function getSec(next) { var d = new Date(); var sec = 60-d.getSeconds(); if (next) { sec--; if (sec < 0) { sec = 59; } } else if(sec == 60) { sec = 0; } return (sec < 10 ? '0' + sec : sec);
}
Developer | Asakasinsky |
Username | asakasinsky |
Uploaded | December 27, 2022 |
Rating | 3 |
Size | 4,153 Kb |
Views | 10,120 |
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 |
Odin-Ass-style jQuery | 2,093 Kb |
Modernizr.custom.js | 5,583 Kb |
Seamless scroll animation | 2,083 Kb |
Comment reader | 2,273 Kb |
Flipclock | 4,813 Kb |
Icon Fonts - SocialCount meets Style | 3,709 Kb |
Generative Boids | 3,700 Kb |
JQuery fallback for placeholder | 2,044 Kb |
JS table row drag and drop without Jquery UI in 2016 | 3,189 Kb |
Icon Fonts - emocons.js jQuery plugin | 3,214 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 |
Responsive Pricing Table | Jeremycaris | 2,690 Kb |
Sass Radar | Jlong | 6,887 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
Pomodoro Timer | Sdas13 | 2,900 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
Cloud upload | Jaflo | 2,774 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!