CountDown
How do I make an countdown?
What is a countdown? How do you make a countdown? This script and codes were developed by Robert on 04 September 2022, Sunday.
CountDown - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CountDown</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="body"> <div class="container"> <h1 class="countDown"> <ul> <li id="hours">00</li> <li>:</li> <li id="minutes">00</li> <li>:</li> <li id="seconds">15</li> </ul> <ul class="controls"> <li class="control" id="hoursCtrls"> <a href="" ><i class="material-icons md-light md-48"></i></a> <a href="" ><i class="material-icons md-light md-48"></i></a></li> <li></li> <li class="control" id="minutesCtrls"> <a href=""><i class="material-icons md-light md-48"></i></a> <a href="" ><i class="material-icons md-light md-48"></i></a> </li> <li></li> <li class="control" id="secondsCtrls"> <a href="#" ><i class="material-icons md-light md-48"></i></a> <a href="#" ><i class="material-icons md-light md-48"></i></a> </li> </ul>
</h1> <!-- <div class="spacer"></div> --> <div class="buttons"> <div id="pauseTimer" class="roundBtn disabled"><i class="material-icons md-48"></i></div> <div id="stopTimer" class="roundBtn disabled"><i class="material-icons md-48"></i></div> <div id="adjustReset" class="roundBtn"><i class="material-icons md-48"></i></div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
CountDown - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Lato:400,700italic,900);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,500);
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px;
}
.material-icons.md-24 { font-size: 24px;
}
.material-icons.md-36 { font-size: 36px;
}
.material-icons.md-48 { font-size: 48px;
}
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26);
}
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: white;
}
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3);
}
* { margin: 0; padding: 0;
}
body { background: url("http://www.blastr.com/sites/blastr/files/how-much-do-you-know-about-dc-comics-391555.jpg") no-repeat; background-size: cover;
}
.body { width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); background-size: cover;
}
.disabled { color: rgba(211, 211, 211, 0.5);
}
.container { width: 600px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
h1 { font-family: 'Roboto', sans-serif; text-align: center; font-size: 5rem; margin: 0; padding: 0; color: white;
}
ul { list-style: none; margin: 0px; padding: 50px;
}
ul li { width: 6rem; padding: 2px; float: left;
}
ul li:nth-child(2), ul li:nth-child(4) { font-size: 4rem; padding-top: .5rem;
}
.buttons { text-align: center; color: white;
}
.buttons .roundBtn { line-height: 115px; width: 80px; height: 80px; border-radius: 50%; background: rgba(128, 128, 128, 0.7); float: left; margin: -80px 60px 10px 60px;
}
.buttons .roundBtn .active { color: maroon;
}
.buttons .roundBtn:hover { cursor: pointer; color: cyan;
}
.controls { width: 600px; position: relative; top: -110px;
}
.controls .control { width: 100px; height: 110px; margin-left: -2px; position: relative;
}
.controls .control a { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: .3; -webkit-transition: all .35s ease; transition: all .35s ease;
}
.controls .control a:first-child { top: 12px;
}
.controls .control a:first-child:hover { opacity: 1; top: 5px;
}
.controls .control a:last-child { bottom: 45px;
}
.controls .control a:last-child:hover { opacity: 1; bottom: 52px;
}
CountDown - Script Codes JS Codes
(function() { var pauseResIcon; var timerFunc = { stop: false, pause: false, hours: 0, minutes: 0, seconds: 15 } var getElement = function(elem) { return document.getElementById(elem); } var resetButtons = function() { if (adjustReset.classList.contains('disabled')) { if (!pauseTimer.classList.contains('disabled')) { pauseTimer.classList.add('disabled'); stopTimer.classList.add('disabled'); adjustReset.classList.remove('disabled'); }; } } var hours = getElement('hours'); var minutes = getElement('minutes'); var seconds = getElement('seconds'); var countDown = function() { var that = this; setTimeout(function() { //console.log(timerFunc.pause); if (timerFunc.pause || timerFunc.stop) { return false; } timerFunc.seconds = timerFunc.seconds > 0 ? timerFunc.seconds += -1 : 0; seconds.innerHTML = timerFunc.seconds < 10 ? "0" + timerFunc.seconds : timerFunc.seconds; if (timerFunc.seconds < 1) { if (timerFunc.minutes > 0) { timerFunc.seconds = 60; timerFunc.minutes += -1; minutes.innerHTML = timerFunc.minutes < 10 ? "0" + timerFunc.minutes : timerFunc.minutes; } else { if (timerFunc.hours > 0) { timerFunc.minutes = 60; timerFunc.hours += -1; hours.innerHTML = timerFunc.hours < 10 ? "0" + timerFunc.hours : timerFunc.hours; } else { timerFunc.seconds = 0; pauseTimer.getElementsByTagName('i')[0].innerHTML = ""; resetButtons(); return false; } } } countDown(); }, 1000); } var adjustReset = getElement('adjustReset'); var pauseTimer = getElement('pauseTimer'); var stopTimer = getElement('stopTimer'); var hoursCtrlsUp = getElement('hoursCtrls').getElementsByTagName('a')[0]; var hoursCtrlsDown = getElement('hoursCtrls').getElementsByTagName('a')[1]; var minutesCtrlsUp = getElement('minutesCtrls').getElementsByTagName('a')[0]; var minutesCtrlsDown = getElement('minutesCtrls').getElementsByTagName('a')[1]; var secondsCtrlsUp = getElement('secondsCtrls').getElementsByTagName('a')[0]; var secondsCtrlsDown = getElement('secondsCtrls').getElementsByTagName('a')[1]; hoursCtrlsUp.onclick = function(e) { e.preventDefault(); if (!adjustReset.classList.contains('disabled')) { timerFunc.hours = timerFunc.hours < 24 ? timerFunc.hours += 1 : 24; hours.innerHTML = timerFunc.hours < 10 ? "0" + timerFunc.hours : timerFunc.hours; } } hoursCtrlsDown.onclick = function(e) { e.preventDefault(); if (!adjustReset.classList.contains('disabled')) { timerFunc.hours = timerFunc.hours > 0 ? timerFunc.hours -= 1 : 0; hours.innerHTML = timerFunc.hours < 10 ? "0" + timerFunc.hours : timerFunc.hours; } } minutesCtrlsUp.onclick = function(e) { e.preventDefault(); if (!adjustReset.classList.contains('disabled')) { timerFunc.minutes = timerFunc.minutes < 60 ? timerFunc.minutes += 5 : 60; minutes.innerHTML = timerFunc.minutes < 10 ? "0" + timerFunc.minutes : timerFunc.minutes; } } minutesCtrlsDown.onclick = function(e) { e.preventDefault(); if (!adjustReset.classList.contains('disabled')) { timerFunc.minutes = timerFunc.minutes > 0 ? timerFunc.minutes -= 5 : 0; minutes.innerHTML = timerFunc.minutes < 10 ? "0" + timerFunc.minutes : timerFunc.minutes; } } secondsCtrlsUp.onclick = function(e) { e.preventDefault(); if (!adjustReset.classList.contains('disabled')) { timerFunc.seconds = timerFunc.seconds < 60 ? timerFunc.seconds += 5 : 60; seconds.innerHTML = timerFunc.seconds < 10 ? "0" + timerFunc.seconds : timerFunc.seconds; } } secondsCtrlsDown.onclick = function(e) { e.preventDefault(); if (!adjustReset.classList.contains('disabled')) { timerFunc.seconds = timerFunc.seconds > 0 ? timerFunc.seconds -= 5 : 0; seconds.innerHTML = timerFunc.seconds < 10 ? "0" + timerFunc.seconds : timerFunc.seconds; } } window.adjustReset = getElement('adjustReset'); pauseTimer.onclick = function() { if (!pauseTimer.classList.contains('disabled')) { pauseResIcon = this.getElementsByTagName('i')[0]; if (pauseResIcon.innerHTML === "update") { pauseResIcon.innerHTML = ""; if (!timerFunc.pause || !timerFunc.stop) { timerFunc.pause = false; timerFunc.stop = false; countDown(); } } else { timerFunc.pause = true; pauseResIcon.innerHTML = "update"; } } } stopTimer.onclick = function() { if (!stopTimer.classList.contains('disabled')) { resetButtons(); timerFunc.seconds = 0; timerFunc.minutes = 0; timerFunc.hours = 0; timerFunc.stop = false; timerFunc.pause = false; hours.innerHTML = "00"; minutes.innerHTML = "00"; seconds.innerHTML = "00"; } } adjustReset.onclick = function() { if (!adjustReset.classList.contains('disabled') && (timerFunc.hours > 0 || timerFunc.minutes > 0 || timerFunc.seconds > 0)) { if (pauseTimer.classList.contains('disabled')) { pauseTimer.classList.remove('disabled'); stopTimer.classList.remove('disabled'); adjustReset.classList.add('disabled'); }; countDown(); } };
})();
Developer | Robert |
Username | AgentRR007 |
Uploaded | September 04, 2022 |
Rating | 3 |
Size | 4,688 Kb |
Views | 32,384 |
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 |
AngularJS 1.5 Demo | 3,373 Kb |
Challenge Reveal... with a twist. | 2,306 Kb |
Headphones | 3,660 Kb |
DC Comic Slide Image | 3,262 Kb |
Debug Console | 12,047 Kb |
UI Challenge - Menu Expander | 2,387 Kb |
Online - Offline Simulator | 2,407 Kb |
Spanish X-mas Word Game | 6,137 Kb |
YouTube behind firewall | 10,266 Kb |
Santa, my house is over here... | 2,419 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 |
Sidebar Thing | Jonambas | 2,779 Kb |
About Mazano | Kiti | 2,585 Kb |
Force Counter | Kenlauguico | 2,732 Kb |
Wip elementary os navbar | Nickcolley | 2,993 Kb |
Cool Page Split Effect | Anthonyadamski | 6,128 Kb |
A Pen by Andrea Verlicchi | Verlok | 2,018 Kb |
Pure CSS albums gallery | Renaudtertrais | 2,978 Kb |
Owl Carousel - jumpTo | OwlFonk | 2,553 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Blog Concept - Single Post | Marionebl | 9,603 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!