Jump to content
Welcome, Guest
Existing user? Sign In

Sign In



Sign Up
The MatriX
  • Welcome To Ghbsys
  • CS GO Streaming Version is released. Have fun streaming while cheating!
  • Have a Payment Issue? Send us a Support ticket.
  • Make a thread if you need support or join our discord for live support.
  • Have Suggestions? Make a thread and you'll earn Ghbsys Points for implemented suggestions.
  • Join our discord to stay well connected! Don't forget to integrate your discord to the site

  • Welcome to [GHB] - GAmEhAcKbAsTaRdS Forum

    Welcome to [GHB] - GAmEhAcKbAsTaRdS Forum, like most online communities you must register to view or post in our community, but don't worry this is a simple free process that requires minimal information for you to signup. Be apart of [GHB] - GAmEhAcKbAsTaRdS Forum by signing in or creating an account.
    • Start new topics and reply to others
    • Subscribe to topics and forums to get email updates
    • Get your own profile page and make new friends
    • Send personal messages to other members.

    Guest Message by DevFuse

    Tutorial: Live Clock (Counting clock :D) [AJAX/XML/PHP/JAVASCRIPT]

    House

    By House,
    in Web and Scripting

     Share

    Recommended Posts

    House

    House 3

    Posted
    Posted (edited)

     

    REMEMBER: This is not the best method for a live-clock on your site. Every second it calls a PHP script which then echoes the time. Imagine this would happen when you have 1000 visitors at one, then you got 1000*5KB traffic per SECOND (5MB traffic per second, o.U)

     

    So fur educational purposes only, like making a shoutbox (you can learn how it refreshs something O.o )

     

    To retrieve the server time, we can use our date() function, in which we put parameters to change the format of time.

    In this case:

     

    <?php echo date("D, d-m-Y, H:i:s"); ?>

     

    Call this file clock.php

    Now it gives out the servertime + date everytime we load it xD

     

    Next:

     

    We try to retrieve this clock every second again, by using AJAX. AJAX stands for:

     

    Asynchronous Javascript And XML

     

    Which means in laymans terms: An asynchronous script, that runs independant of the script where it is put into ;)

     

    In your <head> section of the site, put this:

     

    <script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript"> new Ajax.PeriodicalUpdater('clock', 'clock.php', {   method: 'get',   frequency: 1 });</script>

     

    In the part where you want the clock, put:

     

    <div id="clock"></div>

     

    Okay, so far so good.

    Now you just need to have a little javascript framework (prototype.js) you can download it here.

    Put it in the folder "js" in the same directory as your script (or there where your head javascript wants to load it from)

     

    Now your clock should work, but very inefficient. ONLY FOR EDUCATIONAL PURPOSES, DON'T USE IT ON SITES WITH MANY VISITORS!

     

     

     

     

     

    Bedenke: Dies ist nicht die beste Methode fuer eine live-uhr auf deiner Webseite. Jede Sekunde wird es ein PHP-Script aufrufen, was fuer immensen Traffic sorgen wird.

    Also nur gedacht fuer lernzwecke^^

     

     

    Um die Serverzeit aufzurufen, benutzen wir unsere date() funktion, wo wir unsere parameter zur gewuenschten formatwiedergabe reinschreiben.

    In diesem Fall:

     

    <?php echo date("D, d-m-Y, H:i:s"); ?>

     

    Speichere diese Datei ab als: clock.php

    Sie wird die Serverzeit ausgeben.

     

    Weiter:

     

    Wir werden nun dafuer sorgen, das diese Uhr jede Sekunde neu aufgerufen wird. Dies werden wir realisieren mit AJAX. AJAX steht fuer:

     

    Asynchronous Javascript And XML

     

    Was in Laiensprache bedeutet: Ein asynchrones script (Das asynchron also unabhaengig vom Script wo es drin steht arbeiten kann)

     

    In den <head> Teil deiner Seite schreibst du folgendes:

     

    <script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript"> new Ajax.PeriodicalUpdater('clock', 'clock.php', {   method: 'get',   frequency: 1 });</script>

     

    In den Teil wo wir die Uhr haben wollen, dies:

     

    <div id="clock"></div>

     

    So weit, so gut.

    Nun benoetigen wir nur ein kleines Plugin, ein Framework das dafuer sorgt das alles gut ablaeuft. Hier herunterladen.

    Nenne es prototype.js und stecke es in den Ordner "js" oder einen anderen wo der <head> teil es herholen moechte.

     

    So, deine Uhr ist nun fertig ;) Viel Spass damit!

    Edited by Mastermind Joe™
    Link to comment
    Share on other sites
    meijör

    meijör 7

    Posted
    Posted

    Wenn ich mich nicht irre braucht date() noch nen timestamp also date(STRINGTYPE,TIMESTAMP);

    Aber evtl nimmt die funktion bei nichteingabe eifnach time() O.o

     

    kb nachzuguckn xD

    Link to comment
    Share on other sites
    House

    House 3

    Posted
    • Author
    Posted

    Der nimmt einfach den aktuellen Timestamp xD

    schon cool das man das date holen kann von nem anderen Timestamp O.o

    Link to comment
    Share on other sites
    Kvn'X

    Kvn'X 222

    Posted
    Posted

    nice O.o

    Link to comment
    Share on other sites
    • 1 month later...
    Sayuta

    Sayuta 0

    Posted
    Posted (edited)

    index.php

    <html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var refreshId = setInterval(function()
{
 $('#time').load('time.php');
}, 1000);
</script>
<title>Clock</title>
</head>
<body>
<div id="time"><? include('time.php'); ?></div>
</body>
</html>

     

    time.php

    <?
echo date('D-M-20y H:i:s',time());
?>

     

    This seems alot easier? :$

    Jquery(Ajax/javascript) and PHP (and HMTL, but standardddd)

    Edited by Sayuta
    Link to comment
    Share on other sites
    • 1 month later...
    NeoIII

    NeoIII 5137

    Posted
    Posted
    <script type="text/javascript">

    var currenttime = '<? print date("F d, Y H:i:s", time())?>' //PHP method of getting server date

    var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")

    var serverdate=new Date(currenttime)

     

    function padlength(what){

    var output=(what.toString().length==1)? "0"+what : what

    return output

    }

    function displaytime(){

    serverdate.setSeconds(serverdate.getSeconds()+1)

    var datestring=montharray[serverdate.getMonth()]+" "+padlength(serverdate.getDate())+", "+serverdate.getFullYear()

    var timestring=padlength(serverdate.getHours())+":"+padlength(serverdate.getMinutes())+":"+padlength(serverdate.getSeconds())

    document.getElementById("servertime").innerHTML=datestring+" "+timestring

    }

    window.onload=function(){

    setInterval("displaytime()", 1000)

    }

    </script>

    <span id="servertime">Loading...</span>

     

    O.o

    Link to comment
    Share on other sites
    Guest
    This topic is now closed to further replies.
     Share
    Go to topic listing

    • Recently Browsing   0 members

      • No registered users viewing this page.
    ×
    ×
    • Create New...