Timer

Size
2,845 Kb
Views
10,120

How do I make an timer?

JS timer with canvas arc progress.. What is a timer? How do you make a timer? This script and codes were developed by Arsen Zbidniakov on 13 October 2022, Thursday.

Timer Previews

Timer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Timer</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<div id="pm">	<input type="button" id="plus" value="&#xf0de;">	<input type="button" id="minus" value="&#xf0dd;">	</div>	<p id="result">30</p>	<p id="sec">sec</p>	<canvas id="progress" width="200" height="200"></canvas><!-- progress bar -->
</div>
<div class="buttons">	<input type="button" id="start" value="Start">	<input type="button" id="stop" value="Stop">
</div> <script src="js/index.js"></script>
</body>
</html>

Timer - Script Codes CSS Codes

/* Font Awesome */
@import url(https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
/* Roboto Condensed */
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700);
.container {	position: relative;	margin: 0 auto;	width: 200px;	height: 200px;	border-radius: 50%;	background: #3B3A3F;	font-family: 'Roboto', sans-serif;	text-align: center;
}
#progress {	position: absolute;	top: 0;	left: 0;	transition: all 1s ease-in-out;
}
p {	margin: 0;	color: #00CE9B;	font-weight: 700;
}
#result {	padding: 60px 0 0;	font-size: 80px;	line-height: 60px;
}
#sec {	font-size: 28px;
}
#start, #stop {	position: relative;	width: 100px;	height: 40px;	outline: 0;	border: 0;	border-radius: 4px;	color: #fff;	cursor: pointer;	font-weight: 700;
}
#start {	background: #4897F0;
}
#start:hover {	background: #4087d8;
}
#stop {	background: #00CE9B;
}
#stop:hover {	background: #00b98b;
}
#start:active, #stop:active {	top: 1px;
}
#plus {	width: 100%;	padding: 0;	outline: 0;	border: 0;	color: #aaa;	background: transparent;	cursor: pointer;	font-size: 20px;	font-family: FontAwesome, sans-serif;
}
#minus {	width: 100%;	padding: 0;	outline: 0;	border: 0;	color: #aaa;	background: transparent;	cursor: pointer;	font-size: 20px;	font-family: FontAwesome, sans-serif;
}
#pm { position: absolute; top: 70px; left: 20px; opacity: .1; z-index: 9999;
}
.container:hover > #pm { opacity: 1;
}
.buttons { width: 300px; margin: 20px auto; text-align: center;
}

Timer - Script Codes JS Codes

var timer, stopTimer,	result = document.getElementById('result'),	sec = document.getElementById('sec'),	start = document.getElementById('start'),	stop = document.getElementById('stop'),	plus = document.getElementById('plus'),	minus = document.getElementById('minus'),	n = +result.innerHTML;
// events
start.addEventListener('click', function() {	startTimer(n);
}, false);
stop.addEventListener('click', function() {	stopTimer();
}, false);
plus.addEventListener('click', function() {	result.innerHTML = ++n;
}, false);
minus.addEventListener('click', function() {	result.innerHTML = --n;
}, false);
// functions
function startTimer(n) {	var i = n-1; // fix 1 sec start delay document.getElementById('pm').style.display = 'none'; // hide arrows	timer = setInterval( function() {	result.innerHTML = i--; stopTimer = function() { clearInterval(timer); result.innerHTML = i + 1; } if (i < 5) {	result.style.color = '#ED3E42';	sec.style.color = '#ED3E42';	} // hurry up!	if (i < 0) { stopTimer(); } // finish	function updateProgress() {	var canvas = document.getElementById('progress');	var context = canvas.getContext('2d');	var centerX = canvas.width / 2;	var centerY = canvas.height / 2;	var radius = 80;	var circ = Math.PI * 2; // 360deg	var percent = i / n; // i%	context.beginPath();	context.arc(centerX, centerY, radius, ((circ) * percent), circ, false);	context.lineWidth = 10;	if (i < 5) {	context.strokeStyle = '#ED3E42';	} else {	context.strokeStyle = '#00CE9B';	}	context.stroke();	} // progress	updateProgress();	}, 1000); // every sec
}
Timer - Script Codes
Timer - Script Codes
Home Page Home
Developer Arsen Zbidniakov
Username ARS
Uploaded October 13, 2022
Rating 3.5
Size 2,845 Kb
Views 10,120
Do you need developer help for 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!

Arsen Zbidniakov (ARS) Script Codes
Create amazing love letters 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!