18. september 2018 - 09:41 Der er 4 kommentarer

Timer event flytter til ny kolonne:

HEJ,

I en Tabel med 24 kolonner og 8 rækker ( klokke fra 00:00- 23:00, MAN-SØN-dag og en overskrift) har jeg brug for en metode, hvor programmet, når klokken skifter fra xx:59 -> xx+1:00 (eks. 12:59 --> 13.00), automatisk flytter
focus fra kolonne 12:00-13:00  til kolonne 13:00-14:00. (Når klokken skifter fra kolonne 23:00-24:00  (sidste kolonne), skal den skifte til kolonne (00:00 - 01:00), som vil være fysisk kolonne 0.

Jeg ved at jeg kan bruge    "setTimeout(myFunction, 3600) som vil trigge et script een gang i timen og lade det styre samme kolonne fly

<script>
var d = new Date();
if (d.getMinutes() == 00 )
{
do something: (flyt til næste kolonne.. ) 
}
(syntaksen er sandsynlivis forkert her..)

Men hvordan gør jeg det rent kode-mæssigt.

Kristian



/
Avatar billede Rune1983 Ekspert
18. september 2018 - 13:42 #1
Prøv se om eksempel nedenfor er lidt ala hvad du søger.

PHP og Javascript

<?php
        $AntalKolonner = 24;
        $AntalRaekker = 7;
       
        $Dag = date("N"); // 1 = Mandag, 7 = Søndag
        $Timer = date("H");
        $Minutter = date("i");
        $Sekunder = date("s");
        ?>
        <div style="width: 100%;">
            <table border="1" cellpadding="3" style="text-align: center; font-size: 12px;">
                <tr>
                    <?php
                    for ($u=1; $u <= $AntalKolonner; $u++) {
                        ?>
                        <td style="width: 45px;"><?php print $u-1; ?>-<?php print $u; ?></td>
                        <?php
                    }
                    ?>
                </tr>
                <?php
                for ($i=1; $i <= $AntalRaekker; $i++) {
                    ?>
                    <tr>
                        <?php
                        for ($u=1; $u <= $AntalKolonner; $u++) {
                            $idTD = $u-1;
                            if($Timer == ($u-1) AND $Dag == $i){
                                $tdVaerdi = ((60 - $Minutter) * 60) + $Sekunder;
                            }else{
                                $tdVaerdi = 0;
                            }
                            ?>
                            <td id="<?php print "id$i$idTD"; ?>"><?php print $tdVaerdi; ?></td>
                            <?php
                        }
                        ?>
                    </tr>
                    <?php
                }
                ?>
            </table>
        </div>
        <script>
            var antalRows = 0;
            var antalTimer = 0;
           
            antalRows = <?php print $Dag; ?>;
            antalTimer = <?php print $Timer; ?>;
           
            function CountDown(){
                var idTD = "id";
               
                idTD = idTD.concat(antalRows);
                idTD = idTD.concat(antalTimer);
                var CountTimer = document.getElementById(idTD).innerHTML;
                var CountTimerInt = parseInt(CountTimer);
                CountTimerInt = CountTimerInt - 1;
               
                if(CountTimerInt == 0){
                    document.getElementById(idTD).innerHTML = CountTimerInt;
                    antalTimer++;
                   
                    if(antalTimer > 23){
                        antalTimer = 0;
                        antalRows++;
                    }
                   
                    idTD = "id";
                    idTD = idTD.concat(antalRows);
                    idTD = idTD.concat(antalTimer);
                    document.getElementById(idTD).innerHTML = 3600;
                    /////////////////////
                    // Fokus kan så sættes ind her.
                    /////////////////////
                } else {
                    document.getElementById(idTD).innerHTML = CountTimerInt;
                }
               
                setTimeout(CountDown, 1000);
            }
            CountDown();
        </script>
Avatar billede Rune1983 Ekspert
18. september 2018 - 13:44 #2
Havde glemt at tage højde for hoppet fra søndag til mandag. Så script kommer lige igen.

<script>
            var antalRows = 0;
            var antalTimer = 0;
           
            antalRows = <?php print $Dag; ?>;
            antalTimer = <?php print $Timer; ?>;
           
            function CountDown(){
                var idTD = "id";
               
                idTD = idTD.concat(antalRows);
                idTD = idTD.concat(antalTimer);
                var CountTimer = document.getElementById(idTD).innerHTML;
                var CountTimerInt = parseInt(CountTimer);
                CountTimerInt = CountTimerInt - 1;
               
                if(CountTimerInt == 0){
                    document.getElementById(idTD).innerHTML = CountTimerInt;
                    antalTimer++;
                   
                    if(antalTimer > 23){
                        antalTimer = 0;
                        antalRows++;
                        if(antalRows > 7){
                            antalRows = 1;
                        }
                    }
                   
                    idTD = "id";
                    idTD = idTD.concat(antalRows);
                    idTD = idTD.concat(antalTimer);
                    document.getElementById(idTD).innerHTML = 3600;
                    /////////////////////
                    // Fokus kan så sættes ind her.
                    /////////////////////
                } else {
                    document.getElementById(idTD).innerHTML = CountTimerInt;
                }
               
                setTimeout(CountDown, 1000);
            }
            CountDown();
        </script>
19. september 2018 - 19:58 #3
Hej, har set lidt på din kode.

Umiddelbart  kan den desværre ikke buges, da felterne skal have en vidde/bredde på min 120px og da vil tabellen alligevel være langt ude til højre.  Men mange af de "gimmics" du har på den skitserede løsning er interessante, så de er taget til seriøs overvejelse om brug i den HTML-side (læs: MEGET STOR sandsynlighed for brug) , som skal indeholde denne form.  Har søgt på mange JavaScript sider (inkl. Jquery)  for at finde om den horizontale scrollbar lader sig trinløst styre under programkontrol, men det er ikke lykkedes mig at finde noget herom.

Så nu "strikker" jeg en side sammen med PHP, javaScript og  CSS  og må gå i tænkeboks over hvordan jeg løser problemet med de 24 (25 med dagsfeltet) klokke-søjler så de fremstår som det naturligste i verden..  Det bliver nok JavaScript (kombineret med AJAX -funktioner).

Men under alle omstændigheder skal du have en stor tak for dit initiativ. Og som sagt jeg vil bruge noget (læs: ret meget) af din kode for at få den op og køre.

Tak for hjælpen..

Kristian
Avatar billede Rune1983 Ekspert
20. september 2018 - 07:13 #4
Velbekomme
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester