Created
September 22, 2020 13:00
-
-
Save peaBerberian/9633794ad1023ef31e15ce83eac7f432 to your computer and use it in GitHub Desktop.
This file contains hidden or 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> | |
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <meta name="description" content="Compte a rebours pour le daily"> | |
| <style> | |
| .countdown-container { | |
| display: block; | |
| width:200px; | |
| height: 200px; | |
| border-radius: 50%; | |
| background-color: #fff; | |
| border-size: 5px; | |
| } | |
| </style> | |
| <title>RxPlayer - CANAL+</title> | |
| </head> | |
| <body> | |
| <div class="countdown-container"> | |
| <canvas height="200" width="200" id="countdown-cycle"/> | |
| </div> | |
| <script> | |
| const SPACE_KEY_CODE = 32; | |
| let currentAnimationFrameId; | |
| function createCountdown(time) { | |
| const counter = document.getElementById("countdown-cycle").getContext('2d'); | |
| const goal = performance.now() + time; | |
| const pointToFill = 4.72; | |
| const canvasWidth = counter.canvas.width; | |
| const canvasHeight = counter.canvas.height; | |
| next(); | |
| function next() { | |
| const newTime = goal - performance.now(); | |
| counter.clearRect(0, 0, canvasWidth, canvasHeight); | |
| counter.lineWidth = 3; | |
| counter.fillStyle = '#000'; | |
| counter.textAlign = 'center'; | |
| counter.font = "25px monospace"; | |
| if (newTime <= 0) { | |
| counter.fillText("CHUT", 100, 110); | |
| if (Math.floor(newTime / 400) % 2) { | |
| counter.strokeStyle = '#FF0000'; | |
| } else { | |
| counter.strokeStyle = '#FFFFFF'; | |
| } | |
| counter.beginPath(); | |
| counter.arc(110, 110, 70, pointToFill, 10 + pointToFill); | |
| counter.stroke(); | |
| } else { | |
| const diff = ((newTime / time) * Math.PI * 2 * 10); | |
| counter.strokeStyle = '#F5E0A9'; | |
| counter.fillText(Math.ceil(newTime / 1000) + " sec", 100, 110); | |
| counter.beginPath(); | |
| counter.arc(110, 110, 70, pointToFill, diff / 10 + pointToFill); | |
| counter.stroke(); | |
| } | |
| currentAnimationFrameId = window.requestAnimationFrame(next); | |
| } | |
| } | |
| document.body.onkeyup = function(e){ | |
| if(e.keyCode == SPACE_KEY_CODE) { | |
| window.cancelAnimationFrame(currentAnimationFrameId); | |
| createCountdown(1 * 2 * 1000); | |
| } | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment