Skip to content

Instantly share code, notes, and snippets.

@sTiLL-iLL

sTiLL-iLL/clock2.html

Last active December 18, 2015 02:29
Show Gist options
  • Save sTiLL-iLL/5711041 to your computer and use it in GitHub Desktop.
Save sTiLL-iLL/5711041 to your computer and use it in GitHub Desktop.
Download ZIP
Widget inHTML and JS (jquery-ui) smooth animated clock
Raw
clock2.html
<!-- clock widget exmple -->
<!DOCTYPE html>
<html>
<head runat="server">
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function() {
$(ptmr).click(function() {
$("#dmo").css("background-color", "gray")
.css("border-radius", "6px")
.css("border", "solid 1px black")
.css("height", "110px")
.css("width", "135px")
.css("padding", "6px")
.css("padding-top", 1);
});
});
var ptmr = function() {
var ivl = -1;
$('button').click(function(event) {
$('#demo').toggle(this, function() {
$("#demo").hide();
});
return false;
});
$(window).bind('unload', function() {
clearInterval(ivl);
});
return ivl = setInterval(function() {
var d = new Date(),
t = d.toLocaleTimeString();
$("#demo").html(t);
}, 1000);
}
</script>
</head>
<body style="">
<div style="position: fixed; top: 0px; left: 0px; height: 0px; width: 0px; z-index: 9999999;">
<div style="position: fixed; top: 100%; height: 0px;">
<div style="position: relative;"></div>
</div>
</div>
<div id="dmo" style="background-color: gray; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; border: 1px solid black; height: 110px; width: 125px; padding: 1px 8px 8px;">
<h2 id="demo" style="display: none;">11:59:04 AM</h2>
<button id="show">tHe tiMe?</button>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment