Cash Register Effect
Exactly 10 years ago, I was asked to create a webpage containing a cash register effect for the price amount of the result. I didn't do it then. Now it's here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Cash Register</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function CashRegister(start, end, el = 'amount')
{
const diff = end - start; // 5000
let int = 10;
let t = diff / int; // 500
let i = start;
let stopRoll = setInterval(roll, int);
function roll()
{
console.log(i);
document.getElementById(el).innerHTML = i;
i += 35; // update every $35
if ((i - start) % t == 0)
{
console.log("int = ", int);
clearInterval(stopRoll);
stopRoll = setInterval(roll, int--);
}
if (i > end)
{
i = end;
clearInterval(stopRoll);
document.getElementById(el).innerHTML = i;
}
}
}
</script>
</head>
<body>
<h1>$<span id="amount"></span></h1>
<script>CashRegister(0, 5000, 'amount');</script>
</body>
</html>
https://anjanesh.s3.amazonaws.com/cash-register.html
This was for a front-end developer interview for Cleartrip circa 2011.
About the author
- I am a web consultant from Navi Mumbai. Mainly dealt with LAMP stack, now into Django and getting into Laravel and Cloud. Founder of nerul.in and gaali.in
Comments
Join the discussionNo comments yet. Be the first to comment.





