El código HTML

El documento HTML

Fijándonos en el diseño visto en la página de los bocetos desarrollamos lo que es la página propiamente dicha, teniendo en cuenta además la forma en que Javascript se comunica con la página.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Contador regresivo</title>

<link href="contador.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="micontador" data-final="2022/12/05">

   <div class="num">

      <div class="dig"><span>&nbsp;</span></div>

      <div class="label">Días</div>

   </div>

   <div class="num">

      <div class="dig"><span>&nbsp;</span></div>

      <div class="label">Horas</div>

   </div>

   <div class="num">

      <div class="dig"><span>&nbsp;</span></div>

      <div class="label">Min</div>

   </div>

   <div class="num">

      <div class="dig"><span>&nbsp;</span></div>

      <div class="label">Seg</div>

   </div>

</div>

<script src="contador.js"></script>

</body>

</html>

Vemos un contenedor al que ponemos el id=micontador y un argumento para la fecha final y luego hay tres bloques similares para anotar los días, horras, minuots y segundos. (bloques div con clase dig y un span hijo).

Debajo de cada bloque se han colocado las etiquetas (label) para ponerle el nombre correspondiente. Esta es una distribución, se podrían usar otras.

Lo fundamental es que el contenedor debe tener en su interior div con clase dig encerrando un span.

Comentarios

Esta es una distribución bastante sencilla con la etiqueta de tiempo debajo de cada número, podría usarse con la etiqueta arriba o con la etiqueta en un lateral y en vertical o sin etiquetas...

Lo fundametal del widget es lo mostrado en el boceto: contenedor con el bloque <div><span>, que es donde se escribirá la cuenta regresiva.