Cirkel met afteller, en kruisje met link
In veel apps op je mobiele telefoon en je tablet, meestal in reclames, zie je een cirkel met een getal dat aftelt naar nul.
Als nul is bereikt verschijnt er een X, om aan te geven dat je lang genoeg hebt gekeken en dat de reclame gesloten
kan worden. Het was de inspiratie voor dit item. Hier rechtsboven zie je er een.
Klik of tik op de X om hem te laten verdwijnen.
Ververs de pagina / het frame om het effect nog een keer te zien.
De code kun je downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- De werking van het script.
- Gebruiken in je eigen site.
- De code bestaat uit HTML, CSS en JavaScript. Alle code staat in het document, maar gelinkte .css- en .js-bestanden kunnen
natuurlijk ook.
- De werking van het script
- Als de pagina is geladen wordt het getal 10 in de cirkel gezet.
- Elke seconde wordt dat met één verlaagd, tot nul wordt bereikt.
- Als de teller op nul is gekomen, wordt niet het getal 0, maar een é in de cirkel gezet. Daarna wordt de cirkel aanklikbaar gemaakt.
- Als er op de cirkel met Xwordt geklikt, verdwijnt deze. Daarbij wordt ook de aanklikbaarheid verwijderd.
- HTML
- De HTML bestaat uit twee geneste <div>-tags, met de klasse container en de id afteller. Ze kunnen overal in de <body> staan. Een goed vindbare plek, bijvoorbeeld aan het begin van de <body> heeft de voorkeur.
- container dient alleen voor de positionering in het document. Het 'werk' wordt gedaan in afteller.
- CSS
- De CSS van de klasse container positioneert de cirkel in de rechter bovenhoek. Omdat fixed is gebruikt, kan het document scrollen zonder dat de cirkel uit beeld verdwijnt. Voor de duidelijkheid is er een zwarte rand omheen gezet.
- De afmetingen van container zijn 50 × 50px.
- De CSS van de id afteller definieert een cirkel met een diameter van 30px. Hij is relative gepositioneerd ten opzichte van de container, op 10px van de bovenkant en de linkerkant. Hierdoor staat de cirkel precies middenin de container.
- De opmaak van de cirkel en de tekst staan ook in afteller. De tekst en de zichtbaarheid worden aangepast door
JavaScript.
- JavaScript
- Als de pagina is geladen, wordt, via window.onload, de function telAfInit() gestart. Deze function zet een verwijzing naar id afteller in de variabele xx, stelt de startwaarde tijd (voor de aftelling) in op 10. Via setInterval() wordt elke 1000ms (= 1 sec.) de function telAf() gestart.
- De function telAf() verlaagt de waarde van tijd met 1, en plaatst die in de cirkel. Als echter tijd gelijk is aan nul, wordt er een X in de cirkel gezet. Daarbij wordt ook de herhalende aanroep van telAf() gestopt via clearInterval(). De cirkel wordt aanklikbaar gemaakt met addEventListener, die een koppeling maakt aan de function nietMeerKlikbaar.
- Als er op de X wordt geklikt of getikt, wordt de function nietMeerKlikbaar() aangeroepen. Die function maakt
de cirkel onzichtbaar door display op none te zetten en verwijdert de eventListener via removeEventListener().
- Gebruiken in je eigen site
- Download de zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
- Verander eventueel de plaats waar de container komt, van rechts naar links. Verwijder de border (die staat er nl. alleen als ondersteuning van het voorbeeld).
- Verander desgewenst de grootte van de container en van de afteller (=de cirkel). Let er daarbij op dat de cirke in et midden van de container blijft. Als je de grootte verandert moet je ook de grootte van de tekst aanpassen.
- Pas de kleuren aan naar je eigen smaak.
- Pas desgewenst de starttijd aan (variabele tijd in het JavaScript)
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.container {
position:fixed;
top:0; right:0;
width:50px; height:50px;
border:1px solid black;
}
#afteller {
position: relative;
top:10px; left:10px;
width:30px; height:30px;
border-radius:50%;
background-color:#ccc;
color:black;
font-size:16px; line-height:1.7;
font-weight:bold;
text-align:center;
}
</style>
<script>
let tijd, Stapje, xx;
function telAfInit() {
xx = document.getElementById('afteller');
tijd = 10;
Stapje = setInterval(telAf,1000);
}
window.onload = telAfInit;
function telAf() {
if (tijd == 0) {
xx.innerHTML = "X";
clearInterval(Stapje);
document.getElementById('afteller').addEventListener('click', maakKlikbaar); // Staat op één regel!
} else {
xx.innerHTML = tijd;
tijd--;
}
}
function maakKlikbaar() {
document.getElementById('afteller').style.display = "none";
document.getElementById('afteller').removeEventListener('click', maakKlikbaar); // Staat op één regel!
}
</script>
(Zet dit in de <BODY>, bij voorkeur ergens aan het begin).
div class="container">
<div id="afteller"></div>
</div>
Downloaden:
Druk op de knop:
File: voorb739.zip, 693 bytes.
