JavaScript 、 CSS 、 HTML で作る、一秒刻みのデジタル時計。
JavaScript で、1秒ごとに、現在の時刻を取得し、表示させている。
実装例
実装例の動作について
一秒刻みで、時を刻んで行く。
ソースコード
JavaScript
<script type="text/javascript">
<!--
function digitalClock() {
var now = new Date();
document . getElementById( 'digital-clock' ) . innerHTML= now . toLocaleString();
window . setTimeout( "digitalClock()", 1000);
}
window . onload = digitalClock;
// -->
</script>
<!--
function digitalClock() {
var now = new Date();
document . getElementById( 'digital-clock' ) . innerHTML= now . toLocaleString();
window . setTimeout( "digitalClock()", 1000);
}
window . onload = digitalClock;
// -->
</script>
CSS
<style type="text/css">
<!--
div#digital-clock {
font-weight: bold;
font-size: 25px;
color: white;
background: gray url(earth.png) no-repeat center top;
text-align: center;
width: 500px;
padding: 40px 0 15px 0;
border: 2px #000000 solid;
}
-->
</style>
<!--
div#digital-clock {
font-weight: bold;
font-size: 25px;
color: white;
background: gray url(earth.png) no-repeat center top;
text-align: center;
width: 500px;
padding: 40px 0 15px 0;
border: 2px #000000 solid;
}
-->
</style>
HTML
<div id="digital-clock"></div>
解説
JavaScript
<script type="text/javascript">
<!--
function digitalClock() {
var now = new Date(); // 現在の時刻を取得し、変数nowに代入
document . getElementById( 'digital-clock' ) . innerHTML= now . toLocaleString(); // 現在の時刻を、現地時刻表示形式の文字列に変換し、ID が digital-clock の要素内に表示
window . setTimeout( "digitalClock()", 1000); // 1000ミリ秒後に、digitalClock() を呼び出す
}
window . onload = digitalClock; // ページを表示したとき、digitalClock() を呼び出す
// -->
</script>
<!--
function digitalClock() {
var now = new Date(); // 現在の時刻を取得し、変数nowに代入
document . getElementById( 'digital-clock' ) . innerHTML= now . toLocaleString(); // 現在の時刻を、現地時刻表示形式の文字列に変換し、ID が digital-clock の要素内に表示
window . setTimeout( "digitalClock()", 1000); // 1000ミリ秒後に、digitalClock() を呼び出す
}
window . onload = digitalClock; // ページを表示したとき、digitalClock() を呼び出す
// -->
</script>
CSS
<style type="text/css">
<!--
div#digital-clock { /* IDが、digital-clock の div 要素 */
font-weight: bold; /* 文字の太さ */
font-size: 25px; /* 文字の大きさ*/
color: white; /* 文字の色 */
background: gray url( /* 背景に使う画像のURLを指定 */ ) no-repeat center top; /* 背景の色、背景の画像、背景の画像の並べ方、背景の画像の表示位置 */
text-align: center; /* テキストの水平方向の表示位置*/
width: 500px; /* 幅 */
padding: 40px 0 15px 0; /* 内側の余白: 上 右 下 左 */
border: 2px #000000 solid; /* 枠線の太さ・色・スタイル */
}
-->
</style>
<!--
div#digital-clock { /* IDが、digital-clock の div 要素 */
font-weight: bold; /* 文字の太さ */
font-size: 25px; /* 文字の大きさ*/
color: white; /* 文字の色 */
background: gray url( /* 背景に使う画像のURLを指定 */ ) no-repeat center top; /* 背景の色、背景の画像、背景の画像の並べ方、背景の画像の表示位置 */
text-align: center; /* テキストの水平方向の表示位置*/
width: 500px; /* 幅 */
padding: 40px 0 15px 0; /* 内側の余白: 上 右 下 左 */
border: 2px #000000 solid; /* 枠線の太さ・色・スタイル */
}
-->
</style>
HTML
<div id="digital-clock"></div>
この部分を、JavaScript でコントロールし、デジタル時計を表示させる。