Simple Stopwatch

Developer
Nicolas Udy
Size
4,799 Kb
Views
42,504
  1. Simple Stopwatch Previews
  2. Simple Stopwatch HTML Codes
  3. Simple Stopwatch CSS Codes
  4. Simple Stopwatch JS Codes

How do I make an simple stopwatch?

Simple stopwatch exercise with a pause function.. What is a simple stopwatch? How do you make a simple stopwatch? This script and codes were developed by Nicolas Udy on 10 August 2022, Wednesday.

Simple Stopwatch Previews
IQ Test

Simple Stopwatch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Stopwatch</title> <link rel='stylesheet prefetch' href='css/jwmbjg.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main>	<time id="timer">0:00:00.00</time>	<button id="toggle">start</button>	<button id="clear">clear</button>
</main> <script src="js/index.js"></script>
</body>
</html>

Simple Stopwatch - Script Codes CSS Codes

body {background-image: -webkit-radial-gradient(at top, #63c2f8, #008baa);background-image: radial-gradient(at top, #63c2f8, #008baa)}
main {	height: 150px;	position: absolute;	top: 50%;	left: 50%;	-webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);	time {	display: block;	width: 310px;	text-align: center;	color: white;	font-size: 4rem;	font-weight: 900;	text-align: center;	}	button {	padding: .5em 1.25em;	position: absolute;	bottom: 0;	color: white;	border: 1px solid white;	border-radius: .5em;	text-transform: uppercase;	font-size: 1.25rem;	}	#toggle {right: 0}	#clear {	-webkit-transition: all 300ms cubic-bezier(.4,.25,.3,1);	transition: all 300ms cubic-bezier(.4,.25,.3,1);	left: 0;	opacity: 0;	pointer-events: none;	&[data-state='visible'] {	opacity: 1;	pointer-events: auto;	}	}
}

Simple Stopwatch - Script Codes JS Codes

(function timer() {	'use strict';	//declare	var output = document.getElementById('timer');	var toggle = document.getElementById('toggle');	var clear = document.getElementById('clear');	var running = false;	var paused = false;	var timer;	// timer start time	var then;	// pause duration	var delay;	// pause start time	var delayThen;	// start timer	var start = function() {	delay = 0;	running = true;	then = Date.now();	timer = setInterval(run,51);	toggle.innerHTML = 'stop';	};	// parse time in ms for output	var parseTime = function(elapsed) {	// array of time multiples [hours, min, sec, decimal]	var d = [3600000,60000,1000,10];	var time = [];	var i = 0;	while (i < d.length) {	var t = Math.floor(elapsed/d[i]);	// remove parsed time for next iteration	elapsed -= t*d[i];	// add '0' prefix to m,s,d when needed	t = (i > 0 && t < 10) ? '0' + t : t;	time.push(t);	i++;	}	return time;	};	// run	var run = function() {	// get output array and print	var time = parseTime(Date.now()-then-delay);	output.innerHTML = time[0] + ':' + time[1] + ':' + time[2] + '.' + time[3];	};	// stop	var stop = function() {	paused = true;	delayThen = Date.now();	toggle.innerHTML = 'resume';	clear.dataset.state = 'visible';	clearInterval(timer);	// call one last time to print exact time	run();	};	// resume	var resume = function() {	paused = false;	delay += Date.now()-delayThen;	timer = setInterval(run,51);	toggle.innerHTML = 'stop';	clear.dataset.state = '';	};	// clear	var reset = function() {	running = false;	paused = false;	toggle.innerHTML = 'start';	output.innerHTML = '0:00:00.00';	clear.dataset.state = '';	};	// evaluate and route	var router = function() {	if (!running) start();	else if (paused) resume();	else stop();	};	toggle.addEventListener('click',router);	clear.addEventListener('click',reset);
})();
Simple Stopwatch - Script Codes
Simple Stopwatch - Script Codes
Home Page Home
Developer Nicolas Udy
Username udyux
Uploaded August 10, 2022
Rating 3.5
Size 4,799 Kb
Views 42,504
Do you need developer help for Simple Stopwatch?

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!

Nicolas Udy (udyux) Script Codes
Name
Cursor based dynamic perspective logo
Flipping ring buttons
MiniMarkdown.JS
ES6 Game of Snek
Hue rotate
SVG Analog Clock
Pure CSS mountains
Circle icons to text on hover
CSS only Select
Automatic SVG Pie-Charts
Create amazing marketing copy 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!