Countdown Clock with Pause and Resume

Developer
Yaphi
Size
2,095 Kb
Views
78,936
  1. Countdown Clock with Pause and Resume Previews
  2. Countdown Clock with Pause and Resume HTML Codes
  3. Countdown Clock with Pause and Resume JS Codes

How do I make an countdown clock with pause and resume?

This is a 10-minute JavaScript countdown clock with pause and resume buttons.. What is a countdown clock with pause and resume? How do you make a countdown clock with pause and resume? This script and codes were developed by Yaphi on 18 July 2022, Monday.

Countdown Clock with Pause and Resume Previews
IQ Test

Countdown Clock with Pause and Resume - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Countdown Clock with Pause and Resume</title>
</head>
<body> Countdown Clock with Pause and Resume Functionality
<br><br>
<div id="clockdiv"></div>
<button id="pause">Pause</button>
<button id="resume">Resume</button>
<br><br>
<a href="http://simplestepscode.com/" target="_blank">Simple Steps Code</a> <script src="js/index.js"></script>
</body>
</html>

Countdown Clock with Pause and Resume - Script Codes JS Codes

// 10 minutes from now
var time_in_minutes = 10;
var current_time = Date.parse(new Date());
var deadline = new Date(current_time + time_in_minutes*60*1000);
function time_remaining(endtime){	var t = Date.parse(endtime) - Date.parse(new Date());	var seconds = Math.floor( (t/1000) % 60 );	var minutes = Math.floor( (t/1000/60) % 60 );	var hours = Math.floor( (t/(1000*60*60)) % 24 );	var days = Math.floor( t/(1000*60*60*24) );	return {'total':t, 'days':days, 'hours':hours, 'minutes':minutes, 'seconds':seconds};
}
var timeinterval;
function run_clock(id,endtime){	var clock = document.getElementById(id);	function update_clock(){	var t = time_remaining(endtime);	clock.innerHTML = 'minutes: '+t.minutes+'<br>seconds: '+t.seconds;	if(t.total<=0){ clearInterval(timeinterval); }	}	update_clock(); // run function once at first to avoid delay	timeinterval = setInterval(update_clock,1000);
}
run_clock('clockdiv',deadline);
var paused = false; // is the clock paused?
var time_left; // time left on the clock when paused
function pause_clock(){	if(!paused){	paused = true;	clearInterval(timeinterval); // stop the clock	time_left = time_remaining(deadline).total; // preserve remaining time	}
}
function resume_clock(){	if(paused){	paused = false;	// update the deadline to preserve the amount of time remaining	deadline = new Date(Date.parse(new Date()) + time_left);	// start the clock	run_clock('clockdiv',deadline);	}
}
// handle pause and resume button clicks
document.getElementById('pause').onclick = pause_clock;
document.getElementById('resume').onclick = resume_clock;
Countdown Clock with Pause and Resume - Script Codes
Countdown Clock with Pause and Resume - Script Codes
Home Page Home
Developer Yaphi
Username yaphi1
Uploaded July 18, 2022
Rating 3
Size 2,095 Kb
Views 78,936
Do you need developer help for Countdown Clock with Pause and Resume?

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!

Yaphi (yaphi1) Script Codes
Name
JavaScript Slideshow With Controls
Quickipedia - Instant Wikipedia Summaries
Glow Pong
Scheduled JavaScript Countdown Clock
Updated JavaScript Countdown Clock
JavaScript Slideshow With Pause Button
RequestAnimationFrame Countdown fork
Basic JavaScript Countdown Clock
10 Minute Countdown Clock
Perspective Test
Create amazing sales emails 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!