-
-
Save mattpass/2900665 to your computer and use it in GitHub Desktop.
<span id="serverDT"></span> | |
<script> | |
var nDT = <?php echo time()*1000; ?>; | |
setInterval(function(){ | |
var s=(new Date(nDT+=1e3)+'').split(' '), | |
d=s[2]*1, | |
t=s[4].split(':'), | |
p=t[0]>11?'pm':'am', | |
e=d%20==1|d>30?'st':d%20==2?'nd':d%20==3?'rd':'th'; | |
t[0]=--t[0]%12+1; | |
document.getElementById('serverDT').innerHTML=[s[0],d+e,s[1],s[3],t.join(':')+p].join(' '); | |
},1000); | |
</script> |
Am thinking you can take JS's Date and slice the string to provide day & month names, but am not sure if all browsers see the date time in the same format?
Also wondering if we can combine those 2 lines where m & s are being prefixed with 0's.
Maybe it helps if you tells us what you want to accomplish :) It looks as if you want to run a 1-second timer that gets the server time in miliseconds and displays a certain format in a dom element and adds 1000 for every subsequent call.
Some caveats I see:
- The timer might not be called after exactly 1000 ms so you are bound to desync sooner or later
setTimeout
takes a number as second parameter, not a string- Script seems to take an awful lot of steps to produce this time format, is that really all required?
You might be able to cache the string 'slice'
and use that to save some bytes.
@qfox
Thats exactly it. Kind of showing the 'server time' without any server callbacks. I'm setting the server time to begin with, then updating the DOM elem every second.
- Will the timer really desync? Maybe better on setInterval somehow as I think that keeps sync perfectly.
- Fixed num in setTimeout so no longer a string.
- Would ideally like to keep that format if possible
@mathiasbynens Not sure I quite follow. I can cache lines 10 & 11 somehow?
I'm afraid there is no better way to do date formating in JavaScript. It gets dirty very fast (check this JSON date formatter by @crhallberg). Why not do it in PHP using strftime
?
@maettig Thats what I was thinking. Would like to just split(' ') a datetime string, but am not 100% sure if there is a format thats the same across all browsers? :/
If there is an absolutely consistent format, I can go that route and in doing so reduce the bytes to around half.
In case it matters, you could use a function declaration rather than var serverDT = function...
Could you maybe specify the format in less-cryptic form? ;)
if (h>12) {h-=12};
should obviously be something like h>12 && (h-=12)
or at least drop the curlies. But since there's more stuff like this (long var names etc) I don't really wanna pester you with that ;)
Actually, you're doing
h>=12 ? hE="pm" : hE="am";
if (h>12) {h-=12};
You sould probably combine those... :)
@qfox I guess a few bytes could be saved here and there, but am sure there's a better solution that'd save a lot more bytes.
The format I'm aiming for is:
Sat 9rd Jun 2012 1:56:42pm
I think @maettig is thinking along the same lines as me: output the date in this format with PHP. This can then be picked up with JS, split on the whitespaces & modified.
Just saved 95 chars by removing the 2 x name arrays and instead chopping the 1st & 2nd values from the date (lines 7 & 9), changing to setInterval and removing those 2 curlies @qfox mentioned :D
Month names could be more efficient: "JanFebMarAprMayJunJulAugSepOctNovDec".match(/(.{3})/g)
. Oh but I see you removed that entirely
(Note that foreign browsers could end up with foreign day/month names)
@qfox I don't mind if it outputs the local language, in fact thats a benefit. :)
Saved another 165 bytes now by changing the date provided by JS to a string and splitting that into an array. I think I can't improve this anymore without reducing var names or removing whitespace.
Now just 505 chars. I'm calling this done.
There is still a lot you can do to make this shorter including dropping the PHP part (this will display the client time instead of the server time).
<span id="serverDT"></span>
<script>
var nDT = <?php echo time() * 1000; ?>;
setInterval(function(){
var s=(new Date(nDT+=1e3)+'').split(' '),
d=s[2]*1,
t=s[4].split(':'),
p=t[0]>11?'pm':'am',
e=d%20==1|d>30?'st':d%20==2?'nd':d%20==3?'rd':'th';
t[0]=--t[0]%12+1;
document.getElementById('serverDT').innerHTML=[s[0],d+e,s[1],s[3],t.join(':')+p].join(' ');
},1000);
</script>
Edit: Bugfix. Displays server time again. Saved 2 bytes.
@maettig Excellent. Now under the 500 mark at 489 chars (from your suggestion plus removing unncessary brackets on line 7 and whitespace on line 11).
468 chars now, but I've only really achieved that by removing whitespace. Apart from reducing var names, putting everything onto 1 line, removing indents or semicolons at line end I think this is it?
3 more chars saved by using dS=String(date).split(' ');
(instead of using toString)
@maettig It's the server DT I'm really looking to display but a lot of those changes could be used for that I believe?
Sure. I did an update to my code above.
377 chars now thanks to @maettig. Some v good changes, only drawback I can see is getting rid of the function so you see nothing for the first 1 sec and am I right in thinking those vars leak to global?
(As I understand it.... var a=1,b=2 ...b leaks to global? Or is it nothing escapes from anon functions?)
No, var a=1,b=2
does not leak. To fix the delay you can put something like <?php echo strftime("..."); ?>
in the <span>
. Edit: I saved another two bytes in the code above.
@maettig Mmmm OK, I'm sure someone told me doing that leaks? Oh well, learnt something as well then :)
Don't mind the delay (gives the appearance of actually linking in with the server) ;)
Am integrating this as a final solution into ICEcoder today. Many thanks!
I know you're aiming for a specific format but why not let the end user in control and use the locale Date format ?
<span id="serverDT"></span>
<script>
var nDT = <?php echo time() * 1000; ?>;
setInteval("document.getElementById('serverDT').textContent=new Date(nDT+=1e3).toLocaleString()",1000);
</script>
@p01 Good point. I chose that format because it looks a little nicer than the regular Date output. In the bigger scheme of things I don't mind the extra 100 bytes or so on my IDE to have this format.
@maettig Good spot, updated.
Apart from reducing whitespace and renaming vars, can you golf this down any further?
(Also don't want to use any dodgy/questionable techniques and it should be easy for anyone to read) ;)