Skip to content

Instantly share code, notes, and snippets.

@apexys

apexys/138counter.html

Created January 27, 2017 10:28
Show Gist options
  • Save apexys/0cbf0f2387007af7a8397785685560a9 to your computer and use it in GitHub Desktop.
Save apexys/0cbf0f2387007af7a8397785685560a9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
138counter.html
<html>
<head>
<style>
body{
font-family: sans-serif;
overflow: hidden;
height: 100vh;
width: 100vw;
}
#counter{
margin-top: auto;
width: 100%;
font-size: 2000%;
font-weight: bold;
text-align: center;
height: 30vh;
transition: color 20s;
color: grey;
}
</style>
</head>
<body>
<div id="counter">-20</div>
<script>
function increase(){
var ctr = document.getElementById('counter');
ctr.value = parseInt(ctr.innerText) + 1;
ctr.innerText = ctr.value;
if(ctr.value < 0){
ctr.style.color = 'grey';
}
if(ctr.value > 0 && ctr.value < 100){
ctr.style.color = 'red';
}
if(ctr.value > 100 && ctr.value < 200){
ctr.style.color = 'orange';
}
if(ctr.value > 200 && ctr.value < 300){
ctr.style.color = 'green';
}
if(ctr.value > 300 && ctr.value < 400){
ctr.style.color = 'blue'
}
if(ctr.value > 400){
ctr.style.color = 'black';
}
}
setInterval(increase, 1000 / (138 / 60));
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment