JS Countdown Timer

Developer
Anthony Young
Size
2,435 Kb
Views
30,360
  1. JS Countdown Timer Previews
  2. JS Countdown Timer HTML Codes
  3. JS Countdown Timer CSS Codes
  4. JS Countdown Timer JS Codes

How do I make an js countdown timer?

Simple JS Countdown Timer. What is a js countdown timer? How do you make a js countdown timer? This script and codes were developed by Anthony Young on 31 October 2022, Monday.

JS Countdown Timer Previews
IQ Test

JS Countdown Timer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JS Countdown Timer</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">
<div class="title">JS Countdown Timer</div>
<div class="timer"></div>
<div class="timerMsg"></div>
<button>Stop Timer</button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JS Countdown Timer - Script Codes CSS Codes

.container { width: 500px; display: block; margin: 50px auto; padding: 10px; outline: 1px black solid;
}
.title { font-size: 20px;
}
.timer { font-size: 25px; min-height: 100px;
}
button { margin-top: 10px;
}

JS Countdown Timer - Script Codes JS Codes

 var pad = function one(number, length) { var str = '' + number; while (str.length < length) {str = '0' + str;} return str; }; var formatTime = function(time) { var min = parseInt(time / 60000), sec = parseInt(time / 1000) - (min * 60), hundredths = pad(time - (sec * 1000) - (min * 60000), 2); //return (min > 0 ? pad(min, 2) : "00") + ":" + pad(sec, 2) + ":" + hundredths; return (min > 0 ? pad(min, 2) : "00") + ":" + pad(sec, 2); }; var countdownTimer = function(minutes, funct) { //add a second on 1000 for delay if (minutes) { var startTime = (minutes * 60000) + 1000; } //console.info('Starttime: ',startTime); var endtime = new Date().getTime() + startTime; var handleTime = function four() { //console.log('\nFunc running...\n'); var now = new Date().getTime(); var countdown = formatTime(endtime - now); //console.info('countdown: ', countdown); //check for el if (jQuery('.timer').length) { jQuery('.timer')[0].innerHTML = countdown; } //check if the time has counted down if (endtime - now <= 0) { //clear timeR clearInterval(timeR); //run callback funct(); } }; //every second run the handle time function var timeR = setInterval(handleTime, 1000); //1 second }; var stopTimer = function five(el, min, fn){ el.click(function clickr(){ clearInterval(timeR); countdownTimer(min, fn); }); }; stopTimer(jQuery('button'), 5, functs); countdownTimer(5, functs); var functs = function(){console.log('funct')};
JS Countdown Timer - Script Codes
JS Countdown Timer - Script Codes
Home Page Home
Developer Anthony Young
Username ayoungh
Uploaded October 31, 2022
Rating 3
Size 2,435 Kb
Views 30,360
Do you need developer help for JS Countdown Timer?

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!

Anthony Young (ayoungh) Script Codes
Name
Exit Intention JS
Tags and searching etc
Field validation
A Pen by Anthony Young
Mobile push in nav
Material header and menu drawer
React - Table with expanding rows
Anthony Young - ayoungh.co.uk Material Design mashup
Keypress check mobile
Drop down sidebar
Create amazing captions with AI!

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!