javascriptで1秒毎にリアルタイムに更新されるデジタル時計

投稿者: | 2012年7月21日
1秒毎にリアルタイムに更新されるデジタル時計をサイトに導入したい時は、以下のJqueryとJavascriptを使えば簡単に設置が可能。
id=”mclock”の場所にデジタルが書き出されるから、id名に対してスタイルシートを用いることで文字サイズやデザインを変更できる。
さらに、サンプルでは「時、分、秒」としているが、Date();の書き出しを追加するだけで「年」「月」「日」の表示もできる

JAVASCRIPT

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script language="javascript">
$(function(){
setInterval(function(){
var now = new Date();
hou = toDD(now.getHours());
min = toDD(now.getMinutes());
sec = toDD(now.getSeconds());
$('#mclock').text(hou +":"+ min +":"+ sec);
},1000);
});
var toDD = function(num){
num += "";
if(num.length === 1){num = "0" + num;}
return num;
};
</script>

<div id="mclock"></div>