Mostrar en una página el tiempo conectado a internet con JavaScript

Desde hace un tiempo, en la página de mi sitio que uso como página de inicio del navegador, agregué un script para poder ver el tiempo conectado a internet.
En ese entonces tenía el tiempo de conexión muy limitado y me era de mucha utilidad comprobar el tiempo desde que se establecía la conexión.
No es nada difícil de implementar y en este artículo comparto como crear el script, después que algunos lectores me habían preguntado cómo hacerlo.

Tiempo conectado a internet

Tiempo desde la carga de esta página, en horas y minutos.
Si se trata de nuestra página de inicio, nos indicará el tiempo que llevamos conectados a la red.

Mostrar con JavaScript el tiempo usado en la conexión de internet

Usando JavaScript, se puede crear muchas funciones para una web, relacionadas con el tiempo y la hora.
En otra página se incluyen muchos ejemplos prácticos.
A continuación muestro el código necesario para implementar esta función, en cualquier página.

Código para insertar contador de tiempo conectado

Para mostrar el cuadro de tiempo conectado que se muestra más arriba, necesitamos agregar el siguiente código a cualquier página, en el lugar exacto que deseamos que se muestre.

<input class="timepage" size="5" id="timespent" name="timespent"><br>

Más abajo, preferentemente antes del cierre de la etiqueta BODY, necesitamos agregar la función JavaScript.

<script>
startday=new Date();clockStart=startday.getTime();function initStopwatch(){var myTime=new Date();return((myTime.getTime()-clockStart)/1000);}
function getSecs(){var tSecs=Math.round(initStopwatch());var iSecs=tSecs%60;var iMins=Math.round((tSecs-30)/60);var sSecs=""+((iSecs>9)?iSecs:"0"+iSecs);var sMins=""+((iMins>9)?iMins:"0"+iMins);document.getElementById('timespent').value=sMins+":"+sSecs;window.setTimeout('getSecs()',1000);}
window.onload = function(){
window.setTimeout('getSecs()',1);
}
</script>

Es opcional la siguiente regla de estilo CSS, para establecer la apariencia del cuadro.
Agrégala dentro de una etiqueta <style></style> o en el archivo CSS externo de la página.

.timepage{text-align:center;width:200px;font-size:40px;border:1px solid #56aaf3;padding:6px;margin:12px 0 12px 0;}

La página donde se inserte el código puede estar en alojada en la web, pero también funciona de forma local.
Lógicamente si cerramos el navegador y volvemos a abrirlo, el contador de reiniciará desde cero.

Páginas relacionadas

Comparta esta página

Sígueme en las redes sociales