0

カウントダウン タイマーの php スクリプトからの出力を html で表示するのに問題があります。所要時間はスルーで入力します。

<div id="countdown">                                                                <!--        Display input for the kitchen timer     -->
                 <form method="post" action="display_timer()">
                        <br>
                        <br>
                        <h1>Enter the hours required:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="hours"><br></h1>
                        <h2>Enter the Minutes required:&nbsp;&nbsp;<input type="text" name="minutes"><br></h2>
                        <h3>Enter the Seconds required:&nbsp;&nbsp;<input type="text" name="seconds"><br></p>
                        <br>
                        <br>
                   <h4><input type="submit" name="Submit" value="Submit"></h4>
                 </form>

            </div>

以下のajaxを使用してphpスクリプトから呼び出されます

function display_timer(){

        var myAjax9 = new XMLHttpRequest;
        myAjax9.open("GET", "timer.php");  
        myAjax9.onreadystatechange =    function(){
            if (myAjax9.readyState == 4 && myAjax7.status == 200){

                document.getElementById("timerdisplay").innerHTML = hours+" hours, "+minutes+" minutes, "+seconds+" seconds";
                IT=window.setTimeout( "setcountDown()", 10 );
                if (hours == '00' && minutes == '00' && seconds == '00') { 
                    seconds = "00"; 
                    window.clearTimeout(IT);
                    window.alert("Time is up. Press OK to continue.");
                }   
            }
        }
}

と表示されます

 <div id="timerdisplay"> <?php echo "$hoursLeft hours, $minutesLeft minutes, $secondsLeft seconds";?></div>     <!--       Display output for the kitchen timer     -->

必要に応じて、タイマー php コードを追加できます。

私はphpとAjaxを初めて使用するので、絶望的に間違ったことをしている可能性がありますか?

4

1 に答える 1

0

時間データを PHP に送信する必要がある場合は、これを修正する必要があります。

  • フォームのAction属性には、送信されたデータを受け取るフォームの URL が含まれているはずです。
  • ただし: データを ajax でスローする場合は、 action="display_timer()"forを変更し、関数の最後の行にonsubmit="return display_timer()"a を追加します (これにより送信がキャンセルされるため、ajax を使用できます)。return falsedisplay_timer

  • また、データが ajax 呼び出しをスローして取得される場合は、次のtimer.phpようなもの (JSON 式) を送信する必要があります。

    &lt;?php echo "{\"hours\":\"$hoursLeft\", \"minutes\":\"$minutesLeft\", \"seconds\":\"$secondsLeft\"}";?&gt;

次に、display_timer関数は次のようになります。

function display_timer(){
    var cParams =   "hours=" + escape(document.getElementsByName("hours")[0].value) +
                    "&minutes=" + escape(document.getElementsByName("minutes")[0].value) +
                    "&seconds=" + escape(document.getElementsByName("seconds")[0].value);

    var myAjax9 = new XMLHttpRequest();
    myAjax9.open("GET", "timer.php" + "?" + cParams);  
    myAjax9.onreadystatechange =    function(){
        if (myAjax9.readyState == 4 && myAjax7.status == 200){
            var oMyTime = JSON.parse(myAjax9.responseText);
            oMyTime.totalSeconds = oMyTime.hours*3600+oMyTime.minutes*60+oMyTime.seconds;
            oMyTime.toString = function(){
                return oMyTime.hours+" hours, "+oMyTime.minutes+" minutes, "+oMyTime.seconds+" seconds"
            };

            var oDisplay = document.getElementById("timerdisplay");
            oDisplay.innerHTML = oMyTime.toString();

            var fUpdateTimer = function(){
                if(oMyTime.totalSeconds>0){
                    oMyTime.totalSeconds--;
                    oMyTime.hours = Math.floor(oMyTime.totalSeconds/3600); 
                    oMyTime.minutes = Math.floor((oMyTime.totalSeconds-oMyTime.hours*3600)/60); 
                    oMyTime.seconds = oMyTime.totalSeconds%60; 
                    oDisplay.innerHTML = oMyTime.toString();
                }else{
                    window.clearInterval(IT);
                    window.alert("Time is up. Press OK to continue.");
                }
            };
            var IT=window.setInterval(fUpdateTimer, 1000);
        }
    }
    return false;
}//END display_timer()
于 2012-12-09T16:04:23.387 に答える