Pagina 1 van 1

Aftellen script

Geplaatst: 24 mei 2007, 01:30
door Peterken
Ik zou een teller willen plaatsen die aftelt naar een bepaalde datum/tijd maar ken niet veel van scripting.
Nu heb ik het volgende gevonden en het werkt maar er zit iets teveel in nl de weergave van de teller op 2 manieren en ik krijg dat niet fatsoenlijk eruit.

Code: Selecteer alles

<style style="text/css">

.lcdstyle{ /*Example CSS to create LCD countdown look*/
background-color:black;
color:yellow;
font: bold 18px MS Sans Serif;
padding: 3px;
}

.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
font-size: 80%
}

</style>

<script type="text/javascript">

/***********************************************
* Dynamic Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}

cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}

cdtime.prototype.showresults=function(){
var thisobj=this


var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left

//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc


function formatresults(){
if (this.timesup==false){//if target date/time not yet met
var displaystring=arguments[0]+" days "+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds left until March 23, 2009 18:25:00"
}
else{ //else if target date/time met
var displaystring="Future date is here!"
}
return displaystring
}

function formatresults2(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> left until this Christmas"
}
else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("Christmas is here!") //Instead, perform a custom alert
}
return displaystring
}

</script>

Code: Selecteer alles

<div id="countdowncontainer"></div>
<br />
<div id="countdowncontainer2"></div>

<script type="text/javascript">

var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")
futuredate.displaycountdown("days", formatresults)

var currentyear=new Date().getFullYear()
//dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1
var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>25)? currentyear+1 : currentyear
var christmas=new cdtime("countdowncontainer2", "December 25, "+thischristmasyear+" 0:0:00")
christmas.displaycountdown("days", formatresults2)

</script>

De eerste teller is overbodig en nu heb ik wel een paar andere voorbeelden gevonden maar ik zou de teller willen opsplitsen om de dagen op een regel weer te geven en de rest eronder hetgeen me niet lukte met die andere.

Is hier een of andere crack die me hiermee kan/wil helpen? :wink:

Geplaatst: 24 mei 2007, 03:20
door crapiecorn
Je moet alleen wat aanpassen waar instanties worden gemaakt op het einde.

Code: Selecteer alles

<script type="text/javascript">


//begin eerste countdown

var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")
futuredate.displaycountdown("days", formatresults)
//einde

//begin 2

var currentyear=new Date().getFullYear()
var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>25)? currentyear+1 : currentyear

var christmas=new cdtime("countdowncontainer2", "December 25, "+thischristmasyear+" 0:0:00")
christmas.displaycountdown("days", formatresults2)

//einde

</script>




Voor de weergave kan je een eigen implementatie van formatresults schrijven, is niet zo moeilijk.

Geplaatst: 26 jul 2007, 11:16
door Peterken
Hey crapiecorn, ik had misschien beter geschreven dat ik NIKS ken van webscripting; alleen wat batch bestandjes.

Ik gebruik alleen de eerste teller en met wat te wissen links en rechts werkt het wel maar nu heb ik nog een nog een '0/null' staan als ik dat met IE open.
Voor de rest werkt het zoals het zou moeten.

Re: Aftellen script

Geplaatst: 26 jul 2007, 13:23
door Kristof3
Peterken schreef:Ik zou een teller willen plaatsen die aftelt naar een bepaalde datum/tijd maar ken niet veel van scripting.
Nu heb ik het volgende gevonden en het werkt maar er zit iets teveel in nl de weergave van de teller op 2 manieren en ik krijg dat niet fatsoenlijk eruit.

De eerste teller is overbodig en nu heb ik wel een paar andere voorbeelden gevonden maar ik zou de teller willen opsplitsen om de dagen op een regel weer te geven en de rest eronder hetgeen me niet lukte met die andere.


Dit is een voorbeeld waar de 1ste teller eruit is.
De dagen van de 2de teller staan ook op een aparte lijn.

Code: Selecteer alles

<html>
   <head>
      <title></title>
      <style style="text/css">
body{ color: #DDDD80}
.lcdstyle{ /*Example CSS to create LCD countdown look*/
   background-color:black;
   color:yellow;
   font: bold 18px MS Sans Serif;
   padding: 3px;
   width: 250px;
}
.lcdstyle sup{ /*Example CSS to create LCD countdown look*/
   font-size: 80%;
}

</style>

<script type="text/javascript">

/***********************************************
* Dynamic Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

function cdtime(container, targetdate){
if (!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new Date()
this.targetdate=new Date(targetdate)
this.timesup=false
this.updateTime()
}

cdtime.prototype.updateTime=function(){
var thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
}

cdtime.prototype.displaycountdown=function(baseunit, functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}

cdtime.prototype.showresults=function(){
var thisobj=this


var timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date and current date, in seconds
if (timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in seconds
var oneHour=60*60 //hour unit in seconds
var oneDay=60*60*24 //day unit in seconds
var dayfield=Math.floor(timediff/oneDay)
var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
var secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}

/////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////

//Create your own custom format function to pass into cdtime.displaycountdown()
//Use arguments[0] to access "Days" left
//Use arguments[1] to access "Hours" left
//Use arguments[2] to access "Minutes" left
//Use arguments[3] to access "Seconds" left

//The values of these arguments may change depending on the "baseunit" parameter of cdtime.displaycountdown()
//For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
//For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc



function formatresults(){
if (this.timesup==false){ //if target date/time not yet met
var displaystring="<div class='lcdstyle'>"+arguments[0]+" <sup>days</sup></div><div class='lcdstyle'>"+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></div>"
}

else{ //else if target date/time met
var displaystring="" //Don't display any text
alert("Christmas is here!") //Instead, perform a custom alert
}
return displaystring
}

</script>
</head>
<body>


<div id="countdowncontainer"></div>

<script type="text/javascript">

var currentyear=new Date().getFullYear()
//dynamically get this Christmas' year value. If Christmas already passed, then year=current year+1
var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>25)? currentyear+1 : currentyear
var christmas=new cdtime("countdowncontainer", "December 25, "+thischristmasyear+" 0:0:00")
christmas.displaycountdown("days", formatresults)

</script>
</body>
</html>


Vergelijk de 2 eens en lees dan crapiecorn zijn post eens.
Let vooral op de laatste 20 lijnen code.

Dit dus:
crapiecorn schreef:

Code: Selecteer alles

//begin eerste countdown

var futuredate=new cdtime("countdowncontainer", "March 23, 2009 18:25:00")
futuredate.displaycountdown("days", formatresults)
//einde

Geplaatst: 31 jul 2007, 22:27
door rds

Code: Selecteer alles

<SCRIPT LANGUAGE="JavaScript">

var eventdate

function countdown_clock(strDate)
         {
            html_code = '<div id="countdown"></div>';         
            document.write(html_code);
           eventdate = new Date(strDate);   
            countdown();               
         }


 function toSt(n)
 {s=""
  if(n<10) s+="0"
  return s+n.toString();
 }
 
 function countdown()
 {
  d=new Date();
  count=Math.floor((eventdate.getTime()-d.getTime())/1000);
 
  seconds=toSt(count%60);
  count=Math.floor(count/60);
  minutes=toSt(count%60);
  count=Math.floor(count/60);
// voorlopig manueel aanpassen naar zomertijd --> -2
  hours=toSt(count%24)-2;
  count=Math.floor(count/24);
  days=count;   
                   
                   // dps = 's'; hps = 's'; mps = 's'; sps = 's';
                      //ps is short for plural suffix.
                   // if(days == 1) dps ='';
                   // if(hours == 1) hps ='';
                   // if(minutes == 1) mps ='';
                   // if(seconds == 1) sps ='';
                   
                   // document.all.countdown.innerHTML = days + ' day' + dps + ' ';
                   // document.all.countdown.innerHTML += hours + ' hour' + hps + ' ';
                   // document.all.countdown.innerHTML += minutes + ' minute' + mps + ' and ';
                   // document.all.countdown.innerHTML += seconds + ' second' + sps;




if (days == 1)
 {
      document.all.countdown.innerHTML = days + ' day ';
 }
else if (days == 0)
 {
       document.all.countdown.innerHTML = '';
 }
else
 {
       document.all.countdown.innerHTML = days + ' days ';
 }

  document.all.countdown.innerHTML += hours + 'h ';
  document.all.countdown.innerHTML += minutes + 'm ';
  document.all.countdown.innerHTML += seconds +'s';


  setTimeout("countdown()",1000);
 }
</SCRIPT>

aanroepen functie:

Code: Selecteer alles

<script type="text/javascript">countdown_clock("24 June 2006 00:00:00 GMT");</script>