Javascript Count-Up sayacına ihtiyaç

Php, Asp, Perl, Html - Javascript Count-Up sayacına ihtiyaç ...

Cevapla
Javascript Count-Up sayacına ihtiyaç
Delik isimli Üye şimdilik offline konumundadır

Delik

Grafiker / Yurtdışı

Standart

Javascript Count-Up sayacına ihtiyaç

Alt 04-01-2013 #1
Sponsorlu Bağlantılar

Arkadaslar javascripte fazla deneyimim olmadigi icin bu konuyu acma ihtiyaci duydum. Forumda ve arama motorlarinda da bir neticeye ulasamadim.

Konu: Belirlenmis bir tarihten itibaren (örnegin 31.03.2012 12:24:15) baslayarak, seneleri, aylari, günleri, saatleri, dakikalari ve saniyeleri yukariya sayabilen bir sayaca ihtiyacim var.

Arama motorlarinda buldugum sayaclar (3 sene, 2 ay, 10 gün, 1 saat, 48 dak, 53sn) seklinde gösteriyor ve attributlar css üzerinden style olmuyor.

Benim ihtiyacim olan (3 sene, 38 ay, 463 gün, 11113 saat, 666768 dak, 40006133 sn) seklinde göstermesi ve mümkünse, sene, ay, gün ve saniye gibi attributlara html class attributu verilmis olmasi ki, daha sonra css üzeri bunlarin rengi, sekli degistirilebilsin. Resimde oldugu gibi...

Böyle bir javascripti elinde olan var mi? Yada yardimci olabilecek biri mevcut mu?
Javascript Count-Up sayacına ihtiyaç
Javascript Count-Up sayacına ihtiyaç
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

A Oguzhan Basar isimli Üye şimdilik offline konumundadır

A Oguzhan Basar(26)

Öğrenci (Diğer) / İstanbul

Standart
Alt 04-01-2013 #2
                             Sponsorlu Bağlantılar
saat itibariyle bende sıfırdan yazacak kafa kalmadı ama internetten bulduğunuz sayaçlardan istediğinize en yakın olanı buraya atarsanız üzerinde oynayabilirim.
Bu mesajdan alıntı yap
Delik isimli Üye şimdilik offline konumundadır

Delik

Grafiker / Yurtdışı

Standart
Alt 04-01-2013 #3
Benim acelem yok gerci, ama sizinde okadar ugrasmanizi istemem elbette.

Ben elimde olanlardan birini buraya yüklemeye calisacagim. Ilginiz icin simdiden cok tesekkürler.
Bu mesajdan alıntı yap
Delik isimli Üye şimdilik offline konumundadır

Delik

Grafiker / Yurtdışı

Standart
Alt 04-01-2013 #4
function calcage(secs, num1, num2) {
  s = ((Math.floor(secs/num1))%num2).toString();
  if (LeadingZero && s.length < 2)
    s = "0" + s;
  return "<b>" + s + "</b>";
}

function CountBack(secs) {
  if (secs < 0) {
    document.getElementById("cntdwn").innerHTML = FinishMessage;
    return;
  }
  DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
  DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
  DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
  DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));

  document.getElementById("cntdwn").innerHTML = DisplayStr;
  if (CountActive)
    setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}

function putspan(backcolor, forecolor) {
 document.write("<div id='cntdwn' style='background-color:" + backcolor + "; color:" + forecolor + "'></div>");
 }

if (typeof(BackColor)=="undefined")
  BackColor = "white";
if (typeof(ForeColor)=="undefined")
  ForeColor= "black";
if (typeof(TargetDate)=="undefined")
  TargetDate = "06/27/2006 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
  DisplayFormat = "%%D%% Tagen, %%H%% Stunden, %%M%% Minuten, %%S%% Sekunden.";
if (typeof(CountActive)=="undefined")
  CountActive = true;
if (typeof(FinishMessage)=="undefined")
  FinishMessage = "";
if (typeof(CountStepper)!="number")
  CountStepper = 1;
if (typeof(LeadingZero)=="undefined")
  LeadingZero = true;


CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
  CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
  ddiff = new Date(dnow-dthen);
else
  ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);
Yalniz bu yukaridaki kodlamada hosuma gitmeyen birsey var, oda css üzeri style yapilamamasi.

Elimde mevcut olan diger bir kodda bu, burdada ayni sorun ve input icerigi olarak veriliyor. Benim ise resimde görüldügü sekilde olan bir yazilima ihtiyacim var. Renklerini ve tarzini istedigim sekilde degistirebilmem gerekiyor.


<html>
  <head>
    <title>Datum-Countup mit JavaScript</title>

    <script language="JavaScript">
      var jahr=2006, monat=7, tag=27, stunde=12, minute=20, sekunde=15; // Start-Datum in MEZ

      function countup() {
        var startDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde);
        zielDatum=new Date(); // Aktuelles Datum

        // Countup erst berechnen und anzeigen, wenn Start-Datum überschritten wird
        if(startDatum<zielDatum)  {

          var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0;

          // Jahre
          while(startDatum<zielDatum) {
            jahre++;
            startDatum.setFullYear(startDatum.getFullYear()+1);
          }
          startDatum.setFullYear(startDatum.getFullYear()-1);
          jahre--;

          // Monate
          while(startDatum<zielDatum) {
            monate++;
            startDatum.setMonth(startDatum.getMonth()+1);
          }
          startDatum.setMonth(startDatum.getMonth()-1);
          monate--;

          // Tage
          while(startDatum.getTime()+(24*60*60*1000)<zielDatum) {
            tage++;
            startDatum.setTime(startDatum.getTime()+(24*60*60*1000));
          }

          // Stunden
          stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
          startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);

          // Minuten
          minuten=Math.floor((zielDatum-startDatum)/(60*1000));
          startDatum.setTime(startDatum.getTime()+minuten*60*1000);

          // Sekunden
          sekunden=Math.floor((zielDatum-startDatum)/1000);

          // Anzeige formatieren
          (jahre!=1)?jahre=jahre+" Jahre,  ":jahre=jahre+" Jahr,  ";
          (monate!=1)?monate=monate+" Monate,  ":monate=monate+" Monat,  ";
          (tage!=1)?tage=tage+" Tage,  ":tage=tage+" Tag,  ";
          (stunden!=1)?stunden=stunden+" Stunden,  ":stunden=stunden+" Stunde,  ";
          (minuten!=1)?minuten=minuten+" Minuten  und  ":minuten=minuten+" Minute  und  ";
          if(sekunden<10) sekunden="0"+sekunden;
          (sekunden!=1)?sekunden=sekunden+" Sekunden":sekunden=sekunden+" Sekunde";

          document.countupform.countupinput.value=
              jahre+monate+tage+stunden+minuten+sekunden;

        }
        // Anderenfalls alles auf Null setzen
        else document.countupform.countupinput.value=
            "0 Jahre,  0 Monate,  0 Tage,  0 Stunden,  0 Minuten  und  00 Sekunden";

        setTimeout('countup()',200);
      }
    </script>
  </head>

  <body onLoad="countup()">
    <form name="countupform">
      <p>
        <input size="120" name="countupinput">
      </p>
    </form>
  </body>

</html>
Kodlamalar internetten ve iceriginde hata olabilir. Ilgi icin tekrardan tesekkürler
Bu mesajdan alıntı yap
Delik isimli Üye şimdilik offline konumundadır

Delik

Grafiker / Yurtdışı

Dosya19

Kendim yaptim!!! yardimlariniz icin Tesekkürler

Alt 06-01-2013 #5
Azimle ugrasan basarir diye bosuna dememisler. Ve bende ügrastim ve basardim.

Ihtiyaci olan arkadaslara yayinliyorum güle güle kullanin. Tabiki css üzeri formatlanmasi gerekiyor. Bütün yapmaniz gereken. Sayfaniza entegre etmek.
Ben Safari, Firefox ve Chrome'da denedim ve süper bir sekilde calisiyor. IE'de deneme imkanim olmadigi icin birsey diyemeyecegim.


Buyrun:

Javascript'i js dosyasina counter.js olarak kaydedin.


/**********************************************************************************************
* Count-Up Timer script by Hakan Havutcuoglu (http://www.havutcuoglu.com/) or (http://www.havutcuoglu.de/)
* This notice MUST stay intact(in JS files and SCRIPT tags) for free and legal usege.
* http://www.havutcuoglu.com/disclaimer.html
**********************************************************************************************/
// JavaScript Document

	function CountUnits(initDate, id){
		this.counterDate = new Date(initDate);
		this.secDiff = 0, this.seconds = 0, this.minutes = 0, this.hours = 0;
		this.days = 0, this.weeks = 0, this.months = 0, this.years = 0;
		this.countainer = document.getElementById(id);
		this.countainer.title = initDate;
		// following two lines are added just for display on my page.
		this.updateCounter();this.countainer.onclick = function(){window.location="http://havutcuoglu.de/";};
		this.updateCounter();
		//you can delete this two lines
	}
 
	CountUnits.prototype.calculateUnits=function(valuePerUnit){
		var tmp = this.secDiff/valuePerUnit;
		tmp = Math.abs(tmp) < 1? 0 : tmp;
		return (tmp < 0 ? Math.ceil(tmp) : Math.floor(tmp));
	}
 
	CountUnits.prototype.calculate=function(){
		this.secDiff = Math.round(((new Date()) - this.counterDate)/1000);
		this.seconds = Math.round(this.secDiff);
		this.minutes = this.calculateUnits(60);
		this.hours = this.calculateUnits(3600);
		this.days = this.calculateUnits(86400);
		this.weeks = this.calculateUnits(604800);
		this.months = this.calculateUnits(2629744);
		this.years = this.calculateUnits(31556928);
	}
 
	CountUnits.prototype.updateCounter=function(){
		this.calculate();
		this.countainer.innerHTML ="<p><span class='years'>" + this.years + "</span><br /><span class='years-text'>" + (this.years == 1? "year" : "years") + "</span></p>" +
			/* "<p><span class='months'>" + this.months + "</span>&nbsp;<span class='months-text'>" + (this.months == 1? "month" : "months") + "</span><p/>" +
			"<p><span class='weeks'>" + this.weeks + "</span>&nbsp;<span class='weeks-text'>" + (this.weeks == 1? "week" : "weeks") + "</span><p/>" + */
			"<p><span class='days'>" + this.days + "</span>&nbsp;<span class='days-text'>" + (this.days == 1? "day" : "days") + "</span></p>" +
			"<p><span class='hours'>" + this.hours + "</span>&nbsp;<span class='hours-text'>" + (this.hours == 1? "hour" : "hours") + "</span></p>" +
			"<p><span class='minutes'>" + this.minutes + "</span>&nbsp;<span class='minutes-text'>" + (this.minutes == 1? "minute" : "minutes") + "</span></p>" +
			"<p><span class='seconds'>" + this.seconds + "</span>&nbsp;<span class='seconds-text'>" + (this.seconds == 1? "second" : "seconds") + "</span></p>";
		var self = this;
		setTimeout(function(){self.updateCounter();}, 1000);
	}


// months: January, February, March, April, May, Juni, July, August, September, October, November, December
window.onload=function(){  
	new CountUnits('November 04, 1979 08:30:55', 'counter');
}
css'i css dosyasina counter.css olarak kaydedin

/* CSS Document */

/*######### NUMBERS ########*/

.years{
	font-size:100px;
	line-height:48px;
}
.months{
	font-size:48px;
	line-height:21px;
}
.weeks{
	font-size:44px;
}
.days{
	font-size:40px;
}
.hours{
	font-size:32px;
}
.minutes{
	font-size:24px;
}
.seconds{
	font-size:18px;
}

/*######### TEXT ########*/

.years-text{
	font-size:40px;
}
.months-text{
	font-size:48px;
	line-height:21px;
}
.weeks-text{
	font-size:44px;
}
.days-text{
	font-size:40px;
}
.hours-text{
	font-size:32px;
}
.minutes-text{
	font-size:24px;
}
.seconds-text{
	font-size:18px;
}
gerekli olan html bilgileri:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/counter.css"/>
<script type="text/javascript" src="js/counter.js"></script>


</head>
<body>
	<div id="counter"></div> 
	
</body>
</html>


Dualarinizi eksik etmeyin.
Bu mesajdan alıntı yap
albostan isimli Üye şimdilik offline konumundadır

albostan

Grafiker / Yurtdışı

Standart
Alt 31-01-2013 #6
Azimle ugrasan basarir diye bosuna dememisler. Ve bende ügrastim ve basardim.

Ihtiyaci olan arkadaslara yayinliyorum güle güle kullanin. Tabiki css üzeri formatlanmasi gerekiyor. Bütün yapmaniz gereken. Sayfaniza entegre etmek.
Ben Safari, Firefox ve Chrome'da denedim ve süper bir sekilde calisiyor. IE'de deneme imkanim olmadigi icin birsey diyemeyecegim.


Buyrun:

Javascript'i js dosyasina counter.js olarak kaydedin.


/**********************************************************************************************
* Count-Up Timer script by Hakan Havutcuoglu (http://www.havutcuoglu.com/) or (http://www.havutcuoglu.de/)
* This notice MUST stay intact(in JS files and SCRIPT tags) for free and legal usege.
* http://www.havutcuoglu.com/disclaimer.html
**********************************************************************************************/
// JavaScript Document

	function CountUnits(initDate, id){
		this.counterDate = new Date(initDate);
		this.secDiff = 0, this.seconds = 0, this.minutes = 0, this.hours = 0;
		this.days = 0, this.weeks = 0, this.months = 0, this.years = 0;
		this.countainer = document.getElementById(id);
		this.countainer.title = initDate;
		// following two lines are added just for display on my page.
		this.updateCounter();this.countainer.onclick = function(){window.location="http://havutcuoglu.de/";};
		this.updateCounter();
		//you can delete this two lines
	}
 
	CountUnits.prototype.calculateUnits=function(valuePerUnit){
		var tmp = this.secDiff/valuePerUnit;
		tmp = Math.abs(tmp) < 1? 0 : tmp;
		return (tmp < 0 ? Math.ceil(tmp) : Math.floor(tmp));
	}
 
	CountUnits.prototype.calculate=function(){
		this.secDiff = Math.round(((new Date()) - this.counterDate)/1000);
		this.seconds = Math.round(this.secDiff);
		this.minutes = this.calculateUnits(60);
		this.hours = this.calculateUnits(3600);
		this.days = this.calculateUnits(86400);
		this.weeks = this.calculateUnits(604800);
		this.months = this.calculateUnits(2629744);
		this.years = this.calculateUnits(31556928);
	}
 
	CountUnits.prototype.updateCounter=function(){
		this.calculate();
		this.countainer.innerHTML ="<p><span class='years'>" + this.years + "</span><br /><span class='years-text'>" + (this.years == 1? "year" : "years") + "</span></p>" +
			/* "<p><span class='months'>" + this.months + "</span>&nbsp;<span class='months-text'>" + (this.months == 1? "month" : "months") + "</span><p/>" +
			"<p><span class='weeks'>" + this.weeks + "</span>&nbsp;<span class='weeks-text'>" + (this.weeks == 1? "week" : "weeks") + "</span><p/>" + */
			"<p><span class='days'>" + this.days + "</span>&nbsp;<span class='days-text'>" + (this.days == 1? "day" : "days") + "</span></p>" +
			"<p><span class='hours'>" + this.hours + "</span>&nbsp;<span class='hours-text'>" + (this.hours == 1? "hour" : "hours") + "</span></p>" +
			"<p><span class='minutes'>" + this.minutes + "</span>&nbsp;<span class='minutes-text'>" + (this.minutes == 1? "minute" : "minutes") + "</span></p>" +
			"<p><span class='seconds'>" + this.seconds + "</span>&nbsp;<span class='seconds-text'>" + (this.seconds == 1? "second" : "seconds") + "</span></p>";
		var self = this;
		setTimeout(function(){self.updateCounter();}, 1000);
	}


// months: January, February, March, April, May, Juni, July, August, September, October, November, December
window.onload=function(){  
	new CountUnits('November 04, 1979 08:30:55', 'counter');
}
css'i css dosyasina counter.css olarak kaydedin

/* CSS Document */

/*######### NUMBERS ########*/

.years{
	font-size:100px;
	line-height:48px;
}
.months{
	font-size:48px;
	line-height:21px;
}
.weeks{
	font-size:44px;
}
.days{
	font-size:40px;
}
.hours{
	font-size:32px;
}
.minutes{
	font-size:24px;
}
.seconds{
	font-size:18px;
}

/*######### TEXT ########*/

.years-text{
	font-size:40px;
}
.months-text{
	font-size:48px;
	line-height:21px;
}
.weeks-text{
	font-size:44px;
}
.days-text{
	font-size:40px;
}
.hours-text{
	font-size:32px;
}
.minutes-text{
	font-size:24px;
}
.seconds-text{
	font-size:18px;
}
gerekli olan html bilgileri:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/counter.css"/>
<script type="text/javascript" src="js/counter.js"></script>


</head>
<body>
	<div id="counter"></div> 
	
</body>
</html>


Dualarinizi eksik etmeyin.
Dua isteyene dua bol Javascript Count-Up sayacına ihtiyaç

Öncelikle paylaşımın için emeğine sağol...
ve Allah Razı olsun, hayırlı işler ve işlerinde bol kazançlar nasip eylesin inşaAllah
Bu mesajdan alıntı yap
albostan isimli Üye şimdilik offline konumundadır

albostan

Grafiker / Yurtdışı

Standart
Alt 31-01-2013 #7
Azimle ugrasan basarir diye bosuna dememisler. Ve bende ügrastim ve basardim.

Ihtiyaci olan arkadaslara yayinliyorum güle güle kullanin. Tabiki css üzeri formatlanmasi gerekiyor. Bütün yapmaniz gereken. Sayfaniza entegre etmek.
Ben Safari, Firefox ve Chrome'da denedim ve süper bir sekilde calisiyor. IE'de deneme imkanim olmadigi icin birsey diyemeyecegim.


....
Dua isteyene dua bol Javascript Count-Up sayacına ihtiyaç

Öncelikle paylaşımın için emeğine sağol...
ve Allah Razı olsun, hayırlı işler ve işlerinde bol kazançlar nasip eylesin inşaAllah
Bu mesajdan alıntı yap
Cevapla

Benzer Konular
Konu Konu Bilgileri Forum Cevaplar Son Mesaj
Javascript scrool to yardım Furkan Cinar Php, Asp, Perl, Html 0 12-08-2012 20:48:36
Bruno Mars > Count On Me Value Müzik Videoları 2 21-02-2012 09:37:36
Html-Javascript-Css Dersleri MONASTERY Php, Asp, Perl, Html 5 22-12-2010 22:37:29
asp de javascript vertical menu? netsynter Php, Asp, Perl, Html 0 18-04-2010 14:10:58
Javascript Komut cyta77 Visual basic , Delphi , C , C++ 3 05-02-2009 23:17:57

Kapat
Şifremi Unuttum?