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.

Gebruik:

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: Download deze code  File: voorb739.zip, 693 bytes.

 
terug

html-739; Laatste wijziging: 13 maart 2024