www.webdeveloper.com
Results 1 to 9 of 9

Thread: JS timer running for 90m

  1. #1
    Join Date
    Oct 2013
    Posts
    10

    JS timer running for 90m

    Hello,
    I want to insert a clock to my website that runs automatically for 90 minutes (for soccer matches).
    The clock doesn't need to be divided to hours, minutes, seconds and etc. , only show the current minute.
    For example:
    Barcelona vs Real Madrid
    current minute: 73
    score: 1-0

    Thanks.

  2. #2
    Join Date
    Jun 2008
    Posts
    106
    Ok, good luck making it.

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,270
    Here is, a php file to run on a server. It is only a prototype to show some principles...
    Code:
    <?php
        // Save the match datas
        
        if (!empty($_POST)) {
            // foreach( $_POST as $k=>$v) echo "$k => $v<br>";
            $mtcNme=htmlspecialchars(str_replace(' ','_',trim($_POST["matchName"])));
            $mtcTme=htmlspecialchars(preg_replace("`[^0-9]`",'',trim($_POST["strTime"])));
            file_put_contents("matchfile".$mtcNme.".txt",$mtcTme);}
        
        // Read the match data files 
        $mtc=array(); 
        if ($hnd=opendir('./')){
            while (false!==($fle = readdir($hnd))) if ($fle!='.' && $fle!='..' && substr($fle,0,9)=="matchfile"){
                 $mtc[]=$fle;
               // echo "$fle<br>";
           }
            closedir($hnd);
        }
        $strTme='';$strMatch='';
        foreach($mtc as $k=>$v) {//echo "$k $v<br>";
            $strMatch.=substr($v,9,strlen($v)-13).'<br>Currrent minute : <span id="tme'.$k.'"></span><br><br>';
            $cnt=file_get_contents($v);
            $strTme.=','.$cnt;
        }
        $strTme='['.substr($strTme,1).']';
        if (empty($strMatch)) $strMatch='No match in progress !';
    
     
    ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title></title>
    <style type="text/css">
    html,body {font-family:Garamond;font-variant:small-caps;background-color:#ccc}
    #frm {display:block;width:300px;margin:0 auto;padding:7px;background-color:#fc6}
    #frm p{font-size:small;}
    .npt {display:block;width:180px;}
    .rgh {display:block;float:right}
    #rsp {display:block;width:300px;margin:0 auto;padding:7px;background-color:#fff}
    </style>
    </head>
    <body>
    <form id="frm" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST"><fieldset><legend>The management page</legend>
        <p>Start time</p>
       <p>Fill this form with the name of the match and click on this button at its beginning !<br><br>
       <input type="hidden" name="strTime" id="strTime" value="">
        <input class="npt" name="matchName" type="text" value="Barcelone vs Real Madrid"><input class="rgh" type="submit" value="Go !" onclick="return saveTime()"></p>
    </fieldset></form>
    <div id="rsp"><fieldset><legend>User's page</legend>
        <p>During the match</p></label>
        <p><?php echo $strMatch ?></p>
    </fieldset></form> 
    <script type="text/javascript">
    function saveTime(){
        document.getElementById('strTime').value=new Date().valueOf();
        return true;
    }
    var arrTme=<?php echo $strTme ?>;
    function displayMinutes(){var i,scn,mnt;    
        now=new Date().valueOf();
        for (var i=0;i<arrTme.length;i++) {
           scn=Math.round((now-arrTme[i])/1000);
           mnt=Math.round(scn/60);
           scn%=60;
            document.getElementById('tme'+i).innerHTML=(mnt<10?'0'+mnt:mnt)+':'+(scn<10?'0'+scn:scn);}
        setTimeout(displayMinutes,1000);    
    }
    if (arrTme.lenght!=0) displayMinutes()
    </script>
    </body>
    </html>
    But many progress are to made (I only display the seconds for short tests) ...
    Good luck to enter (and update if necessary) the scores, half-times, added times and other extra times...
    Last edited by 007Julien; 10-06-2013 at 05:15 PM. Reason: minor changes

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,270
    Errata : Replace the line mnt=Math.round(scn/60) by mnt=Math.floor(scn/60);

    The first work to do is to erase the match files at the end of the match !
    A full system could store not only a start time but many datas with objects and the use of Ajax and JSON...

  5. #5
    Join Date
    Oct 2013
    Posts
    10
    Quote Originally Posted by 007Julien View Post
    Here is, a php file to run on a server. It is only a prototype to show some principles...
    Code:
    <?php
        // Save the match datas
        
        if (!empty($_POST)) {
            // foreach( $_POST as $k=>$v) echo "$k => $v<br>";
            $mtcNme=htmlspecialchars(str_replace(' ','_',trim($_POST["matchName"])));
            $mtcTme=htmlspecialchars(preg_replace("`[^0-9]`",'',trim($_POST["strTime"])));
            file_put_contents("matchfile".$mtcNme.".txt",$mtcTme);}
        
        // Read the match data files 
        $mtc=array(); 
        if ($hnd=opendir('./')){
            while (false!==($fle = readdir($hnd))) if ($fle!='.' && $fle!='..' && substr($fle,0,9)=="matchfile"){
                 $mtc[]=$fle;
               // echo "$fle<br>";
           }
            closedir($hnd);
        }
        $strTme='';$strMatch='';
        foreach($mtc as $k=>$v) {//echo "$k $v<br>";
            $strMatch.=substr($v,9,strlen($v)-13).'<br>Currrent minute : <span id="tme'.$k.'"></span><br><br>';
            $cnt=file_get_contents($v);
            $strTme.=','.$cnt;
        }
        $strTme='['.substr($strTme,1).']';
        if (empty($strMatch)) $strMatch='No match in progress !';
    
     
    ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title></title>
    <style type="text/css">
    html,body {font-family:Garamond;font-variant:small-caps;background-color:#ccc}
    #frm {display:block;width:300px;margin:0 auto;padding:7px;background-color:#fc6}
    #frm p{font-size:small;}
    .npt {display:block;width:180px;}
    .rgh {display:block;float:right}
    #rsp {display:block;width:300px;margin:0 auto;padding:7px;background-color:#fff}
    </style>
    </head>
    <body>
    <form id="frm" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST"><fieldset><legend>The management page</legend>
        <p>Start time</p>
       <p>Fill this form with the name of the match and click on this button at its beginning !<br><br>
       <input type="hidden" name="strTime" id="strTime" value="">
        <input class="npt" name="matchName" type="text" value="Barcelone vs Real Madrid"><input class="rgh" type="submit" value="Go !" onclick="return saveTime()"></p>
    </fieldset></form>
    <div id="rsp"><fieldset><legend>User's page</legend>
        <p>During the match</p></label>
        <p><?php echo $strMatch ?></p>
    </fieldset></form> 
    <script type="text/javascript">
    function saveTime(){
        document.getElementById('strTime').value=new Date().valueOf();
        return true;
    }
    var arrTme=<?php echo $strTme ?>;
    function displayMinutes(){var i,scn,mnt;    
        now=new Date().valueOf();
        for (var i=0;i<arrTme.length;i++) {
           scn=Math.round((now-arrTme[i])/1000);
           mnt=Math.round(scn/60);
           scn%=60;
            document.getElementById('tme'+i).innerHTML=(mnt<10?'0'+mnt:mnt)+':'+(scn<10?'0'+scn:scn);}
        setTimeout(displayMinutes,1000);    
    }
    if (arrTme.lenght!=0) displayMinutes()
    </script>
    </body>
    </html>
    But many progress are to made (I only display the seconds for short tests) ...
    Good luck to enter (and update if necessary) the scores, half-times, added times and other extra times...
    First, Thanks a lot!
    I didn't understand a single word of what you wrote (I don't know PHP).
    I ran the code in NOTEPAD++ and half of the PHP code is in the head of the page.
    I guess it's not supposed to be like that. Also, you made a table, but the table doesn't show the time.

    Again, thanks a lot, I really appreciate this help.

  6. #6
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    A question, because based on how you asked the question initially and how 007Julien answered it has me confused a little...
    Does the timer need to start from 0, until 90 minutes when you open the webpage no matter what. (in other words, it's not tied into anything) Or does the timer need to be "resumed" at a certain point based on information stored somewhere, like a database. Let's say a match started 10 minutes before you opened the website, does it need to show 10 minutes have already passed?

  7. #7
    Join Date
    Oct 2013
    Posts
    10
    Quote Originally Posted by bionoid View Post
    A question, because based on how you asked the question initially and how 007Julien answered it has me confused a little...
    Does the timer need to start from 0, until 90 minutes when you open the webpage no matter what. (in other words, it's not tied into anything) Or does the timer need to be "resumed" at a certain point based on information stored somewhere, like a database. Let's say a match started 10 minutes before you opened the website, does it need to show 10 minutes have already passed?
    Umm, actually yes.
    It's online scores website, so if the game started before 10 minutes like you said, it does need to show that example:

    Barcelona - Real Madrid
    current minute: 10
    score: 0-0
    ----------------------------------------------------------------------------------------------------
    actually, like database. I know that JS doesn't can't to store data like PHP / MySQL can, only "immediately" info (getElementById) and don't like PHP/MySQL can (database). fix me if i'm wrong.

  8. #8
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,270
    You need a server to run the proposed code ! Download an install one EasyPhp, MAMP or XAMP on your PC or Mac (or simply on a USB flash drive - It'is possible on a PC with EasyPhp).

    Then place the PHP file in the root (www) and run it on your local server. The PHP will run on the server to build the HTML page...

  9. #9
    Join Date
    Oct 2013
    Posts
    10
    Quote Originally Posted by 007Julien View Post
    You need a server to run the proposed code ! Download an install one EasyPhp, MAMP or XAMP on your PC or Mac (or simply on a USB flash drive - It'is possible on a PC with EasyPhp).

    Then place the PHP file in the root (www) and run it on your local server. The PHP will run on the server to build the HTML page...
    Thanks! I downloaded the EasyPHP, I copied the code and pasted in the window, It works.
    I really appreciate that. Thanks Thanks Thanks!
    Can I give you a feedback? There's a option in this website that allow to give feedback?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles