JavaScriptでカウントダウンタイマーが0でページ遷移

いつもお世話になっております。
JavaScriptのカウントダウンタイマーを利用して
カウントが0になった際にページ遷移を行いたいです。
更にクッキー処理を行っています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script>
function setCookie (doc, name, value, expires, path, domain, secure) {
　if (3 > arguments.length)
　　throw new Error;
　
　var cookie = [ encodeURIComponent (name) + '=' + encodeURIComponent (value) ];
　
　if (expires)
　　　cookie[cookie.length] = 'expires=' + new Date (expires).toUTCString ();
　
　if (path)
　　　cookie[cookie.length] = 'path=' + encodeURI (path);

　if (domain)
　　　cookie[cookie.length] = 'domain=' + encodeURI (domain);

　if (secure)
　　　cookie.push ('secure');

 doc.cookie = cookie.join ('; ');
}


function getCookie (doc, name) {
　if (2 > arguments.length)
　　throw new Error;

　var n = encodeURIComponent (name).replace (/\W/g, '\$&');
　var v = doc.cookie.match (new RegExp (n + '\s*=\s*(.*?)(?:[;,\s]|$)'));

　return (v) ? decodeURIComponent (v[1]): '';
}


function addDay (dateObj, day) {
　var date = new Date (dateObj);
　date.setDate (date.getDate () + day);
　return date;
}

var COKKIE_NAME = 'hoge';
var target_date = getCookie (document, COKKIE_NAME);


(function () {
　var now = new Date;

　if (target_date) {
　　target_date = Date.parse (target_date);
　　if (+now > target_date) {
　　　location.href = 'end.html';
　　}
　}
　else {　
　　target_date = addDay (now, 1);
　　setCookie (document, COKKIE_NAME, String (target_date), addDay (now, 100));
　}
}) ();

</script>
</head>
<body>
<input type="text" id="fuga" size="40">
<script>
(function () {

  var target = document.getElementById('fuga');
　var int = Math.floor;
　
　(function loop () {
　　var count = target_date - (new Date);
　　var str = [
　　　int (count % 86400000 / 3600000), ' 時 ',
　　　int (count % 3600000 / 60000), ' 分 ',
　　　int (count % 60000 / 1000), ' 秒 ',
　　　count % 1000, ''
　　].join ('');
　　target.value = str;
　　
　　if (0 < count)
　　　setTimeout (loop, 20);
　　else
　　　location.href = 'end.html';　　　
　})();
}) ();
</script>

</body>
</html>

■追記
カウントが0になった際にページ遷移せずにループしてしまいます。

問題は以下の辺りだと思うのですが、わかりません...。

　　if (0 < count)
　　　setTimeout (loop, 20);
　　else
　　　location.href = 'end.html';

ご教授のほど何卒よろしくお願いいたします。

m.ts10806

2020/09/17 04:50

インデントがぐちゃっとしてるのでそれは整理してもらうとして、現在のコードにおける問題はなにでしょうか。何が起きているのか、具体的に記載してください。エラーも確認してくださいね

wing283

2020/09/17 05:09

修正依頼とご質問ありがとうございます。インデントを直したのと、「カウントが0になった際にページ遷移せずにループしてしまいます。」を追記させていただきました。

kuma_kuma_

2020/09/17 05:19

多分修正漏れです location.href = 'htp:next_page.html'; あと確認ですが「初めてHPを訪れてから24時間過ぎると移動する」という事でしょうか？

m.ts10806

2020/09/17 05:19

この場合の「ループ」は何(どんな減少ら意味)を指していますか？

wing283

2020/09/17 05:24

kuma_kuma_様ご指摘ありがとうございます。修正いたしました。また、おっしゃる通り、「初めてHPを訪れてから24時間過ぎると移動する」という事です。 m.ts10806様ページ遷移せずにタイマーが戻るということです。

行動規範の内容に同意します

回答2件

ベストアンサー

結局直しました。

JavaScriptは確かに変数に型が決まっていないので
文字列型,数値型,日時型どれでも入るけど
使い回しはしないで下さい(target_dateの事)
結局デバックしながら値を追いかける事になります。
今回日時型で統一しました。

あと特別な理由もなしに<body>内に<script>を埋め込まない事

<head>内に収めるようにして下さい　

あと関数
×　encodeURI (uri)
○　encodeURI(uri)
へんな隙間開けないでください

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<script>
6const COKKIE_NAME = 'hoge';    // クッキー名
7var target_date;               // 判定日付
8var target;                    // カウントダウン表示エレメント
9
10// クッキー書込み処理
11function setCookie(name, value, expires, path, domain) {
12	var cookie = [];
13	var now = new Date;
14
15	cookie.push(name + '=' + value);
16	if (path)    cookie.push('path=' + encodeURI(path));
17	if (domain)  cookie.push('domain=' + encodeURI(domain));
18
19	cookie.push('expires=' + addDay(now, 100).toUTCString());
20	cookie.push('secure');
21	document.cookie = cookie.join('; ');
22}
23// クッキー取得処理
24function getCookie(name) {
25	var cookies = document.cookie;			//全てのcookieを取り出して
26	var cookiesArray = cookies.split(';');	// ;で分割し配列に
27	var hogeDate = '';
28
29	for(var c of cookiesArray){				//一つ一つ取り出して
30	    var cArray = c.split('=');			//さらに=で分割して配列に
31	    if(cArray[0] == name){				// 取り出したいkeyと合致したら
32	    	hogeDate = new Date(cArray[1]);
33	    }
34	}
35	return hogeDate;
36}
37
38// 日付データに指定日数追加する
39function addDay(dateObj, day) {
40	var date = new Date(dateObj);
41	date.setDate(date.getDate() + day);
42	return date;
43}
44
45// 初期処理
46function init() {
47
48	var now = new Date;
49
50	target_date = getCookie(COKKIE_NAME);			// 判定日付取得
51	target = document.getElementById('fuga');		// カウントダウンエレメント表示取得
52
53	if (!target_date) {
54		// 初めてHPにきた時
55		target_date = addDay(now, 1);				// 現在時刻より1日追加
56		setCookie(COKKIE_NAME, target_date.toLocaleString('ja'));
57	}
58
59	// カウントダウン処理開始
60	setTimeout("loop()", 500);
61
62}
63
64// カウントダウン処理
65function loop(){
66
67	var now = new Date;
68	var count = 0;
69	var msg = [];
70	var h = 0;
71	var m = 0;
72	var s = 0;
73
74	if (target_date <= now) {
75
76		// クッキー値更新
77		target_date = addDay(now, 1);				// 現在時刻より1日追加
78		setCookie(COKKIE_NAME, target_date.toLocaleString('ja'));
79
80		// ページ移動
81		location.href = 'end.html';
82		return;
83	}
84
85	// 残り時間表示
86	count = target_date.getTime() - now.getTime();
87	h = Math.floor(count % 86400000 / 3600000);
88	m = Math.floor(count % 3600000 / 60000); 
89	s = Math.floor(count % 60000 / 1000);
90	if (h) msg.push(String(h) + ' 時 ');
91	if (m) msg.push(String(m) + ' 分 ');
92	msg.push(String(s) + ' 秒 ');
93	target.value = msg.join ('');
94
95	// 次のカウントダウン処理
96	setTimeout("loop()", 500);
97
98	return;
99}
100
101</script>
102</head>
103<body onload="init();">
104	<input type="text" id="fuga" size="40">
105</body>
106</html>