Søg
Avatar billede jkn83 Praktikant
03. oktober 2010 - 19:03 Der er 21 kommentarer og
1 løsning

countdown timer

Jeg skal bruge en countdown som tæller ned til kl 10.15 hver dag, holder pause i måske 15 min, hvor efter den så tæller ned til 10.15 igen.

Tiden skal være realtime, og HVIS det er muligt, så når tiden er gået, skal den vise et billed i stedet for 00:00:00 (timer, min, sek) måske ?

Så hvis det er realtime skal der nok noget javascript ind over, men da ingen svarer der, forsøger jeg her.

håber nogen kan hjælpe
Avatar billede noltus Novice
03. oktober 2010 - 19:30 #1
Der er masser gratis på google kortlink.dk/google/87h6
Avatar billede repox Seniormester
03. oktober 2010 - 19:49 #2
Jeg blev lidt fanget af det; sikkerheden må ligge i at det ikke er klientens tid vi kigger på, men serverens - så jeg kom på noget ala det her:

time.php:
<?php

    $wantedTime = mktime(10, 15, 0);
    $day = 60 * 60 * 24;
    $pause = 60 * 15;

    if( time() > $wantedTime )
    {
        if( (time() - $pause) < $wantedTime )
        {
            echo "PAUSE";
            exit;
        }
        
        $wantedTime += $day;
    }
    
    $dif = $wantedTime - time();
    
    $hours = (int) ($dif/3600);
    $minutes = (int) (($dif / 60) % 60);
    $seconds = (int) ($dif % 60);
    
    $str = "";

    if($hours > 0)
        $str .= $hours.":";

    if($minutes > 0)
        $str .= str_pad($minutes, 2, 0, STR_PAD_LEFT).":";

    if($seconds > 0)
        $str .= str_pad($seconds, 2, 0, STR_PAD_LEFT);
        
    echo $str;
    
?>


Og en html fil, men noget AJAX til at hente opdatere med:
[div]
<DOCTYPE html>
<html>
    <head>
        <title>Count-down thingie</title>
        <script type="text/javascript">
            function ajaxObject(url, callbackFunction) {
              var that=this;      
              this.updating = false;
              this.abort = function() {
                if (that.updating) {
                  that.updating=false;
                  that.AJAX.abort();
                  that.AJAX=null;
                }
              }
              this.update = function(passData,postMethod) { 
                if (that.updating) { return false; }
                that.AJAX = null;                          
                if (window.XMLHttpRequest) {              
                  that.AJAX=new XMLHttpRequest();              
                } else {                                  
                  that.AJAX=new ActiveXObject("Microsoft.XMLHTTP");
                }                                             
                if (that.AJAX==null) {                             
                  return false;                               
                } else {
                  that.AJAX.onreadystatechange = function() {  
                    if (that.AJAX.readyState==4) {             
                      that.updating=false;                
                      that.callback(that.AJAX.responseText,that.AJAX.status,that.AJAX.responseXML);        
                      that.AJAX=null;                                         
                    }                                                      
                  }                                                        
                  that.updating = new Date();                              
                  if (/post/i.test(postMethod)) {
                    var uri=urlCall+'?'+that.updating.getTime();
                    that.AJAX.open("POST", uri, true);
                    that.AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    that.AJAX.setRequestHeader("Content-Length", passData.length);
                    that.AJAX.send(passData);
                  } else {
                    var uri=urlCall+'?'+passData+'&timestamp='+(that.updating.getTime()); 
                    that.AJAX.open("GET", uri, true);                             
                    that.AJAX.send(null);                                         
                  }              
                  return true;                                             
                }                                                                           
              }
              var urlCall = url;        
              this.callback = callbackFunction || function () { };
            }        
            
            function updateTimer()
            {
                var counter = document.getElementById("counterThingie");
                var str;
                var myRequest = new ajaxObject('time.php');
                myRequest.callback = function(responseText) 
                {
                    if(responseText == "PAUSE")
                        str = "Her kan du indsætte dit billede HTML";
                    else
                      var str = responseText;
                
                    counter.innerHTML = str;  
                }
                myRequest.update();
                
            }
            
            window.onload = function()
            {
                setInterval("updateTimer()", 1000);
            }
            
        </script>
    
    </head>
    <body>
        <span>test</span>
        <div id="counterThingie">Test</div>
    
    
    </body>
</html>
[div]
Avatar billede repox Seniormester
03. oktober 2010 - 19:50 #3
Jeg prøver lige HTML filen igen:
[pre]<DOCTYPE html>
<html>
    <head>
        <title>Count-down thingie</title>
        <script type="text/javascript">
            function ajaxObject(url, callbackFunction) {
              var that=this;     
              this.updating = false;
              this.abort = function() {
                if (that.updating) {
                  that.updating=false;
                  that.AJAX.abort();
                  that.AJAX=null;
                }
              }
              this.update = function(passData,postMethod) {
                if (that.updating) { return false; }
                that.AJAX = null;                         
                if (window.XMLHttpRequest) {             
                  that.AJAX=new XMLHttpRequest();             
                } else {                                 
                  that.AJAX=new ActiveXObject("Microsoft.XMLHTTP");
                }                                           
                if (that.AJAX==null) {                           
                  return false;                             
                } else {
                  that.AJAX.onreadystatechange = function() { 
                    if (that.AJAX.readyState==4) {           
                      that.updating=false;               
                      that.callback(that.AJAX.responseText,that.AJAX.status,that.AJAX.responseXML);       
                      that.AJAX=null;                                       
                    }                                                     
                  }                                                       
                  that.updating = new Date();                             
                  if (/post/i.test(postMethod)) {
                    var uri=urlCall+'?'+that.updating.getTime();
                    that.AJAX.open("POST", uri, true);
                    that.AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    that.AJAX.setRequestHeader("Content-Length", passData.length);
                    that.AJAX.send(passData);
                  } else {
                    var uri=urlCall+'?'+passData+'&timestamp='+(that.updating.getTime());
                    that.AJAX.open("GET", uri, true);                           
                    that.AJAX.send(null);                                       
                  }             
                  return true;                                           
                }                                                                         
              }
              var urlCall = url;       
              this.callback = callbackFunction || function () { };
            }       
           
            function updateTimer()
            {
                var counter = document.getElementById("counterThingie");
                var str;
                var myRequest = new ajaxObject('time.php');
                myRequest.callback = function(responseText)
                {
                    if(responseText == "PAUSE")
                        str = "Her kan du indsætte dit billede HTML";
                    else
                      var str = responseText;
               
                    counter.innerHTML = str; 
                }
                myRequest.update();
               
            }
           
            window.onload = function()
            {
                setInterval("updateTimer()", 1000);
            }
           
        </script>
   
    </head>
    <body>
        <span>test</span>
        <div id="counterThingie">Test</div>
   
   
    </body>
</html>{/pre]
Avatar billede repox Seniormester
03. oktober 2010 - 19:51 #4
ffs...
http://codepad.org/1N4Z5SPl
Avatar billede jkn83 Praktikant
03. oktober 2010 - 21:00 #5
@noltus - det er der da helt sikkert, men var der så også en der opfyldte mine kreterier havde jeg da også valgt den.

@repox - ser lidt overdrevet ud. Fik den testet af hurtigt, den viser countdown til den specifikke tid, 10:15 men den er ikke realtime opdateret hvor du ser sekunderne tælle :/

Muligt det kan rettes ?
Avatar billede repox Seniormester
03. oktober 2010 - 22:23 #6
Det må du uddybe, for det virker fint for mig...
Avatar billede jkn83 Praktikant
04. oktober 2010 - 07:50 #7
Dette er scriptet i funktion.
Man ser den ikke "tælle ned", man skal opdatere for at få tiden der er tilbage. Realtime vil sige liveopdateret uden refresh af side.

http://sk0d.net/tidtest.php
Avatar billede repox Seniormester
04. oktober 2010 - 08:32 #8
Det der står på den side du har sendt er ikke en tekst jeg har skrevet i noget af min kode - så det du viser mig der er ikke min kode.

Til gengæld virker det fint her: http://err0r.dk/test/tidtest.php
Avatar billede jkn83 Praktikant
04. oktober 2010 - 08:46 #9
http://sk0d.net/tidtest.php

er en copy paste af ovenstående kode...
forsøgte med 2 ting da jeg er lidt i tvivl om hvordan den lige skal laves... Den første var at lave en fil med de 2 koder i, i head og body.

Den anden var at lave 2 seperate filer hvor ajax koden var i time.php og php koden i tidtest.php

Kan sagtens se den fungerer på den side du linkede til, men den virker ikke på den anden :/
Avatar billede repox Seniormester
04. oktober 2010 - 08:52 #10
...

Du har jo heller ikke lavet det, som jeg har skrevet?

Du åbner den PHP fil direkte som jeg skrev kildekoden til; det var jo ikke meningen - meningen var at den fil (som du har valgt at kalde tidtest.php) var en modtager fil til et AJAX kald som er angivet i det HTML kode jeg sendte også.
Avatar billede jkn83 Praktikant
04. oktober 2010 - 09:16 #11
Hm, ser ud til den virker nu.
Krævede at jeg lukkede hele browseren og åbnede den igen...

Så ja, den virker super :) Og sorry at jeg ikke lige var helt med på vognen, sidder midt i plan og styr time på bygningskonstruktør linien på en mandag morgen... Men smukt :D

smider du svar ?
Avatar billede showsource Seniormester
04. oktober 2010 - 09:27 #12
Et andet forslag:


<?php

$tidspunkt = "10:15:00";
$nu = time();
$today = strtotime(date("Y-m-d ".$tidspunkt));
$next = ($today+86400);

$seconds = ($today > $nu ? ($today-$nu) : ($next-$nu));

?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Js/php countdown</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">

.tid {
    font-family: arial, verdana;
    font-size: 0.9em;
    }

.myimage {
    width: 160px;
    height: 230px;;
        }

</style>

<script type="text/javascript">

function countd(allseconds) {

var img = 'image_2.jpg';
var timediv = document.getElementById('timetext');

var oneM = 60;
var oneH = (60*60);

var Htime = Math.floor(allseconds/oneH);
var Mtime = Math.floor((allseconds-(Htime*oneH))/oneM);
var Stime = Math.floor(allseconds-(Htime*oneH)-(Mtime*oneM));

timediv.firstChild.nodeValue=(Htime<10?'0'+Htime:Htime)+' ti '+(Mtime<10?'0'+Mtime:Mtime)+' mi '+(Stime<10?'0'+Stime:Stime)+' se';


    if(allseconds){

        setTimeout('countd('+(allseconds-1)+');',1000);

    }else{

        timediv.firstChild.nodeValue='';

        var newElement=document.createElement('img');
        newElement.setAttribute('src',img);
        newElement.setAttribute('class','myimage');
        timediv.appendChild(newElement);

    }

}

</script>

</head>

<body>


<div class="tid" id="timetext">&nbsp;</div>

<script type="text/javascript">
countd(<?php echo $seconds; ?>);
</script>

</body></html>
Avatar billede jkn83 Praktikant
04. oktober 2010 - 09:37 #13
showsource, tester lige scriptet lidt senere når muligheden viser sig :)
Avatar billede wanze Nybegynder
04. oktober 2010 - 12:37 #14
Du burde i hvert fald fokusere på at showsources løsning, da rep0x's løsning generer en masse unødvendig trafik.
Avatar billede repox Seniormester
04. oktober 2010 - 12:42 #15
Ganske enig - min løsning lægger op til en AJAX baseret trafik, som kan undgås med showsource's løsning.
Avatar billede jkn83 Praktikant
04. oktober 2010 - 14:07 #16
ok, men hvis begge virker vil jeg nu engang mene at begge skal have point. Repox, hvis du kan smide svar her, så kan showsource smide svar på http://www.eksperten.dk/spm/920157 da det er samme spørgsmål, bare i javascript sektionen :) Så bliver alle glade :D
Avatar billede repox Seniormester
04. oktober 2010 - 14:12 #17
Jamen, jeg er da under alle omstændigheder villig til at dele hvis showsource er. :)
Avatar billede jkn83 Praktikant
04. oktober 2010 - 15:11 #18
jamen der er jo 200 point til hver af jer da begge løsninger kan bruges, og nok ikke kun i mit tilfælde :)
Avatar billede showsource Seniormester
04. oktober 2010 - 18:06 #19
Det var sgu noget bøvlet, at putte en "tid" ind i scriptet, hvor den kun viser et billede. ( tror den er der ? )

Og den tid som browser er om at loade siden er der ikke taget højde for.

B.t.w. siger reglerne her på siden, at man IKKE kan splitte et spm. op i flere og på den måde tildele over 200 point !!!!!

Og man kan jo hverken få øl, mad eller tobak for point :O(

<?php
// billede som skal vises. F.eks. /images/image_2.jpg"
$image = "image_2.jpg";

// tidspunkt på dagen der tælles ned til
$tidspunkt = "18:30:00";

// sekunder fra $tidspunkt hvor der blot skal vises et billede
$pause = 15;


$nu = time();
$today = strtotime(date("Y-m-d ".$tidspunkt));
$addtime = ($today+$pause);

$next = ($today+86400);

$seconds = ($nu >= $addtime ? ($next-$nu) : ($nu > $today && $nu < $addtime ? 0 : ($today-$nu)));

?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Js/php countdown</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">

.tid {
    font-family: arial, verdana;
    font-size: 0.9em;
    }

.myimage {
    width: 160px;
    height: 230px;;
        }

</style>

<script type="text/javascript">

function countd(allseconds) {

var myimg = '<?php echo $image; ?>';
var timediv = document.getElementById('timetext');

var oneM = 60;
var oneH = (60*60);

    if(timediv) {
    var Htime = Math.floor(allseconds/oneH);
    var Mtime = Math.floor((allseconds-(Htime*oneH))/oneM);
var Stime = Math.floor(allseconds-(Htime*oneH)-(Mtime*oneM));

timediv.firstChild.nodeValue=(Htime<10?'0'+Htime:Htime)+' ti '+(Mtime<10?'0'+Mtime:Mtime)+' mi '+(Stime<10?'0'+Stime:Stime)+' se';


        if(allseconds){

        setTimeout('countd('+(allseconds-1)+');',1000);

        }else{

        timediv.firstChild.nodeValue='';

        var newElement=document.createElement('img');
        newElement.setAttribute('src',myimg);
        newElement.setAttribute('class','myimage');
        timediv.appendChild(newElement);
        restart(<?php echo $pause; ?>);

        }

    }else{

    return false;

    }

}

function restart(tid) {

    if(tid) {
    setTimeout('restart('+(tid-1)+');',1000);
    }else{
    return location.reload(true);
    }
}

</script>

</head>

<body>

<div class="tid" id="timetext">&nbsp;</div>

<script type="text/javascript">
countd(<?php echo $seconds; ?>);
</script>

</body></html>
Avatar billede showsource Seniormester
07. oktober 2010 - 11:57 #20
Ehh, det med pause, i stedet for
restart(<?php echo $pause; ?>);

skal det jo være
restart(<?php echo ($addtime-$nu); ?>);
Avatar billede jkn83 Praktikant
07. oktober 2010 - 12:26 #21
super :D
Får lige sat script op senere til test.
Dagens program er lidt booket i forvejen.
Avatar billede showsource Seniormester
07. oktober 2010 - 13:34 #22
Nåh, jeg synes godt nok jeg får rodet rundt !

Nu ser det så'n her ud:

<?php
// billede som skal vises. F.eks. /images/image_2.jpg"
$image = "image_2.jpg";

// tidspunkt på dagen der tælles ned til
$tidspunkt = "13:30:00";

// sekunder fra $tidspunkt hvor der blot skal vises et billede
$pause = 60;

$nu = time();
$today = strtotime(date("Y-m-d ".$tidspunkt));
$addtime = ($today+$pause);

$next = ($today+86400);

$seconds = ($nu >= $addtime ? ($next-$nu) : ($nu > $today && $nu < $addtime ? 0 : ($today-$nu)));

$p_seconds = ($addtime-$nu);
$restart = ($p_seconds >= 0 && $p_seconds <= $pause ? $p_seconds : $pause);

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head><title>Js/php countdown</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">

.tid {
    font-family: arial, verdana;
    font-size: 0.9em;
    }

.myimage {
    width: 160px;
    height: 230px;;
        }

</style>

<script type="text/javascript">

function countd(allseconds) {

var myimg = '<?php echo $image; ?>';
var timediv = document.getElementById('timetext');

    if(timediv) {
    var oneM = 60;
    var oneH = (60*60);
    var Htime = Math.floor(allseconds/oneH);
    var Mtime = Math.floor((allseconds-(Htime*oneH))/oneM);
    var Stime = Math.floor(allseconds-(Htime*oneH)-(Mtime*oneM));

    timediv.firstChild.nodeValue=(Htime<10?'0'+Htime:Htime)+' ti '+(Mtime<10?'0'+Mtime:Mtime)+' mi '+(Stime<10?'0'+Stime:Stime)+' se';

        if(allseconds){

        setTimeout('countd('+(allseconds-1)+');',1000);

        }else{

        timediv.firstChild.nodeValue='';

        var newElement=document.createElement('img');
        newElement.setAttribute('src',myimg);
        newElement.setAttribute('class','myimage');
        timediv.appendChild(newElement);
        restart(<?php echo $restart; ?>);

        }

    }else{

    return false;

    }

}

function restart(tid) {

    if(tid) {
    setTimeout('restart('+(tid-1)+');',1000);
    }else{
    return location.reload(true);
    }
}

</script>

</head>

<body>

<div class="tid" id="timetext">&nbsp;</div>

<script type="text/javascript">
countd(<?php echo $seconds; ?>);
</script>

</body></html>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra PHP kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjemmeside der virker både på mobil og computer Af Strawberry i PHP 4 25/01/202620:06 25/01/202621:45
Hvordan får jeg reCAPTCHA på min hjemmeside? Af Strawberry i PHP 1 20/01/202621:11 23/01/202618:04
MS Graph vis kalenderaftaler Af dane022 i PHP 0 06/11/202508:43 -
Hente data fra DEVICE via websocket Af nemlig i PHP 6 25/06/202512:37 25/06/202519:17
Login og redirect Af hrole i PHP 3 24/06/202518:52 24/06/202523:37
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 13:59 2 skærme til en stationær computer Af BIRGER i Skærme
I går 19:26 Opstart af ny computer Af Bent i Windows
25/0120:06 Hjemmeside der virker både på mobil og computer Af Strawberry i PHP
25/0117:08 Problemer med borger.dk Af valby i Windows
25/0114:19 Fejl Af buls i Windows
White papers
Flere white papers »