SCRIPT CONTADOR MÚLTIPLES DESCARGAS SIN BASE DATOS 2025
Javascript - PHP - Archivo de Texto
Este contador de descargas puede ser utilizado infinidad de veces en la misma página web y en cada sección del sitio, ya que utiliza el atributo "class" en lugar de "id" dentro de sus códigos Javascript y PHP, guardando el número de descargas en un archivo de texto. El incremento en el número de descargas se puede visualizar borrando el caché de la página y refrescándola, cuenta que no se ve afectada, de ninguna manera, al eliminar las cookies del sitio.
Luego de su primer uso, se pueden cambiar el número de descargas desde los archivos de texto que aparecerán en la carpeta "contadores" (Archivo1, Archivo2...) que se creó vacía.
Asegúrese de que la carpeta /contadores/ tenga permisos de escritura. En Linux: chmod -R 755 contadores
Al cargar la página, el JS llama a contador.php?action=get&id=archivoX para obtener cuántas descargas hay.
Cuando se hace clic en un enlace de descarga, se incrementa el contador en el servidor sin interrumpir la descarga.
El número de descargas se muestra usando <div class="contador" data-id="archivo1">Cargando descargas...</div>.
1- Código donde se mostrará el contador de visitas "index.html" (Página HTML):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contador de Descargas 2025</title>
<style>
.contador{font-size:0.9em;color:#555;margin-top: 4px}
</style>
</head>
<body>
<div>
<a href="archivos/coleccion-imagenes.pdf" class="descarga" data-id="archivo1">Descargar PDF 1</a>
<div class="contador" data-id="archivo1">Cargando descargas...</div>
</div>
<div>
<a href="archivos/pop-videos.zip" class="descarga" data-id="archivo2">Descargar ZIP 2</a>
<div class="contador" data-id="archivo2">Cargando descargas...</div>
</div>
<script src="script-descargas.js"></script><!-- Este SCRIPT también se puede poner entre <head> y </head> -->
</body>
</html>
2- Crear el archivo "contador.php" para manejar las descargas y el contador. (PHP):
<?php
$action = $_REQUEST['action'] ?? '';
$id = preg_replace('/[^a-zA-Z0-9_\-]/', '', $_REQUEST['id'] ?? '');
$carpeta = __DIR__ . "/contadores";
if (!is_dir($carpeta)) {
mkdir($carpeta, 0755, true);
}
$archivo = "$carpeta/{$id}.txt";
// Acción: obtener contador
if ($action === 'get') {
if (file_exists($archivo)) {
echo file_get_contents($archivo);
} else {
echo "0";
}
exit;
}
// Acción: incrementar contador
if ($action === 'increment') {
$conteo = 0;
if (file_exists($archivo)) {
$conteo = (int)file_get_contents($archivo);
}
$conteo++;
file_put_contents($archivo, $conteo);
echo $conteo;
exit;
}
http_response_code(400);
echo "Acción no válida - ERROR";
3- Crear el archivo "script-descargas.js" para cargar los enlaces en la página HTML y los contadores en la carpeta vacía (Javascript):
document.addEventListener("DOMContentLoaded", function() {
// Cargar contadores al iniciar
document.querySelectorAll(".descarga").forEach(link => {
const id = link.dataset.id;
fetch(`contador.php?action=get&id=${id}`)
.then(res => res.text())
.then(count => {
document.querySelector(`.contador[data-id="${id}"]`).textContent = `${count} descargas`;
});
});
// Manejar clics de descarga
document.querySelectorAll(".descarga").forEach(link => {
link.addEventListener("click", function(e) {
const id = this.dataset.id;
// Registrar la descarga sin impedir la navegación
fetch("contador.php", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: `action=increment&id=${id}`
})
.then(res => res.text())
.then(count => {
document.querySelector(`.contador[data-id="${id}"]`).textContent = `${count} descargas`;
});
});
});
});
Para confirmar el conteo de las descargas, eliminar las cookies del navegador, borrando el historial de navegación y luego, refrescar la página (Recargarla). Igualmente, puede instalar el programa XAMPP en su PC para probar su funcionamiento, de manera local, antes de subirla a su alojamiento (Servidor).
DEMO Contador de Múltiples Descargas 2025