[SOLUCIONADO] Contador JavaScript o JQuery

jetemias · #1 (**permalink**) 31/01/2013, 15:11

Hola a todos, estoy buscando un plugin JQuery que me permita mostrar por pantalla un contador.
El contador se incrementa o decrementa dependiendo de unos valores (si hay algo similar me da igual, puedo modificar el código).
Ahora lo díficil, no quiero el típico contador numérico, quiero el contador de las rayas, es decir, este:

Código:

1 --> |
2 --> ||
3 --> |||
4 --> ||||

Y el 5 son cuatro palos tachados (en realidad son 5 palos contando el que tacha).

He buscado por San google y en el buscador, pero solo encuentro contadores numéricos.
Espero que alguien se haya topado con un plugin como el que pido y que sepa donde puedo encontrarlo.

Gracia de antemano.
Saludos

ipraetoriux · #2 (**permalink**) 31/01/2013, 15:27

.....mmmm complicado encontrar algo tan especifico, por ahi puede llegar a haber. Lo mas sencillo es directamente desarrollarlo, no es nada complicado hacer un contador en Javascript y jQuery, y luego reemplazas los numeros por gif y listo

emprear · #3 (**permalink**) 31/01/2013, 19:19

Cita:

Iniciado por jetemias

Hola a todos, estoy buscando un plugin JQuery que me permita mostrar por pantalla un contador.
El contador se incrementa o decrementa dependiendo de unos valores (si hay algo similar me da igual, puedo modificar el código).
Ahora lo díficil, no quiero el típico contador numérico, quiero el contador de las rayas, es decir, este:

Código:

1 --> |
2 --> ||
3 --> |||
4 --> ||||

Y el 5 son cuatro palos tachados (en realidad son 5 palos contando el que tacha).

He buscado por San google y en el buscador, pero solo encuentro contadores numéricos.
Espero que alguien se haya topado con un plugin como el que pido y que sepa donde puedo encontrarlo.

Gracia de antemano.
Saludos

Parece una anotación de juego de cartas, o que estás contando los días para salir de la carcel, a ver algo asi

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Contador con rayas</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
var i = 0;
var texto = " ";
function sumar(){
i++;
for (var e=0; e<1; e++){
texto += "|";
}
if(i < 5){
if(i == 4){
document.getElementById('cuenta').style.textDecoration = "line-through";
}
document.getElementById('cuenta').innerHTML = texto + "";
}
}
//]]>
</script>
</head>
<body>
<button onclick="sumar()">sumar</button>
<div id="cuenta" style="margin-top: 15px; font-size: 12pt; font-weight: bold; font-family: arial, sans-serif;">
</div>
</body>
</html>

Saludos

jetemias · #4 (**permalink**) 01/02/2013, 09:03

Cita:

Iniciado por ipraetoriux

.....mmmm complicado encontrar algo tan especifico, por ahi puede llegar a haber. Lo mas sencillo es directamente desarrollarlo, no es nada complicado hacer un contador en Javascript y jQuery, y luego reemplazas los numeros por gif y listo

Realmente prefiero reutilizar código, ya que me ahorra algo de trabajo que empleo en entender el código encontrado y quien sabe, a lo mejor aprendo algo nuevo que si lo hubiera hecho yo no hubiera aprendido.

Cita:

Iniciado por emprear

Parece una anotación de juego de cartas, o que estás contando los días para salir de la carcel, a ver algo asi

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Contador con rayas</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
var i = 0;
var texto = " ";
function sumar(){
i++;
for (var e=0; e<1; e++){
texto += "|";
}
if(i < 5){
if(i == 4){
document.getElementById('cuenta').style.textDecoration = "line-through";
}
document.getElementById('cuenta').innerHTML = texto + "";
}
}
//]]>
</script>
</head>
<body>
<button onclick="sumar()">sumar</button>
<div id="cuenta" style="margin-top: 15px; font-size: 12pt; font-weight: bold; font-family: arial, sans-serif;">
</div>
</body>
</html>

Saludos

Es para un juego de cartas y tu código me viene genial, no se me había ocurrido el tachar el texto para hacer la quinta marca.
Con un poco de css y adaptarlo a mis intereses tengo resuelto el problema.

Gracias por la ayuda.
Ya pueden cerrar el tema.