IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası

IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası (https://www.ircforumlari.net/)
-   HTML/CSS/JavaScript (https://www.ircforumlari.net/html-css-javascript/)
-   -   Progress bar yapımı (https://www.ircforumlari.net/html-css-javascript/648557-progress-bar-yapimi.html)

hAte 19 Kasım 2014 23:56

Progress bar yapımı
 
PHP- Kodu:

<head
<
title>Test Page</title
<
style

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

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

#barwrap { 
positionrelative/* to contain outer */ 
margin0 auto/* to centre */ 
width250px;height20px/* size of our bar - required */ 
text-alignleft
font-weightbold
border1px solid black


#barwrap P { /* to contain text */ 
margin0/* FF needs this or text drops below bar */ 
width250px/* use this node to position text */ 
text-aligncenter


#barwrap #outer { /* bar 'background' */ 
positionabsolute
width100%; height100%; /* match parent size */ 
backgroundlightgreen
colorgreen/* original colour of text */ 


#barwrap #inner { 
positionrelative/* otherwise outer hides us */ 
width0height100%; /* match parent */ 
overflowhidden/* to hide new text/prevent it wrapping */ 
backgroundgreen
colorlightgreen/* colour of changed text */ 


</
style

<
script

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 Math.roundaStep *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 +"px"
step++; 

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

if( 
step stepsredir(); 
else 
setTimeout"progress();"time /steps); 


function 
redir() { 
alert"Redirecting now!"); 


</script> 
</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> 



Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şuanki Zaman: 14:44.

Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2025, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO
Copyright ©2004 - 2025 IRCForumlari.Net Sparhawk