Skip to content

Instantly share code, notes, and snippets.

@think49
Last active June 25, 2020 13:38
Show Gist options
  • Save think49/10d745ebf9aef92b40e698af695f5d2c to your computer and use it in GitHub Desktop.
Save think49/10d745ebf9aef92b40e698af695f5d2c to your computer and use it in GitHub Desktop.
count-down.js
/**
* count-down.js
*
*
* @version 0.1.0
* @author think49
* @url https://gist.github.com/think49/10d745ebf9aef92b40e698af695f5d2c
* @license http://www.opensource.org/licenses/mit-license.php (The MIT License)
*/
'use strict';
const CountDown = (()=>{
function handleInterval (countDown, interval) {
countDown.element.textContent = countDown.count;
if (--countDown.count < 0) clearInterval(interval.id), countDown.busy = false;
}
return class CountDown {
constructor (element, count) {
this.element = element;
this.startCount = count;
this.busy = false;
}
start () {
if (this.busy) return;
this.count = this.startCount;
this.busy = true;
const interval = {};
interval.id = setInterval(handleInterval, 1000, this, interval);
}
}
})();
<!DOCTYPE html>
<title>test</title>
<style>
.count-down {
font-weight: bold;
font-size: 600%;
line-height: 1em;
padding: 0;
}
</style>
<div class="count-down">0</div>
<script src="./count-down-0.1.0.js"></script>
<script>
'use strict';
const cd = new CountDown(document.querySelector('.count-down'), 3);
cd.start();
cd.start();
cd.start();
cd.start();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment