1
テキストファイルに応じて、複数の連続したカウントダウンを表示するWebページを作成しています。 ほとんどすべてのものが動作しますが、まだ1つしか動作したくありません。JavaScriptのカウントダウンで奇妙なエラーが発生しました
問題は、このです：タイマーヒットの午後12時00分00秒、それは次のカウントダウンに切り替えて、カウントダウンを開始するが、何でないことはグリッチのいくつかの種類を示している必要がある場合、それが間に点滅nan：nan：nanと23：59：xxのようにカウントダウンが再び始まり、次の日にカウントダウンします。私はコンソールにいくつかのものを書きました、そして、ここで私はjavascriptの新しい期限を設定する私の機能が呼び出され、deadlinecounterは上がっています。それは0から6まで、0から7までは後になります。非常に奇妙なことに私は言うでしょう。誰かが私を助けることを願っています！
これは私のコードです：
<!DOCTYPE html>
<!-- php functions -->
<?php
$deadlineH = null;
$deadlineM = null;
$deadlineS = null;
$deadlineTitle = null;
$filename = "data.txt";
$fp = fopen($filename, "r");
$content = fread($fp, filesize($filename));
$fullArray = setFullArray($content);
$length = count($fullArray);
for ($i = 0; $i < $length - 1; $i++) {
$value = $fullArray[$i];
echo "var " . ($i + 1) . ": " . $fullArray[$i] ." <br>";
if((($i+1) % 4) == 0){
echo " ";
}
}
$hoursArray = [];
$minutesArray = [];
$secondsArray = [];
$titlesArray = [];
setArrays($fullArray);
function setArrays($fullArray){
$length = count($fullArray);
for ($i=0; $i < $length - 1; $i = $i+4) {
array_push($GLOBALS['hoursArray'], $fullArray[$i]);
}
for ($j=1; $j < $length - 1; $j = $j+4) {
array_push($GLOBALS['minutesArray'], $fullArray[$j]);
}
for ($k=2; $k < $length - 1; $k = $k+4) {
array_push($GLOBALS['secondsArray'], $fullArray[$k]);
}
for ($l=3; $l < $length - 1; $l = $l+4) {
array_push($GLOBALS['titlesArray'], $fullArray[$l]);
}
}
$numberoflines = getNumberOflines($fullArray);
echo "number of lines: " . $numberoflines . "<br>";
showDeadlines($fullArray);
function setFullArray($content){
$fullArray = preg_split("/(:|\n)/" ,$content); // splits the whole data txt file into small chunks, everything apart
return $fullArray;
}
function getNumberOflines($fullArray){
$numberoflines = (sizeof($fullArray) - 1)/4;
return $numberoflines;
}
function showDeadlines($fullArray){ // won't be used in final thing
$length = count($fullArray);
for ($i=0; $i < $length-1; $i = $i + 4) {
$deadlineNumber = ($i + 4)/4;
$deadlineH = $fullArray[$i];
$deadlineM = $fullArray[$i+1];
$deadlineS = $fullArray[$i+2];
$deadlineTitle = $fullArray[$i+3];
echo "deadline " . $deadlineNumber . ": " . $deadlineH . ":" . $deadlineM . ":" . $deadlineS . " titel : " . $deadlineTitle . "<br>";
}
}
function setDeadline($fullArray){
$length = count($fullArray);
for ($i=0; $i < $length-1; $i = $i + 4) {
$deadlineNumber = ($i + 4)/4;
$GLOBALS['deadlineH'] = $fullArray[$i];
$GLOBALS['deadlineM'] = $fullArray[$i+1];
$GLOBALS['deadlineS'] = $fullArray[$i+2];
$GLOBALS['deadlineTitle'] = $fullArray[$i+3];
}
}
?>
<!-- end php functions -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="startTime()">
<div id="visible">
<div id="clock"><span> </span> </div><br>
<div id="countdown"> </div>
<div id="countdown"> </div>
<div id="title"> </div>
</div>
<p>
<?php
echo json_encode($hoursArray);
echo json_encode($minutesArray);
echo json_encode($secondsArray);
echo json_encode($titlesArray);
?>
</p>
</div>
<!-- javascript scripts -->
<script>
var hoursArray = [];
var minutesArray = [];
var secondsArray = [];
var titlesArray = [];
var deadlineCounter;
function startTime() {
var now = new Date();
// year, month, day, hours, minutes, seconds, milliseconds
var deadline = new Date(2016, 11, 20, 00 ,00 ,00 ,00);
deadlineCounter = 0;
var clockH = now.getHours();
var clockM = now.getMinutes();
var clockS = now.getSeconds();
setArrays();
setInitialDeadline(deadline);
startClock('clock');
startCountdown('countdown', deadline);
var t = setTimeout(startTime, 500);
}
function setArrays(){
hoursArray= <?php echo json_encode($hoursArray); ?>;
console.log(hoursArray);
minutesArray= <?php echo json_encode($minutesArray); ?>;
console.log(minutesArray);
secondsArray= <?php echo json_encode($secondsArray); ?>;
console.log(secondsArray);
titlesArray= <?php echo json_encode($titlesArray); ?>;
console.log(titlesArray);
}
function setInitialDeadline(deadline) {
deadline.setHours(hoursArray[0]);
deadline.setMinutes(minutesArray[0]);
deadline.setSeconds(secondsArray[0]);
document.getElementById("title").innerHTML = titlesArray[0];
}
function setNewDeadline(deadline){
console.log('new deadline set');
deadline.setHours(hoursArray[deadlineCounter]);
deadline.setMinutes(minutesArray[deadlineCounter]);
deadline.setSeconds(secondsArray[deadlineCounter]);
document.getElementById("title").innerHTML = titlesArray[deadlineCounter];
}
function getCountdown(deadline){
var countdownTotal = Date.parse(deadline) - Date.parse(new Date());
var countdownS = Math.floor((countdownTotal/1000) % 60);
var countdownM = Math.floor((countdownTotal/1000/60) % 60);
var countdownH = Math.floor((countdownTotal/(1000*60*60)) % 24);
return{
'countdownTotal': countdownTotal,
'countdownH': countdownH,
'countdownM': countdownM,
'countdownS': countdownS
}
}
function startClock(id){
var clock = document.getElementById(id);
var timeInterval = setInterval(function(){
var now = new Date();
var nowH = now.getHours();
var nowM = now.getMinutes();
var nowS = now.getSeconds();
nowH = checkTime(nowH);
nowM = checkTime(nowM);
nowS = checkTime(nowS);
clock.innerHTML = nowH + ':' + nowM + ':' + nowS;
}, 1000);
}
function startCountdown(id, deadline){
var countdown = document.getElementById(id);
var timeInterval = setInterval(function(){
var t = getCountdown(deadline);
//console.log(t);
//console.log(deadlineCounter);
countdown.innerHTML = checkTime(t.countdownH) + ':' + checkTime(t.countdownM) + ':' + checkTime(t.countdownS);
if(t.countdownH == 0 && t.countdownM == 0 && t.countdownS == 0){
deadlineCounter++;
setNewDeadline(deadline);
t = getCountdown(deadline);
}
}, 1000);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
<!-- //end javascript -->
</body>
</html>
ありがとう！
同じ 'id'で'
'を2回定義しました。それは間違い。 – Banzayこれは確かに間違いでしたが、私の問題に対する答えを提供していません... –
'startTime（）'関数を 'var t = setTimeout（startTime、500）;'のように呼び出すのは正しいですか？おそらく、この行をfunc本体から削除して、次のように書く方が良いでしょう： '
' – Banzay