Last active
December 18, 2015 13:59
-
-
Save brendanc/5794169 to your computer and use it in GitHub Desktop.
Example of how to time track multiple runners with ajax posting to a url in the background.
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 PUBLIC "-//W3C//DTD HTML 4.01//EN" | |
| "http://www.w3.org/TR/html4/strict.dtd"> | |
| <html lang="en"> | |
| <head> | |
| <title>Option A</title> | |
| <style type="text/css"> | |
| .button { | |
| -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0; | |
| -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0; | |
| box-shadow:rgba(0,0,0,0.2) 0 1px 0 0; | |
| color:#333; | |
| border-radius:5px; | |
| -moz-border-radius:5px; | |
| -webkit-border-radius:5px; | |
| border:none; | |
| font-family:'Helvetica Neue',Arial,sans-serif; | |
| font-size:16px; | |
| font-weight:700; | |
| height:32px; | |
| padding:4px 16px; | |
| width: 300px; | |
| text-align: center; | |
| } | |
| .active{ | |
| background-color:#008B45 !important; | |
| } | |
| .split{ | |
| background-color:#999; | |
| margin-top: 20px; | |
| } | |
| </style> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> | |
| <script src="momoent.min.js" type="text/javascript" charset="utf-8"></script> | |
| <script type="text/javascript"> | |
| var times = []; | |
| $(document).ready(function(){ | |
| $("#start").click(function(){ | |
| $(this).css('background-color','#999'); | |
| $(this).removeClass('active'); | |
| var startTime = $.now(); | |
| times.push(startTime) | |
| var m = moment(startTime); | |
| $(this).text('Start Time = ' + m.format('HH:mm:ss.SSS')); | |
| $(this).unbind('click'); | |
| $(this).next('div').addClass('active'); | |
| $(this).next('div').click(function(){process_split($(this));}); | |
| }); | |
| }); | |
| function process_split(item){ | |
| var n = $.now(); | |
| var m = moment(n); | |
| var stamp = m.format('HH:mm:ss.SSS'); | |
| post_runner_to_server(item.text(),'some team name',stamp); | |
| var ms = n - times[times.length - 1]; | |
| times.push(n); | |
| item.text(item.text() + ' - ' + msToTime(ms)); | |
| item.next('div').addClass('active'); | |
| item.removeClass('active'); | |
| item.unbind('click'); | |
| item.next('div').click(function(){process_split($(this));}); | |
| } | |
| function post_runner_to_server(name,team,stamp){ | |
| $.ajax({ | |
| type: "POST", | |
| url: "/some-url/cgi-bin/", | |
| data: { runner: name, team: team, time: stamp} | |
| }); | |
| } | |
| function msToTime(s) { | |
| function addZ(n) { | |
| return (n<10? '0':'') + n; | |
| } | |
| var ms = s % 1000; | |
| s = (s - ms) / 1000; | |
| var secs = s % 60; | |
| s = (s - secs) / 60; | |
| var mins = s % 60; | |
| return addZ(mins) + ':' + addZ(secs) + '.' + ms; | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="start" class="button active">Start</div> | |
| <div class="button split">Runner 1</div> | |
| <div class="button split">Runner 2</div> | |
| <div class="button split">Runner 3</div> | |
| <div class="button split">Runner 4</div> | |
| <div class="button split">Runner 5</div> | |
| <div class="button split">Runner 6</div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment