javascript02

それではもうしこしjavascriptを練習しましょう。

動くデジタル時計の表示; getElementById

以下のようにすればデジタルで表示する時計が表示されます。
ここで利用しているコードは、最初にid="d2"を指定します。<div></div>で指定されている「 」は空白(表示されない1文字)を示すhtmlコードです( ここに「時刻」と入れても結構です。すぐに時間に変更されます)。しかし、その下のscriptによりd2 に入力された値、つまり時刻がここに入力されて表示されます。なので、空白が時刻lに書き換えられるようになります。
getElementByIdはd2に要素をいれることを示します。
innerHTMLは要素をダナミックに変更します。
時刻は、new Date().toLocaleString() で取得します。「, 1000)」は1000ms ごとつまり1秒毎です。
参考：とほほのWWW入門

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>Javascript02</h2>

<h3>デジタル時計</h3>

</script>

</div>

setInterval(function() {

document.getElementById("d2").innerHTML = new Date().toLocaleString();

}, 1000);

</script>

</body>

</html>

前回はdocument.writeを用いていましたが、今回はdocument.getElementByIdを利用しています。これはDOM(document Object Model)と呼ばれるもので、ウェブ文書のためのプログラミングインターフェイスです。

前回と今回で見てきたようにDOMを利用するとweb上のテキスト表示を変更することができます。CSSと組み合わせるとさらに表現が拡張されます。

テキストの色を変更する; elem.sytel.color

get.ElementByIdを利用した例をもう１つ紹介しましょう。今度はscriptをヘッダーに入れ利用して、関数(textColor)として定義しています。この関数の引数は「newColor」です。

Javascript部分
関数 textColorの定義宣言し、引数をnewColor とる。
document.getElementByIdで"para"の要素を受け取り、変数elemに代入されます。
elem.sytel.colorでnewColorに指定した色に設定します。

html部分
newColorは、HTMLのbodyの中で利用され、textColorの関数の引数として色が’blue'あるいは'red'が指定されます。
id='para'で「いくらかのテキスト」を定義しています。

参考：mojira開発用web document.getElementByIdの説明

ここでelemの前にconstコマンドが作られています。これは一度定義したものを変更しないというコマンドですね。

<!DOCTYPE html>

<html>

<head>

function textColor(newColor) {

const elem = document.getElementById("para");

elem.style.color = newColor;

}

</script>

</head>

<body>

<head>

<title>getElementById の例</title>

</head>

<body>

<p id="para"><b>指定した色で表示する</b></p>

</body>

</html>

</body>

</html>

左の青、赤のボタンをクリックすると上に表示された「指定した色で表示する」の表示色が変わります。

Date()を使った残り時間の表示

せっかく時間を扱ったので指定した時間(endtime)までの残り時間(countdowntime)を表示するコードを書いてみましょう。少し長いですが、キーになるのは以下の点です。

countdowntimeを上で学習したgetElementByIdで代入しています。
idとして countdowntimeを表示すると定義しています。
endtime(目標時間)を2024年の12月31日23時59分59秒として、それまでの残り時間remaintimeを現在の時刻nowからの差として計算しています。
contdowntimeは表示が1秒毎に変更されるようにsetInterval(countdown, 1000)で秒単位に直し(ミリ秒から変更)、countdowntime.innerHTMLを利用して書き直し表示しています。

remaintimeは日時間分で表示するために計算して、その結果をテキストしてcountdowntimeに代入しています。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>Javascript07</h2>

<h3>カウントダウン(2025までの時間)</h3>

</script>

</div>

// カウントダウンの目標日時を設定 (例: 2024年12月31日 23:59:59)

const endtime = new Date("December 31, 2024 23:59:59").getTime();

// カウントダウンを表示する要素を取得

const countdowntime = document.getElementById("countdowntime");

// カウントダウン関数を定義

const countdown = () => {

// 現在日時を取得

const now = new Date().getTime();

// 残り時間をミリ秒で計算

const remaintime = endtime - now;

// 日、時、分、秒に変換

const days = Math.floor(remaintime / (1000 * 60 * 60 * 24));

const hours = Math.floor((remaintime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

const minutes = Math.floor((remaintime % (1000 * 60 * 60)) / (1000 * 60));

const seconds = Math.floor((remaintime % (1000 * 60)) / 1000);

// HTML要素に表示

countdowntime.innerHTML = days + "d " + hours + "h "

+ minutes + "m " + seconds + "s ";

// 残り時間が0以下になったらメッセージを表示

if (remaintime < 0) {

clearInterval(x);

countdowntime.innerHTML = "EXPIRED";

}

};

// 1秒ごとにカウントダウン関数を呼び出す

const x = setInterval(countdown, 1000);

</script>

</body>

</html>

Page updated

Google Sites

Report abuse