Ciao a tutti, vorrei creare una progressbar a tempo. In pratica io ho un tempo es 3 minuti e voglio che questa progressbar in 3 minuti si completi, non so se ho reso l'idea.
Printable View
Ciao a tutti, vorrei creare una progressbar a tempo. In pratica io ho un tempo es 3 minuti e voglio che questa progressbar in 3 minuti si completi, non so se ho reso l'idea.
Puoi farlo usando 2 div uno dentro l'altro: quello esterno, che funge da contenitore, di larghezza k. Quello interno invece potresti farlo "pieno", e controlli la larghezza tramite javascript (la cosa più facile e immediata, controllarla tramite la percentuale). Tempo fa ne avevo fatta una in questo modo.
Oppure, puoi cercare "progress bar javascript" su google.
Ciao!
grazie della risposta veloce.
Ne ho trovate molte solo che non vanno a tempo continuo cioè 1%, 2% ecc ma tu imposti un tempo e la progress finisce dopo quel tempo.
Non ho capito il problema: non ti piace che vada "a scatti"?
Ciao!
Ne ho viste alcune dove tu imposti una durata tipo 2 min e la progress finisce in 2 min però va a scatti per es passa da 1% a 7% poi si ferma 5 secondi e parte a 50% ecc
A me servirebbe una slider dove io imposto un valore in secondi e la progress va 1%,2%3% poi ovviamente dipende dal tempo
Io dicevo di fare una cosa tipo:
Poi, te lo puoi gestire come vuoi. Puoi renderlo anche meno "scattoso" lavorando con i px, invece che con la percentuale...Codice HTML:<html>
<head><title>ciao</title>
<style type="text/css">
#contenitore
{
width: 200px;
height: 20px;
border: 3px solid black;
}
#interno
{
width: 0%;
height: 20px;
background-color: #FF0000;
}
</style>
</head>
<body>
<script type="text/javascript">
var percentuale = 0;
setInterval('var interno = document.getElementById("interno"); interno.style.width = percentuale+"%"; interno.innerHTML = (percentuale++)+"%"; if(percentuale > 100) percentuale = 0;',1000);
</script>
<div id="contenitore"><div id="interno"> </div></div>
</body>
</html>
Ciao!
Allora grazie era quello che volevo ;)
Solo 1 cosa:
- per modificare il tempo devo modificare il numero 1000 ma il tempo è in millesecondi? Se si come trasformo i secondi in millesecondi?
moltiplicandoli per 1000 :mrgreen:
...Comunque quel codice era solo un esempio per farti capire come fare... poi lo devi personalizzare come vuoi.
Ciao!
Sì, quelli sono millisecondi e ogni 1000 aumenta dell'1%. :wink:
Però nel tuo esempio c'è 1000 quindi la progress si dovrebbe completare in 1 sec?
Ogni secondo incrementa la percentuale dell'1%, quindi per fare 100% impiega 100 secondi.
Però, ti consiglio di personalizzarlo ulteriormente, e non lasciarlo "così", modificando soltanto il "1000" con il numero che ti serve...
Ciao!
EDIT: ecco, ti aveva risposto radiodelmomento
non avevo visto xd
Adesso cerco un po di modificarlo e adattarlo al mio sito.
Un'ultima cosa se io ho un tabella con dei bottoni vorrei fare che un utente quando clicca su uno dei bottoni gli si apre la progress sopra alla tabella e con il valore numerico del bottone.
Alla pressione dei bottoni mostri i due div (se non ci sono), e avvi la setInterval()
Ciao!
si però così il tempo è sempre 1000 io devo fare ad es che nel primo bottone il tempo è 100, nel secondo 560 nel 3 671 ecc
Prova a fare una funzione a cui passi il nome del div "interno" e i secondi, e lei provvede ad avviare la progress bar... Ovvero, una funzione del genere:
ah, dimenticavo: potrebbe esserti utilissima e far risparmiar lavoro la .animate() di jQuery, se lo hai incluso...Codice:function progressbar(id,secondi)
{
}
Ciao!
mi può fare anche solo una riga per vedere?
Scusa ma il javascript non lo digerisco
scusate l'intrusione...
come faccio a creare una progress bar statica, in cui immettere da sola i valori del progresso in percentuale?
cosa dovrei cambiare nel codice scritto sopra?
grazie per l'aiuto
Se la vuoi statica, non è necessario nemmeno javascript: imposti soltanto la percentuale nel css di "interno". Così l'esempio del 10%:
Ciao!Codice HTML:<!doctype html>
<html>
<head><title>ciao</title>
<style type="text/css">
#contenitore
{
width: 200px;
height: 20px;
border: 3px solid black;
}
#interno
{
width: 10%;
height: 20px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div id="contenitore"><div id="interno"> </div></div>
</body>
</html>
Grazie mille!! ^_^
e se volessi mettere anche esplicito il fatto che la progressione sia ad esempio al 10%? come facci a scrivere 10% sulla progress bar?
con questo : <div id=testo style="position:absolute;....">testo</div>
mi mette il testo sotto...io lo vorrei dentro la barra..
L'eventuale testo andrà dentro il div id="interno", no? (magari impostando un white-space:nowrap; per non far andare a capo il testo se fosse più lungo del contenitore interno...) :mrgreen:
Ciao!Codice HTML:<div id="contenitore"><div id="interno">eventuale testo </div></div>
grazie ancora!!:lol: