Font Awesome Button

by Christopher O

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
Stuff:
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-save fa-stack-1x fa-inverse"></i>
</span>

<br />
<span class="fa-stack" id="docrefsh">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-stack-1x fa-inverse fa-refresh" id="docrefshspin"></i>
</span>
<br />
<span id="blabla"></span>

JavaScript

var isdrfh = false;
var drfshint;
$(document).on('click', '#docrefsh', function () {
    if (isdrfh) {
        $('#docrefshspin').removeClass('fa-spin');
        isdrfh = false;
        clearInterval(drfshint);
    } else {
        $('#docrefshspin').addClass('fa-spin');
        isdrfh = true;
        drfshint = setInterval(function() {loadRSdoclist()}, 2000);
    }
});

function loadRSdoclist() {
    var now = new Date();
	var hr = now.getHours();
	var min = now.getMinutes();
	var sec = now.getSeconds();
	var ap = 'am';
	if (hr > 12){hr = hr - 12; ap = 'pm';}
	if (hr == 0){hr = 12;}
    
    $( "#blabla" ).html(pad(hr) + ":" + pad(min) + ":" + pad(sec) + ' ' + ap);
}

function pad(n) {
    return (n < 10) ? ("0" + n) : n;
}