Last active
June 25, 2020 13:38
-
-
Save think49/10d745ebf9aef92b40e698af695f5d2c to your computer and use it in GitHub Desktop.
count-down.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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); | |
} | |
} | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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