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

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>

 

 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク