Question

我是JS的新手，我使用了这个progess-bar，并且在完成加载后我坚持重定向到一个链接...我确定它的小东西但我尝试了但我仍然没有成功

这里的例子： Demo

Answer 1

在您的示例中，您正尝试挂钩事件complete。检查代码后，没有触发该事件！但是，我加了一个。它将在加载程序完成加载（100％）时触发：

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

步骤事件相同：

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

请检查此JSBin以查看我已添加这两行的位置。

现在在完整的回调中添加window.location.replace("http://stackoverflow.com/");。

Answer 2

这是一个可能对您有所帮助的示例。删除警报并在进度条后输入您的URL。

祝你好运，如果能帮助你，请将我标记为答案

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>

更多信息： https://www.webmasterworld.com/javascript/3321308.htm

Answer 3

您正在使用的进度条库似乎不支持任何事件，因此我可以看到告诉它完成的唯一方法是手动读取其私有数据，然后根据它执行您想要的操作。

这不是我建议做的事情，我会扩展他们的库来支持回调或找到一个新的库，但这可以用于临时解决方案。

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();

当此progess-bar达到100％时，如何重定向到网址

3 个答案: