kleph/beer
1
0
Fork 0
Code Issues 1 Pull requests Releases Wiki Activity

Add blinking text when timer elapsed

Browse source
This commit is contained in:
kleph 2020-02-14 17:12:12 +01:00
parent 55e5155290
commit 94b37ca609
1 changed files with 37 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
static/beer.html
View file

@ -2,11 +2,47 @@
<html lang="en">
<head>
<title>beer</title>
<style>
blink, .blink {
-webkit-animation: blink 1s step-end infinite;
-moz-animation: blink 1s step-end infinite;
-o-animation: blink 1s step-end infinite;
animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink {
67% { opacity: 0 }
}
@-moz-keyframes blink {
67% { opacity: 0 }
}
@-o-keyframes blink {
67% { opacity: 0 }
}
@keyframes blink {
67% { opacity: 0 }
}
</style>
</head>
<body>
<!-- Display the countdown timer in an element -->
<p id="demo"></p>
<script type="text/javascript">
(function() {
var blinks = document.getElementsByTagName('blink');
var visibility = 'hidden';
window.setInterval(function() {
for (var i = blinks.length - 1; i >= 0; i--) {
blinks[i].style.visibility = visibility;
}
visibility = (visibility === 'visible') ? 'hidden' : 'visible';
}, 250);
})();
</script>
<script>
// Update the count down every 1 second
@ -33,7 +69,7 @@ var x = setInterval(function() {
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "BEER TIME !";
document.getElementById("demo").innerHTML = "<blink>BEER TIME !</blink>";
}
}, 1000);
</script>