Javascript Count-Up sayacına ihtiyaç

Delik · 4 Ocak 2013

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?

A Oguzhan Basar · 4 Ocak 2013

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.

Delik · 4 Ocak 2013

Benim acelem yok gerci, ama sizinde okadar ugrasmanizi istemem elbette.

Ben elimde olanlardan birini buraya yüklemeye calisacagim. Ilginiz icin simdiden cok tesekkürler.

Delik · 4 Ocak 2013

Kod:

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.

Kod:

<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

Delik · 6 Ocak 2013

Kendim yaptim!!! yardimlariniz icin Tesekkürler

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.

Kod:

/**********************************************************************************************
* Count-Up Timer script by Hakan Havutcuoglu (https://www.havutcuoglu.com/) or (https://www.havutcuoglu.de/)
* This notice MUST stay intact(in JS files and SCRIPT tags) for free and legal usege.
* https://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="https://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> <span class='months-text'>" + (this.months == 1? "month" : "months") + "</span><p/>" +
			"<p><span class='weeks'>" + this.weeks + "</span> <span class='weeks-text'>" + (this.weeks == 1? "week" : "weeks") + "</span><p/>" + */
			"<p><span class='days'>" + this.days + "</span> <span class='days-text'>" + (this.days == 1? "day" : "days") + "</span></p>" +
			"<p><span class='hours'>" + this.hours + "</span> <span class='hours-text'>" + (this.hours == 1? "hour" : "hours") + "</span></p>" +
			"<p><span class='minutes'>" + this.minutes + "</span> <span class='minutes-text'>" + (this.minutes == 1? "minute" : "minutes") + "</span></p>" +
			"<p><span class='seconds'>" + this.seconds + "</span> <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

Kod:

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

Kod:

<html xmlns="https://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.

albostan · 31 Ocak 2013

Delik' Alıntı:

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.

Kod:

/**********************************************************************************************
* Count-Up Timer script by Hakan Havutcuoglu (https://www.havutcuoglu.com/) or (https://www.havutcuoglu.de/)
* This notice MUST stay intact(in JS files and SCRIPT tags) for free and legal usege.
* https://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="https://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> <span class='months-text'>" + (this.months == 1? "month" : "months") + "</span><p/>" +
			"<p><span class='weeks'>" + this.weeks + "</span> <span class='weeks-text'>" + (this.weeks == 1? "week" : "weeks") + "</span><p/>" + */
			"<p><span class='days'>" + this.days + "</span> <span class='days-text'>" + (this.days == 1? "day" : "days") + "</span></p>" +
			"<p><span class='hours'>" + this.hours + "</span> <span class='hours-text'>" + (this.hours == 1? "hour" : "hours") + "</span></p>" +
			"<p><span class='minutes'>" + this.minutes + "</span> <span class='minutes-text'>" + (this.minutes == 1? "minute" : "minutes") + "</span></p>" +
			"<p><span class='seconds'>" + this.seconds + "</span> <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

Kod:

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

Kod:

<html xmlns="https://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

Ö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

albostan · 31 Ocak 2013

Delik' Alıntı:
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

Ö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

	Benzer konular	Forum			Tarih
N	html,css,javascript bilen UZMAN Personel \| Beylikdüzü - İstanbul	Sonuçlanan İlanlar	2	2K	28 Ocak 2016
H	javascript çok acil lütfen	Web Tasarımı	1	777	1 Mar 2014
B	Javascript Yardım	Dreamweaver	1	4K	27 Kas 2013
F	Javascript scrool to yardım	Php, Asp, Perl, Html	0	1K	12 Ağu 2012
V	Nisanda 3 hediye kitap (photoshop, css, javascript, ajax)	Photoshop	0	1K	2 Nis 2012
D	Jquery, Javascript, Xhtml, Css düzenleme - Türkiye Geneli	Sonuçlanan İlanlar	4	1K	6 Eki 2011
	Javascript kod yazabilen web master - İstanbul	Sonuçlanan İlanlar	1	990	21 Eyl 2011
V	java, javascript, c++, html,css, ajax, sQl, photoshop, vb a, php - Türkiye Geneli	Sonuçlanan İlanlar	1	1K	21 Tem 2011

Javascript Count-Up sayacına ihtiyaç

Benzer konular