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 |
AgentRR007 Logo Rotate | 1,874 Kb |
Headphones | 3,660 Kb |
Angular Alarm | 5,760 Kb |
Observing Cells | 2,788 Kb |
CSS Background Color Split | 1,741 Kb |
UI Challenge - Menu Expander | 2,387 Kb |
Angular Template | 2,104 Kb |
Custom Directive | 3,425 Kb |
CountDown | 4,688 Kb |
FireBase Demo | 3,081 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 |
Canvas snow | Win7killer | 2,572 Kb |
Whyutils | LeYvan | 3,752 Kb |
Expert Help | SinceSidSlid | 4,064 Kb |
Replace url via jquery | Serluk | 1,429 Kb |
Yuliya v krylova | Rafszul | 37,351 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
Em Test | Rodesco | 1,784 Kb |
Svg penguin | _massimo | 2,990 Kb |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 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!