Timer
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 - 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=""> <input type="button" id="minus" value=""> </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
}
Developer | Arsen Zbidniakov |
Username | ARS |
Uploaded | October 13, 2022 |
Rating | 3.5 |
Size | 2,845 Kb |
Views | 10,120 |
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 |
Infinity Morph | 2,974 Kb |
GSAP Text Animation | 2,777 Kb |
Understanding CSS clip | 8,794 Kb |
Shattering Text Animation | 5,244 Kb |
Flat UI - Checkbox FIX | 2,663 Kb |
HTML5 Audio Player | 5,934 Kb |
Long Shadows for Font Awesome | 3,424 Kb |
Pastel Loader | 3,365 Kb |
Split Showcase | 3,789 Kb |
Animated Gradient Ghost Button Concept | 3,590 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 |
3d css cube | Semenchenko | 4,578 Kb |
Donut Chart example - MorrisJS | Capelo | 2,385 Kb |
A Pen by Anoop | Anoopjohn | 330,760 Kb |
Scoreboard.js basic usage | Tbleckert | 1,733 Kb |
Twinkling Stars | Ripley6811 | 2,750 Kb |
A Pen by James Podles | Jpod | 2,656 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Swiftype Lower Third | Zumwalt | 4,796 Kb |
Canvas stripes | Adrianparr | 1,948 Kb |
Expert Help | SinceSidSlid | 4,064 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!