php Question posted in
Official manual can be found here.

is it possible to print a string on each iteration of a loop in php without using js or ajax?

my teacher told me to create a countdown timer with php that if you give it three inputs in html (hours,minutes,seconds) it will count down the numbers and show the remaining time in real time . like the timer in your phone . he told me to only use html, css and php . no js or ajax is allowed . with JAVA language i can do it but php is scripting language and shows the results after all the code is executed .

At first I thought the sleep() funtion is the answer but it’s script language .

Tags:

2

Answers


  1. 0

    This should work:

    countdown.php

    <?php

$counter = max((int)($_GET['counter'] ?? 0), 0);

echo $counter--;

if ($counter >= 0) {
    header("Refresh: 1;url='?counter=$counter'");
}

    and you can run it using: http://yoursite/countdown.php?counter=5

    The trick is the header which tells the browser to load the specefied page after the given seconds – here set to 1

    By setting only the parameter instead of the complete URL, the browser calls the current script with the indicated parameter

    The current value of the counter is passed to the script via the counter GET parameter which is decremented at each step until 0

    The first line of code sets the $counter variable with the $_GET parameter if this is a valid positive number or 0 otherwise

    Here the documentation about the header ‘refresh’

    Login or Signup to reply.
  2. 0

    You can use CSS animation and change the content of the elements as you want. Here is an example for counting down the seconds in HTML and CSS. You can use PHP to generate the content easily.

    <style>
    .seconds {
        position: relative;
        color: red;
        font-size: 2rem;
        font-family: monospace;
        width: 3rem;
        height: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .seconds::before {
        content: "59";
        animation: secondsCountDown 60s infinite;
    }

    @keyframes secondsCountDown {
       0% { content: "59"; }
       1.6667% { content: "58"; }
       3.3333% { content: "57"; }
       5% { content: "56"; }
       6.6667% { content: "55"; }
       8.3333% { content: "54"; }
       10% { content: "53"; }
       11.6667% { content: "52"; }
       13.3333% { content: "51"; }
       15% { content: "50"; }
       16.6667% { content: "49"; }
       18.3333% { content: "48"; }
       20% { content: "47"; }
       21.6667% { content: "46"; }
       23.3333% { content: "45"; }
       25% { content: "44"; }
       26.6667% { content: "43"; }
       28.3333% { content: "42"; }
       30% { content: "41"; }
       31.6667% { content: "40"; }
       33.3333% { content: "39"; }
       35% { content: "38"; }
       36.6667% { content: "37"; }
       38.3333% { content: "36"; }
       40% { content: "35"; }
       41.6667% { content: "34"; }
       43.3333% { content: "33"; }
       45% { content: "32"; }
       46.6667% { content: "31"; }
       48.3333% { content: "30"; }
       50% { content: "29"; }
       51.6667% { content: "28"; }
       53.3333% { content: "27"; }
       55% { content: "26"; }
       56.6667% { content: "25"; }
       58.3333% { content: "24"; }
       60% { content: "23"; }
       61.6667% { content: "22"; }
       63.3333% { content: "21"; }
       65% { content: "20"; }
       66.6667% { content: "19"; }
       68.3333% { content: "18"; }
       70% { content: "17"; }
       71.6667% { content: "16"; }
       73.3333% { content: "15"; }
       75% { content: "14"; }
       76.6667% { content: "13"; }
       78.3333% { content: "12"; }
       80% { content: "11"; }
       81.6667% { content: "10"; }
       83.3333% { content: "9"; }
       85% { content: "8"; }
       86.6667% { content: "7"; }
       88.3333% { content: "6"; }
       90% { content: "5"; }
       91.6667% { content: "4"; }
       93.3333% { content: "3"; }
       95% { content: "2"; }
       96.6667% { content: "1"; }
       98.3333% { content: "0"; }
       100% { content: "59"; }
    }
</style>

<div class="clock">
    <p class="hour"></p>
    <span>:</span>
    <p class="minute"></p>
    <span>:</span>
    <p class="seconds"></p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search