Zähler mit variierender Geschwindigkeit
Hallo zusammen,
um die Besucher für ein paar Sekunden auf einer Seite zu halten, ist bereits ein Fortschrittsbalken eingebaut, der nach 10 Sekunden das Ergebnis anzeigt. Um den Eindruck einer echten Suche zu verstärken, würde ich gerne den Balken in variierender Geschwindigkeit laufen lassen, oder parallel dazu einen Zähler laufen lassen, der mal schneller, mal langsamer läuft oder auch mal für eine Sekunde stehen bleibt. Ihr wisst bestimmt, was ich meine.
Ich habe aber absolut keinen Schimmer, wie solche Variationen realisiert werden könnten. Hat jemand einen Tipp für mich?
Der hier verwendete Code
<style>
#alles{
margin:0 auto;
width:50%;
}
#balken{
width:300px;
height:30px;
border:1px solid black;
}
#balkeninnen{
width:1px;
height:31px;
background:red;
}
#time{
position:relative;
top:-25px;
left:150px;
font-size:20px;
}
</style>
<script src="/js_webseite/jquery.js"></script>
<div id="alles"><input type="button" id="go" value="Zähler Start"><span id="gesamttime"></span>
<div id="balken"><div id="balkeninnen"></div><div id="time">0</div> </div>
</div>
<script>
//zeit=['10','20','50','100','400','500','600','700','800','900','1000'];
color=['red','blue','yellow','orange','green','black'];
balken=300;//px
start=0;
ende=10;
ende1=300/ende;
$('#go').click(function(){
zeit=Math.floor((Math.random() * 1000) + 20);
uhr(zeit);
co=Math.floor((Math.random() * color.length) + 1);
$('#balkeninnen').css('background',color[co]);
if(co==5){
$('#time').css('color','white');
}else{
$('#time').css('color','black');
}
var seks=zeit*ende/1000;
$('#gesamttime').html(seks+' Sekunden');
lauf(ende,start,zeit);
function lauf(ende,start,zeit){
if(start<ende){
f=balken/ende1;
start++;
start1=start*ende1;
$('#balkeninnen').css('width',start1+'px');
$('#time').html(start*f+' % ');
timer=setTimeout(function(){lauf(ende,start,zeit)},zeit);
} else{
clearTimeout(timer);
}
}
});
function uhr(zeit1){
retureuhr=setInterval(lauf,10);
function lauf(zeit){
zeit1--;
if(zeit1<=0){
clearInterval(retureuhr);
}
$('#gesamttime').html(zeit1/100+' Sekunden');
}
}
</script>