カウントダウンタイマーを１つのページに複数つけたい
Q&A
Closed
解決したいこと
リンクを開いたら２４時間カウントダウンタイマーが始まるようにしましたが、
１つのページに３つつけたいのですが、２つ以上つけると１つしか動かなくなってしまいます。
全てを同じように動かすにはどうしたらいいか教えていただきたいです。
発生している問題・エラー
２つ目から動かなくなってしまいます。
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
<div id="timer_body"><h2 id="timer"></h2></div>
<style>
#timer_body{
background-color: #FFF500 !important;/*背景色の設定*/
z-index: 9999 !important;
width: 750px !important;
}
#timer{
font-weight: bold ; /*文字の太さを設定*/
font-size: 70px ; /*文字の大きさを設定*/
color: #e82c2c ;/*文字の色を設定*/
text-align: center;
font-family: Sans-Serif;
}
</style>
<script>
var interval = 10; //更新のインターバル設定
var cook;
var cStart2,cEnd2;
var endtime;
cook=document.cookie + ";";
cStart2 = cook.indexOf("END2=",0);
if (cStart2 == -1){
var endDate = new Date();
/**
* 日付を設定します。
* タイマーの時間設定ができます。
* 上から順に、日、時、分、秒を入力できます。
*
* ※時、分、秒がそれぞれ24(時間)、60(秒、分)を超える場合(例2時間後や1日後など)は
* 「60」や「24」と入力してください。
* また使われないものがある場合(例2時間後の場合、日を設定しない)は
* 「1」と入力してください
*
*
* 2日後にタイマーをセットする場合。
* 上から順に、「2」、「60」、「60」、「60」
*
* 4時間後にタイマーをセットする場合
* 上から順に、「1」、「4」、「60」、「60」
* */
var settimeday = 1; //日数を設定
var settimehour = 24; //時間を設定
var settimeminutes = 60; //分数を設定
var settimeseconds = 60; //秒数を設定
var endDateAfter = new Date(endDate.getTime() + (1000 * settimeseconds * settimeminutes * settimehour * settimeday));
endDate.setTime(endDate.getTime() + (1000 * 60 * 60 * 24 * 2));
var mem = endDate.toGMTString();
document.cookie = "END2=" + endDateAfter + ";expires=" + mem;
endtime = endDateAfter;
} else {
cEnd2 = cook.indexOf(";", cStart2);
endtime = cook.substring(cStart2 + 5, cEnd2);
endtime = Date.parse(endtime);
}
function countdownTimer(){
var nowDate = new Date();
var period = endtime - nowDate;
var addZero = function(n){return('0'+n).slice(-2);}
if(period > 0) {
var day = Math.floor(period / (1000 * 60 * 60 * 24));
period -= (day *(1000 * 60 * 60 * 24));
var hour = Math.floor(period / (1000 * 60 * 60));
period -= (hour *(1000 * 60 * 60));
var minutes = Math.floor(period / (1000 * 60));
period -= (minutes * (1000 * 60));
var second = Math.floor(period / 1000);
var millsecond = Math.floor(period / 10);
var insert = "";
insert += '<span class="h">' + addZero(hour) + ':' + '</span>';
insert += '<span class="m">' + addZero(minutes) +':' + '<span>';
insert += '<span class="s">' + addZero(second) +':' + '<span>';
insert += '<span class="ms">' + addZero(millsecond) + '<span>';
document.getElementById('timer').innerHTML = insert;
setTimeout(countdownTimer, interval);
} else {
var insert = "";
var text = "まもなく受付を終了致します。";//文章を設定
insert += '<span>' + text + '<span>';
document.getElementById('timer').innerHTML = insert;
var urlset = 'https://www.kigyodrill.com/';//URLを設定
setTimeout(function(){window.location.href = urlset;}, 5*1000);
}
}
countdownTimer();
</script>
2つ目以降
<h2 id="timer"></h2>
1
