Wie url wenn diese progess-bar erreichte 100%

Ich bin neu in JS und ich verwenden, um diese progess-Bar und ich steckte umleiten zu einem Link zu umleiten, nachdem es fertig geladen ... Ich bin sicher, dass sein kleine Sache, aber ich versuchte, und ich immer noch ErfolglosigkeitWie url wenn diese progess-bar erreichte 100%

das Beispiel hier: Demo

Quelle

2016-07-08 Mina Magdy

eine Vermutung zu machen - es ist komplett Zustand am Ende des Codes ('vollständig: function() {// hier Code auf vollständige}') - dort schreiben Sie in 'window.location.replace (“ http://stackoverflow.com ");' –

hat nicht funktioniert: $ ('# time_session') radialProgress (." init“, { 'Größe': 45, 'füllen': 2}) \t \t \t \t \t \t \t \t .radialProgress ("auf", { 'PERC' 100, 'Zeit' 1000, \t \t \t \t \t \t \t \t \t vollständig: function() { \t \t \t \t \t \t \t \t \t \t window.location.replace ("Stackoverflow.com "); \t \t \t \t \t \t \t \t \t} \t \t \t \t \t \t \t \t}); –

Heres ein Beispiel, das Ihnen helfen könnte. Entfernen Sie die Warnung und fügen Sie Ihre URL nach dem Fortschrittsbalken ein.

Viel Glück und markieren Sie mich als Antwort, wenn dies hilft Ihnen

var time = 10000; // 10 secs 
 
var steps = 50; // Five per second 
 
var step = 1; 
 

 
function progress() { 
 
var bar = document.getElementById("barwrap"); 
 
var aStep = (bar.offsetWidth -2) /steps;// 2px border removed from width 
 
var x = Math.round(aStep *step); 
 
var outer = document.getElementById("outer"); 
 
var inner = document.getElementById("inner"); 
 

 
// Work out seconds based on % progress from current step 
 
var secs = ((time /1000) -Math.floor((step /steps) *10)); 
 

 
inner.style.width = x +"px"; 
 
step++; 
 

 
// If 0 seconds, display waiting message instead 
 
outer.firstChild.innerHTML = (secs? secs +" seconds...": "Please Wait..."); 
 
// Match text 
 
inner.firstChild.innerHTML = outer.firstChild.innerHTML; 
 

 
if(step > steps) redir(); 
 
else setTimeout("progress();", time /steps); 
 
} 
 

 
function redir() { 
 
alert("Redirecting now!"); //Replace for your URL 
 
}

* { font-family: "Arial", sans-serif; } 
 

 
#wrap { margin-top: 50px;text-align: center; } 
 

 
#barwrap { 
 
position: relative; /* to contain outer */ 
 
margin: 0 auto; /* to centre */ 
 
width: 250px;height: 20px; /* size of our bar - required */ 
 
text-align: left; 
 
font-weight: bold; 
 
border: 1px solid black; 
 
} 
 

 
#barwrap P { /* to contain text */ 
 
margin: 0; /* FF needs this or text drops below bar */ 
 
width: 250px; /* use this node to position text */ 
 
text-align: center; 
 
} 
 

 
#barwrap #outer { /* bar 'background' */ 
 
position: absolute; 
 
width: 100%; height: 100%; /* match parent size */ 
 
background: lightgreen; 
 
color: green; /* original colour of text */ 
 
} 
 

 
#barwrap #inner { 
 
position: relative; /* otherwise outer hides us */ 
 
width: 0; height: 100%; /* match parent */ 
 
overflow: hidden; /* to hide new text/prevent it wrapping */ 
 
background: green; 
 
color: lightgreen; /* colour of changed text */ 
 
}

<html> 
 
<head> 
 
<title>Test Page</title> 
 
    </head> 
 

 
<body> 
 

 
<div id='wrap'> 
 
Progress: 
 
<div id='barwrap'> <!-- P wrappers for text positioning --> 
 
<div id='outer'><p></p></div> <!-- original colour/text --> 
 
<div id='inner'><p></p></div> <!-- new colour/text --> 
 
</div> 
 

 
<br> 
 
<a href='#' onClick='progress();'>Click here to start bar (only once please, you'll break it)</a> 
 
</div> 
 

 
</body> 
 

 
</html>

Weitere Informationen hier: https://www.webmasterworld.com/javascript/3321308.htm

Quelle

2016-07-08 22:44:08 Gonzdn

In Ihrem Beispiel Sie versuchen, ein Ereignis Haken complete. Nach der Überprüfung des Codes gibt es keinen Auslöser für dieses Ereignis! Ich habe jedoch eins hinzugefügt. Es wird ausgelöst, wenn der Lader komplette Beladung (100%):

//Trigger the complete callback when finished 
(options.complete || $.noop()).call(this);

Das gleiche gilt für den Schritt Ereignis:

//Trigger the step callback 
(options.complete || $.noop()).call(this);

Bitte überprüfen Sie diese JSBin zu sehen, wo ich diese zwei Zeilen hinzugefügt haben.

Jetzt window.location.replace("http://stackoverflow.com/"); in Ihrem vollständigen Rückruf hinzufügen.

Quelle

2016-07-08 23:00:21

danke, adaequat –

Die von Ihnen verwendete Fortschrittsbalken-Bibliothek scheint keine Ereignisse zu unterstützen. Das einzige, was ich sehen kann, ist, ihre privaten Daten manuell zu lesen und dann zu tun, was Sie wollen.

Das ist nicht etwas, das ich tun würde vorschlagen, würde ich ihre Bibliothek erweitert Rückrufe zu unterstützen oder eine neue Bibliothek finden, aber dies würde für eine temporäre Lösung arbeiten.

var id = null; 
var checkIfDone = function() { 
    var perc = $('#time_session').radialProgress().data('__radialProgress').perc; 
    if (perc >= 100) { 
     console.log('done'); 
     window.location.href = 'https://www.google.com'; 
     // this isn't going to work @ jsbin.com because its executed in a 
     // frame, but you can see that it tries to execute it in the console 
    } 
    else { 
     console.log('not done yet, only ' + perc); 
     id = setTimeout(checkIfDone,1000); // check every second until done 
    } 
}; 
checkIfDone();

Quelle

2016-07-08 23:09:02 Chad

Ismails Post ist der bessere Weg, es zu tun, und was ich schlage vor, Sie gehen! Seien Sie sich bewusst, dass Sie bei jeder Aktualisierung dieser Bibliothek Ihre Anpassung erneut hinzufügen müssen. – Chad

Wie url wenn diese progess-bar erreichte 100%

Antwort

Verwandte Themen