掲示板/JavaScript質問板/過去ログ/一覧/ 時間を反映してテキストの色をかえる

0 名前： kk ： 2007/07/25（水） 16:37 ID:auLodFE/ sub-7m: 例えば、
トップページに遠足の日程表を表示させます。
HPを見た時間帯に（1時間単位）反映してその時間帯の日程の部分の
テキストの色をかえる。(あるいは別ウインドウで表示)
ということはJavascriptで可能でしょうか。

糸口がみつからず、いろいろ検索してみたのですがよくわかりません。

（例）下記のような日程表があったとして、

7:00　起床
8:00　出発
11:00　A地点到着
12:00　昼食
13:00　バスのりば集合
13:30　A地点出発
14:00　休憩
14:15　おやつ
15:00　B地点到着
　　　l
　　　l
　　　l

21:00　消灯

8時にHPを見たら、《8:00　出発》
12時にHPを見たら《12:00　昼食》
13時にHPを見たとしたら、《13:00　バスのりば集合と13:30　A地点出発》
のテキストの色が変わる。

1 名前： カヅサツ ◆ThCi95HEzw ： 2007/07/25（水） 16:37 ［URL］ ID:O5hEMlpW sub-r2: > 7:00　起床
> 8:00　出発
> 11:00　A地点到着
> (略)

HTML:
(1) これを「表」としてマークアップし、id属性で適当な名前を付ける(HikingTimeTableとでも)。
(2) 各行の時刻をtr要素のclass属性値にする (8:00 なら class="8")

JavaScript:
(3) 現在時刻を取得
(4) HikingTimeTable内のtr要素1つ1つに対し「現在時刻とclass属性値が一致したらテキスト色を変更」と処理

こんな塩梅でしょうか。

2 名前： カヅサツ ◆ThCi95HEzw ： 2007/07/25（水） 16:37 ［URL］ ID:O5hEMlpW sub-r2: 訂正というかより良い案

> 7:00　起床
> 8:00　出発
> 11:00　A地点到着
> (略)

HTML:
(1) これを「表」としてマークアップし、id属性で適当な名前を付ける(HikingTimeTableとでも)。
(2) 時刻は見出しセル(th)、行動を通常セル(td)としてマークアップする

JavaScript:
(3) 現在時刻を取得
(4) HikingTimeTable内のtr要素1つ1つに対し「行内の見出しセル内容を ":" で分割し、前者と現在時刻を比べ、一致したらテキスト色を変更」と処理

3 名前： KK ： 2007/07/25（水） 16:37 ID:auLodFE/ sub-7m: カヅサツさま

さっそくの回答ありがとうございます。
HTMLで表は作ってみました。
しかし、教えていただいた

＞＞(4) HikingTimeTable内のtr要素1つ1つに対し「行内の見出しセル内容を ":" で分割し、前者と現在時刻を比べ、一致したらテキスト色を変更」と処理

がどうしたらいいのかわかりません。
検索してみたのですが、
現在時間の取得、条件の一致、テキスト色を変更　
それぞれをどう組み合わせて書いたらよいのかわからないのです。
教えていただけますか。

4 名前： kk ： 2007/07/25（水） 16:37 ID:auLodFE/ sub-7m: つくってみた　HTMLファイルです
こういうことでいいでしょうか。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="ja">

<head>
<title>日程</title>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">

<style type="text/css"></style>

</head>
<body>
<SCRIPT TYPE="text/javascript">

</SCRIPT>
<table class="timetable" border="1" cellspacing="2" cellpadding="0" id="timetable">
<tr>
<th>9:00</th>
<td>aaa</td>
</tr>
<tr>
<th>10:00</th>
<td>bbb</td>
</tr>
<tr>
<th>11:00</th>
<td>ccc</td>
</tr>
<tr>
<th>12:00</th>
<td>ddd</td>
</tr>
<tr>
<th>13:00</th>
<td>eee</td>
</tr>
<tr>
<th>14:00</th>
<td>fff</td>
</tr>
<tr>
<th>15:00</th>
<td>ggg</td>
</tr>
<tr>
<th>16:00</th>
<td>hhh</td>
</tr>
</table>
</body>

</html>

5 名前： カヅサツ ◆ThCi95HEzw ： 2007/07/25（水） 16:37 ［URL］ ID:O5hEMlpW sub-r2

document.getElementById('timetable').getElementsByTagName('tr');

で、「id属性値が "timetable" である要素内のtr要素」の配列を得ます。

length で配列数を得ますから、for文で tr要素1つ1つに対し処理できます。

getElementsByTagName('th') で th要素を取得、その firstChild.nodeValue で内容が取れます。
これを split(':') で分割すると、それぞれ配列に放り込まれます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>日程</title>
<style type="text/css">
#timetable {
	width: 400px;
}
</style>
</head>
<body>
<table id="timetable">
	<tbody>
		<tr><th>07:00</th><td>起床</td>
		<tr><th>08:00</th><td>出発</td>
		<tr><th>11:00</th><td>A地点到着</td>
		<tr><th>12:00</th><td>昼食</td>
		<tr><th>13:00</th><td>バスのりば集合</td>
		<tr><th>13:30</th><td>A地点出発</td>
		<tr><th>14:00</th><td>休憩</td>
		<tr><th>14:15</th><td>おやつ</td>
		<tr><th>15:00</th><td>B地点到着</td>
		<tr><th>16:00</th><td>C地点到着</td>
		<tr><th>17:00</th><td>D地点到着</td>
		<tr><th>18:00</th><td>E地点到着</td>
	</tbody>
</table>
<script type="text/javascript">
var weeks = new Array('日','月','火','水','木','金','土');
var now = new Date();
var year = now.getYear(); // 年
var month = now.getMonth() + 1; // 月
var day = now.getDate(); // 日
var week = weeks[ now.getDay() ]; // 曜日
var hour = now.getHours(); // 時
var min = now.getMinutes(); // 分
var sec = now.getSeconds(); // 秒
if(year < 2000) { year += 1900; }

// 数値が1桁の場合、頭に0を付けて2桁で表示する指定
if(month < 10) { month = "0" + month; }
if(day < 10) { day = "0" + day; }
if(hour < 10) { hour = "0" + hour; }
if(min < 10) { min = "0" + min; }
if(sec < 10) { sec = "0" + sec; }

// id属性値が "timetable" である要素内のtr要素の配列を得る
var ttTr = document.getElementById('timetable').getElementsByTagName('tr');

// tr要素1つ1つに処理
for(var i = 0; i < ttTr.length ; i++){
	// 各行のth要素の内容を ":" で分割し、hourと比べる
	if(ttTr[i].getElementsByTagName('th')[0].firstChild.nodeValue.split(':')[0] == hour){
		//一致したら、行のスタイルを変える
		ttTr[i].style.color = "#FF0000";
	}
}

// 現在時刻を表示
document.write('<p>現在：<strong>' + year + '年' + month + '月' + day + '日（' + week + '）');
document.write(hour + '時' + min + '分' + sec + '秒</strong></p>');

</script>
</body>
</html>

6 名前： kk ： 2007/07/25（水） 16:37 ID:GzPims40 sub-t1: カヅサツ様

ありがとうございました。
バッチリです。。
どうしていいかまったくわからず、困っていたので本当に助かりました。
Javascriptは難しそうで敬遠していたのですが、これを機会にすこしづつ勉強していきたいと思います。

7 名前：匿名： 2007/07/25（水） 16:37 ID:tLX2qTsk sub-Cz: お約束の蛇足だけど、

× getYear() 二千年問題のときに廃止済。
○ getFullYear()

だから 1900 の足し算も不要。

廃止済みのものでも、昔のコードを動かすためにブラウザはサポートし続けるでしょう。だが、これから作る人は、廃止済みのものを使用しないようにして下さい。古い（前世紀の）JavaScript リファレンスを参照するときは注意。

8 名前： カヅサツ ◆ThCi95HEzw ： 2007/07/25（水） 16:37 ［URL］ ID:O5hEMlpW sub-r2: >>7
ギャワー！
ご指摘ありがとうございます！

すいませんすいません。

9 名前： kk ： 2007/07/25（水） 16:37 ID:t1zPpegS sub-7m: 前回はありがとうございました。大変たすかりました。

前回、HPを見た時間帯のテキスト色を変更する。ということで教えていただいたのですが、
時間帯全部ではなく、現在のスケジュールだけのテキスト色を変えることもできるでしょうか。

前回教えていただいたものは、12時代にHPを見た場合
12時（00分、15分、50分）のスケジュールはすべて色が変わっているのですが、
これを、HPを見た時間に行われているスケジュールだけの色を変更するということは可能でしょうか。
もし可能であれば、もう一度教えていただきたいのですが。

（例）
12時45分にHPを見た場合、[12:15　dddd]　の色が変わっている。
13時5分にHPをみた場合[12:50 eeee]　の色が変わっている。

11：00　　aaaa
11：15　　bbbb
12：00　　cccc
12：15　　dddd
12：50　　eeee
13：20　　ffff

10 名前： カヅサツ ◆ThCi95HEzw ： 2007/07/25（水） 16:37 ［URL］ ID:O5hEMlpW sub-r2: 応用です。
>>2 を修正します。

JavaScript:
(3) 現在時刻を取得
(4) HikingTimeTable内のtr要素1つ1つに対し、以下の処理を行う
(4-1) 行内の見出しセル内容を ":" で分割
(4-2)「前者と現在時刻(時)が一致」かつ「後者が現在時刻(分)以下」ならテキスト色を変更。
(4-3) 1つ前の行がもしあれば、テキスト色を元の色に変更。