-
-
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> |
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.
@mathiasbynens Not sure I quite follow. I can cache lines 10 & 11 somehow?