Last active
May 1, 2022 02:53
-
-
Save magkopian/7a97ff98c3cafe14972e to your computer and use it in GitHub Desktop.
A simple JavaScript clock that automaticly syncs time using AJAX - Client (Server: https://gist.github.com/magkopian/f0724fa7faa629d302db)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Simple Ajax Clock</title> | |
| <style type="text/css"> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #wrapper { | |
| width: 100%; | |
| } | |
| #clock { | |
| width: 50%; | |
| min-height: 100px; | |
| margin: 50px auto; | |
| text-align: center; | |
| font-size: 85px; | |
| } | |
| </style> | |
| <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> | |
| <script type="text/javascript"> | |
| var start_time; | |
| var current_time; | |
| //gets current server time | |
| var get_time = function () { | |
| $.ajax({ | |
| type: 'GET', | |
| url: 'clock.php', | |
| data: ({ action : 'get_time' }), | |
| success: (function (data) { | |
| start_time = new Date( | |
| data.year, | |
| data.month, | |
| data.day, | |
| data.hour, | |
| data.minute, | |
| data.second | |
| ); | |
| $('#clock').html(current_time.toLocaleTimeString()); | |
| }), | |
| dataType: 'json' | |
| }); | |
| } | |
| //counts 0.25s | |
| var cnt_time = function () { | |
| current_time = new Date(start_time.getTime() + 250); | |
| $('#clock').html(current_time.toLocaleTimeString()); | |
| start_time = current_time; | |
| } | |
| setInterval(cnt_time, 250); //add 250ms to current time every 250ms | |
| setInterval(get_time, 30250); //sync with server every 30,25 second | |
| get_time(); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="wrapper"> | |
| <div id="clock"></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment