This is a simple Unix Digital Clock to display Unix Time Stamp. It is written in Java Script and html given below it code.
:: GMT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">#rightcolumn{display:none;}#contentcolumn{margin-right:0px;}</style>
<h1 title="Displays the current epoch / unix timestamp time">Unix Clock</h1>
<style type="text/css">
@font-face
{
font-family:'BebasNeueRegular';src:url('/css/bebas-neue-fontfacekit/BebasNeue-webfont.eot');src:url('/css/bebas-neue-fontfacekit/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),url('/css/bebas-neue-fontfacekit/BebasNeue-webfont.woff') format('woff'),url('/css/bebas-neue-fontfacekit/BebasNeue-webfont.ttf') format('truetype'),url('/css/bebas-neue-fontfacekit/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');font-weight:normal;font-style:normal;
}
.clock
{
background:#000000;width:500px;margin:0 auto;margin-top:30px;padding:30px;border:2px solid #999999;color:#ffffff;border-radius:20px;text-align:center;display:block;
}
#Time
{
font-family:'BebasNeueRegular',Arial,Helvetica,sans-serif;font-size:23px;line-height:normal;text-align:center;text-shadow:0 0 5px #00c6ff;
}
#point
{
padding-left:3px;padding-right:3px;
}
#EpochClock
{
font-size:90px;text-shadow:0 0 10px #00c6ff;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
var newDate = new Date();
newDate.setDate(newDate.getDate());
$('#Date').html(dayNames[newDate.getUTCDay()] + ' ' + monthNames[newDate.getUTCMonth()] + ' ' + newDate.getUTCDate() + ' ' + newDate.getUTCFullYear());
setInterval( function()
{
var d = new Date();
var hours = d.getUTCHours();
$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
var minutes = d.getUTCMinutes();
$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
var seconds = d.getUTCSeconds();
$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
var epoch = Math.floor(d.getTime()/1000.0);
$("#EpochClock").html(epoch);
}, 1000);
});
</script>
<div class="clock">
<span id="Time">
<span id="Date"></span>
<span id="hours"></span><span id="point">:</span><span id="min"></span><span id="point">:</span><span id="sec"> </span> GMT
<br clear="both"/><span id="EpochClock"> </span>
</span>
</div>
:: GMT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">#rightcolumn{display:none;}#contentcolumn{margin-right:0px;}</style>
<h1 title="Displays the current epoch / unix timestamp time">Unix Clock</h1>
<style type="text/css">
@font-face
{
font-family:'BebasNeueRegular';src:url('/css/bebas-neue-fontfacekit/BebasNeue-webfont.eot');src:url('/css/bebas-neue-fontfacekit/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),url('/css/bebas-neue-fontfacekit/BebasNeue-webfont.woff') format('woff'),url('/css/bebas-neue-fontfacekit/BebasNeue-webfont.ttf') format('truetype'),url('/css/bebas-neue-fontfacekit/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');font-weight:normal;font-style:normal;
}
.clock
{
background:#000000;width:500px;margin:0 auto;margin-top:30px;padding:30px;border:2px solid #999999;color:#ffffff;border-radius:20px;text-align:center;display:block;
}
#Time
{
font-family:'BebasNeueRegular',Arial,Helvetica,sans-serif;font-size:23px;line-height:normal;text-align:center;text-shadow:0 0 5px #00c6ff;
}
#point
{
padding-left:3px;padding-right:3px;
}
#EpochClock
{
font-size:90px;text-shadow:0 0 10px #00c6ff;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
var newDate = new Date();
newDate.setDate(newDate.getDate());
$('#Date').html(dayNames[newDate.getUTCDay()] + ' ' + monthNames[newDate.getUTCMonth()] + ' ' + newDate.getUTCDate() + ' ' + newDate.getUTCFullYear());
setInterval( function()
{
var d = new Date();
var hours = d.getUTCHours();
$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
var minutes = d.getUTCMinutes();
$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
var seconds = d.getUTCSeconds();
$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
var epoch = Math.floor(d.getTime()/1000.0);
$("#EpochClock").html(epoch);
}, 1000);
});
</script>
<div class="clock">
<span id="Time">
<span id="Date"></span>
<span id="hours"></span><span id="point">:</span><span id="min"></span><span id="point">:</span><span id="sec"> </span> GMT
<br clear="both"/><span id="EpochClock"> </span>
</span>
</div>
0 Comments:
Post a Comment