Progress bar yapımı - IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası

hAte · 19 Kasım 2014, 23:56

PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!


<head> 

<title>Test Page</title> 

<style> 

 
* { 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 */ 

} 

 
</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 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!"); 

} 

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

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
Progress kenetlenemedi	MoSFeT	Haber Arşivi	0	03 Temmuz 2010 08:45
PnP Progress Bar	Nickolas	mIRC Scripting Hazır Kodlar	7	26 Mart 2009 13:48

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)

Etiketlenen Kullanıcılar
Etiketlemek istediğiniz kullanıcılar arasına virgül koyunuz. Örnek: nokta,sukunet,NucLear

5846 sayılı Fikir ve Sanat Eserleri Kanunu gereğince sitemizde telif hakkı bulunan mp3,video v.b. eserlerin paylaşımı yasaktır. Yasal işlem olması halinde paylaşan kişi yada kişilerin bilgileri gerekli kuruma verilecektir.