PHPとjavascriptを融合させたカウントダウンの作り方
- PHPとjavascriptを組み合わせて、サーバー時刻を使ったカウントダウンを作成する方法について教えてください。
- 現在、利用しているjavascriptのコードをPHPで取得したサーバー時刻に変更し、カウントダウンを実現させたいと考えています。
- 実際に試したところ、PHPで取得した秒でカウントダウンが止まってしまいます。どのように対処すればよいでしょうか？
- ベストアンサー
PHPとjavascriptを融合させたカウントダウンを作りたい
PHPとjavascriptを融合させたカウントダウンを作りたい 宜しくお願い致します。 現在、アクセスした時刻から時計が「0秒」を指すまでのカウントダウンを 表示させているのですが、 これを、PHPで取得したサーバー時刻を使ったカウントダウンにしたい と思っています。 現在、利用しているjavascriptは、 －－－－－－－－－－－－－－－－ <script type="text/javascript"> <!-- function tokei() { date=new Date(); second=date.getSeconds(); var str=60-second; document.getElementById("tokei").innerHTML=str; } //--> </script> <body onload="window.setInterval('tokei()',100)"> －－－－－－－－－－－－－－－－ なのですが、これを、 －－－－－－－－－－－－－－－－ <script type="text/javascript"> <!-- function tokei() { second=<?php print date(s) ?>; var str=60-second; document.getElementById("tokei").innerHTML=str; } //--> </script> <body onload="window.setInterval('tokei()',100)"> －－－－－－－－－－－－－－－－ というイメージでカウントダウンさせたいのですが、 何か方法はございますでしょうか？それともPHPを利用する時点で 不可能な話でしょうか？ (試しに後述のスクリプトを実践してみた所、案の定PHPで取得した秒で カウントダウンは止まってしまいます) それでは宜しくお願い致します。
- di-keichu
- お礼率83% (94/112)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<script type="text/javascript"> <!-- var second=<?php print date(s) ?>; function tokei() { var str=second; document.getElementById("tokei").innerHTML=str; second -= 1; if (second<= 0) window.clearInterval(); } //--> </script> <body onload="window.setInterval('tokei()',1000)">
関連するQ&A
- PHP内にJavaScript
下記のようなはじめての訪問者に対してようこそ！と表示するJavaScriptをPHP内で動かすにはどのように記入すればよいのでしょうか？ ==================================================== <script language="JavaScript"> var key = "freekeyword"; var n = 0; var cookies = document.cookie.split("; "); for(var i=0;i<cookies.length;i++){ var str = cookies[i].split("="); if(str[0] == key){ // n = str[1]; } } window.onload = function() { if(n == 0){ document.getElementById('welcome').innerHTML = 'ようこそ！'; } n++; setCookie(key,n); } function setCookie(key,val){ document.cookie = key + "=" + escape(val) + "; "; } </script> ==================================================== このスクプリトを下記<head>内にどのように記入すればよいので しょうか？ PHPの文法などほとんど分からないレベルなのでそもそも質問 自体間違ってるかもしれませんがPHP内で同様の動作をさせたい のです。よろしくお願いします ==================================================== <?php echo ' <html> <head> </head>'; echo ' <body> <div id="welcome"></div> </body></html>'; ?> ====================================================
- ベストアンサー
- PHP
- ブラウザの「戻る」を押しても有効なカウントダウン
ブラウザの「戻る」を押しても有効なカウントダウン PHPで取得した時間を使ってカウントダウンを表示させるプログラムに 挑戦中なのですが、今の知識で解決出来ない問題が出ているのでご質問させて 頂きました。 PHPで取得した時間が45秒だった場合、残り45秒からカウントダウンが 始まります。javascriptにこの「45」を読み込ませて、45秒から 1秒ずつリアルタイムに秒が減っていくという形です。 0秒が過ぎたら-1秒、-2秒と進んでいきます。 下記のスクリプトで、それが実現出来ました。 －－－－－－－－－－－－－－－－－－－－－－ <script type="text/javascript"> <!-- var phpsecond=<?php print date(s) ?>; var countSecond=60; var nowSecond=second; function countdown(){ document.getElementById('countdown').innerHTML=countSecond-nowSecond; nowSecond++; setTimeout('countdown()',1000); } //--> </script> </head> <body onload="countdown()"> －－－－－－－－－－－－－－－－－－－－－－－ ただ問題があって、ずっとこのページを見ている状態であれば 大丈夫なのですが、 ページを移動させた後、ブラウザの「戻る」でこのページに戻ると、 移動していた間の時間が止まってしまい、 ページを移動する直前の秒からカウントダウンが再開してしまいます。 これを何とか、ページに戻ってきた時にすぐ正しい秒を表示し直すように 命令したいのですが可能でしょうか？ 私なりに考えたのが、 PHPの時間とjavascript時間との差をjavascriptに変数で覚えさせれば 常に正しい時間が表示出来るのかなと思いました。 良い記述方法がございましたら、ご教授頂けますと幸いです。 ※それから、このページに戻った際、カウントダウンが0秒を切っていた場合は ページを自動的にリロードするようにしたいです。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- リアルタイムに時計を表示するときのsetIntervalについて
いつもお世話になっています。 いつも以上に稚拙な質問で申し訳ないのですが、ご助力願います。 <html> <head> <script type="text/javascript"> <!-- var today = new Date(); window.onload = function dispTime(){ document.getElementById("showTime").innerHTML = today.getFullYear() + "/" + (today.getMonth()+1) + "/" + today.getDate() + " " + today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); setInterval('dispTime()',1000); } //--> </script> </head> <body> <div id="showTime"></div> </body> </html> できるだけ<body onload="">を使いたくないので、window.onloadにしてあります。 イメージとしては、document.getElementById("showTime").innerHTMLでshowTimeに時間が表示され、setIntervalで再度disptimeが呼ばれ、という無限ループになればよいと考えてこのソースになりました。 ただ現状は、ロード時に時刻が表示され、そのまま動きません。 たぶんsetIntervalの場所とか使い方がおかしいような気がするのですが、どうもよくわかりません。 参考にしたサイトによってsetInterval("dispTime()"...だったり setInterval("disptime"...だったりと記述がバラバラで、 ほとんどのところでは、body onload="setInterval("...とonload扱いでした。 body onloadは使わずに、1秒ごとに動く時刻表示をするには、どこを直せばよいでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- カウントダウンタイマー 終了後別ページジャンプ
はじめてで 勉強中でカウントダウンタイマーをJavaScriptだけで作ってみました。 <script> window.onload=function countDown(){ setInterval(function countDown(){ //自分で記述する y = 2022;//年 m = 2;//月 d = 13;//日 xday = new Date(y,m-1,d,00,00,00); today = new Date(); setTime = xday.getTime() - today.getTime(); //ミリ秒を日時に変換 days = Math.floor(setTime / 86400000); jikan = Math.floor((setTime % 86400000) / 3600000); hunn = Math.floor(((setTime % 86400000) / 60000) % 60); byou = Math.floor(((setTime % 86400000) / 1000) % 60 % 60); miri = Math.floor((setTime % 86400000) % 60 % 60 % 100); //0-9には0を付け足す if(jikan<10){jikan = '0' + jikan;} if(hunn<10){hunn = '0' + hunn;} if(byou<10){byou = '0' + byou;} if(miri<10){miri = '0' + miri;} //出力 if(xday > today){ var str = "残りあと"+"<span>"+days+"</span>"+"日"+"と"+"<span>"+jikan+"</span>"+"："+"<span>"+hunn+"</span>"+"："+"<span>"+byou+"</span>"+"："+"<span>"+miri+"</span>"+"<br />"; document.getElementById("countDown").innerHTML=str; }else{ var str = "販売は終了致しました"; document.getElementById("countDown").innerHTML=str; window.location.href = 'https://www.yahoo.co.jp/'; } },10); } </script> カウント終了後には別ページに5秒後にジャンプさせたいです。 上記のコードをWPに実装してページを開いてみると、 カウントダウンは動きます。 ただ、終了後に別ページにジャンプしません。 カウント終了後、何回もリロードされて、やっとページがジャンプしたと思ったら「サーバーエラー」となり画面が真っ白になります。 window.location.href = 'https://www.yahoo.co.jp/'; ここの書き方が間違っている・・と思うのですが、どうすれば正常に動くのかがわかりません。 アドバイスをお願いできないでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- JavaScriptからphp関数の呼び出し
javaScriptで1秒毎にphpの関数を呼び出しているのですが、 php側で、returnしている日時が動的に表示されません。 何がいけないのか教えて頂けますでしょうか？ 色んな参考ページを見ると、phpの関数で動的に 動かせると書いてあるのですが、動的になりません。 -------------------------------------------------------- ＜jsphptest.htmlソース＞ <html> <head> <script type="text/javascript"src="jsphptest.php"></script> <script language="javascript"> <!-- function time() { //JavaScriptで日時表示 var now = new Date(); mon = now.getMonth()+1; day = now.getDate(); hou = now.getHours(); min = now.getMinutes(); sec = now.getSeconds(); year = now.getYear(); if (year < 2000) { year += 1900; } if (mon <= "9"){mon = "0" + mon;}; if (day <= "9"){day = "0" + day;}; if (hou <= "9"){hou = "0" + hou;}; if (min <= "9"){min = "0" + min;}; if (sec <= "9"){sec = "0" + sec;}; document.form1.j_tokei.value= year +"/"+ mon +"/"+ day +" "+ hou +":"+ min +":"+ sec; //PHP関数の呼び出し document.form1.p_tokei.value= php_time(); //1秒毎 setTimeout('time()',1000); } // --> </script> </head> <body onLoad="time();"> <form name="form1" mathod=post> JavaScript日時<input type="text" name="j_tokei" size=25><br> PHP日時<input type="text" name="p_tokei" size=25> </form> </body> </html> -------------------------------------------------------- ＜jsphptest.phpソース＞ <?php $str .= "function php_time(){"; $str .= "return('".date('Y-m-d H:i:s')."');"; $str .= "}"; echo $str; ?>
- ベストアンサー
- JavaScript
- javascriptカウントダウン終了後別ページへ
javascriptでカウントダウン終了後に別ページに飛ばすリンクを表示したいのですが、どのようにすれば教えていただけますでしょうか？ 下記スクリプトではカウントダウン終了時に「終了しました」と表示されます。 その「終了しました」にリンクを貼りたいです。 <script language="JavaScript" type="text/javascript"> function CountdownTimer(elm,tl,mes){ this.initialize.apply(this,arguments); } CountdownTimer.prototype={ initialize:function(elm,tl,mes) { this.elem = document.getElementById(elm); this.tl = tl; this.mes = mes; },countDown:function(){ var timer=''; var today=new Date(); var day=Math.floor((this.tl-today)/(24*60*60*1000)); var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000)); var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60; var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60; var milli=Math.floor(((this.tl-today)%(24*60*60*1000))/10)%100; var me=this; if( ( this.tl - today ) > 0 ){ if (day) timer += '<span class="day">'+day+'：</span>'; if (hour) timer += '<span class="hour">'+hour+'：</span>'; timer += '<span class="min">'+this.addZero(min)+'：</span><span class="sec">'+this.addZero(sec)+'：</span><span class="milli">'+this.addZero(milli)+'</span>'; this.elem.innerHTML = timer; tid = setTimeout( function(){me.countDown();},10 ); }else{ this.elem.innerHTML = this.mes; return; } },addZero:function(num){ return ('0'+num).slice(-2); } } function CDT(){ var tl = new Date('2013/2/1 00:00:00'); var timer = new CountdownTimer('CDT',tl,'終了しました'); timer.countDown(); } window.onload=function(){ CDT(); } </script>
- ベストアンサー
- JavaScript
- javascriptで2箇所のphpの関数を取得したいのです。
javascriptで2箇所のphpの関数を取得したいのです。 見よう見まねでやっている初心者です。よろしくお願いします。 javascriptにてphpの関数をよびだしてhtmlのinput type="text"に値を出力しようとしています。 ２か所のphp を下記のようにhtmlに書いて取得しようとしたのですがどちらか一方しか取得できません。 なんとか両方を読み込めるようにできないでしょうか？分かりにくい質問かと思いますので例を書いて見ましたのでどうかよろしくお願いいたします。 (例） <script type="text/javascript" src="../data/zzz.php?aaa=abc" ></script> <script type="text/javascript" src="../../../data/xxx.php?bbb=abc" ></script> 上記のように書いても片方しか取得しないようです。 以下../dataのzzz.phpのphｐです。 <?php $aaa = $_GET['aaa']; header("Content-type: application/x-javascript"); echo "window.onload = function () {"; if ($aaa== 'abb') {echo "document.getElementById(\"xxx\").value=100;","document.getElementById(\"yyy\").value=1;";} elseif ($aaa == 'abc') {echo "document.getElementById(\"tanka\").value=120;","document.getElementById(\"yyy\").value=2;";} echo "}"; ?> 以下../../../dataのxxx.phpのphｐです。（例） <?php $bbb = $_GET['bbb']; header("Content-type: application/x-javascript"); echo "window.onload = function () {"; if ($bbb== 'abb') {echo "document.getElementById(\"zzz\").value=50;","document.getElementById(\"vvv\").value=10;";} elseif ($bbb == 'abc') {echo "document.getElementById(\"tanka\").value=51;","document.getElementById(\"vvv\").value=20;";} echo "}"; ?> 以上２か所のディレクトリのphpを取得したいのですが、これはできない事なのでしょうか？ちがうディレクトリから取得しなければ更新作業が大変になってしまうのです。どうかよろしくお願いいたします。
- ベストアンサー
- PHP
- javascript カウントダウンについて
下記のようなjavascript でカウントダウンをしています。 ですが、指定日を過ぎると、00 表示になってしまいます。 これを指定日の指定時間を過ぎたら、-- という表示に変更し、 また、bodyないのタグにidを使って「指定日を過ぎました。」という 表示を出したいのですが、ご教授ねがいます。 <script language="javascript"> <!-- function countdown(year, month, day, hour, minute) { Today = new Date(); Todays_Year = Today.getFullYear() - 2000; Todays_Month = Today.getMonth() + 1; Todays_Day = Today.getDate(); Todays_Hour = Today.getHours(); Todays_Date = (new Date(Todays_Year, Todays_Month, Todays_Day, Todays_Hour, Today.getMinutes(), Today.getSeconds())).getTime(); Target_Date = (new Date(year, month, day, hour, minute, 00)).getTime(); Time_Left = Math.round((Target_Date - Todays_Date) / 1000); if(Time_Left < 0) Time_Left = 0; days = Math.floor(Time_Left / (60 * 60 * 24)); Time_Left %= (60 * 60 * 24); hours = Math.floor(Time_Left / (60 * 60)); Time_Left %= (60 * 60); minutes = Math.floor(Time_Left / 60); Time_Left %= 60; seconds = Time_Left; cDay = document.getElementById("counter_day"); cHour = document.getElementById("counter_hour"); cMin = document.getElementById("counter_min"); cSec = document.getElementById("counter_sec"); cDay.innerHTML = GetFormated(days); cHour.innerHTML = GetFormated(hours); cMin.innerHTML = GetFormated(minutes); cSec.innerHTML = GetFormated(seconds); //Recursive call, keeps the clock ticking. setTimeout('countdown(' + year + ',' + month + ',' + day + ',' + hour + ',' + minute + ');', 1000); } function GetFormated(i) { if(i<10) { return "0"+i; } return i; } //--> </script> </head> <body> <span id="counter_day"></span> <span id="counter_hour"></span> <span id="counter_min"></span> <span id="counter_sec"></span> <script language="JavaScript"> <!-- countdown('07,11,05,21,00'); //-->
- 締切済み
- JavaScript
- javascriptで困っています。教えてください
以下のようにjavascriptの内容を書いた外部のテキストファイルを読み込んで、実行しようとしているのですが、うまくいきません。普通にjavascriptを読み込むのは分かっているのですが、このような方法ができないのでしょうか？よろしくお願いします。 <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> </head> <body> <div id="jsbox"></div> <script type="text/javascript"> var jsbox = document.getElementById("jsbox"); //非同期通信///////////////////////////////////////////// var xmlHttp; loadText(); function loadText(){ if (window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); }else{ if (window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else{ xmlHttp = null; } } xmlHttp.onreadystatechange = checkStatus; xmlHttp.open("GET", "http://xxxxxxxxxxxx/js_test.txt", true); xmlHttp.send(null); } function checkStatus(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ var str = xmlHttp.responseText;alert(str); jsbox.innerHTML = str; test_js(); } } ///////////////////////////////////////////////////////////////// </script> </body> </html> テキストファイルをhttp://xxxxxxxxxxxx/js_test.txtに置き、テキストファイルの内容が <script type="text/javascript"> function test_js(){ alert("test"); } </script>
- 締切済み
- JavaScript
- javascript php 連携
よろしくお願いします。 javascriptの『onchange』値をPHPの変数に入れたいと苦戦しています。 <html> <head> <script type="text/javascript"> function hoge1(){ var x = $('str1').options[$('str1').selectedIndex].text; やりたいことはここでPHPの変数『list_a』にjavascriptの変数『x』の値を入れたいです。 } </script> </head> <body> ここに結果表示 <?= $list_a; ?> <select id="str1" name="str1" onchange="hoge1()"> <option>hoge1</option> <option>hoge2</option> <option>hoge3</option> </select> </body> </html> よろしくお願いいたします。 ちなみにAjaxは全くわかりませんのですいません。。。
- ベストアンサー
- PHP
お礼
解決致しましたのでご報告です。 下記のようなスクリプトを組む事でカウントダウンが行えるようになりました。 <script type="text/javascript"> <!-- var phpsecond=<?php print date(s) ?>; var nowsecond=phpsecond; var secondcount=60; function tokei(){ document.getElementById('tokei').innerHTML=secondcount-nowsecond; nowsecond++; setTimeout('tokei()',1000); } //--> </script> <body onload="tokei()">
補足
ご回答ありがとうございます。 こちら、実践してみたところ、リロードする度にカウントダウンの残り秒数が増えて しまいます。それと、放置しておくと際限なく秒数がマイナスで増えていくのですが、 できれば、 2秒 → 1秒 → 0秒 → 59秒 → 58秒 …と、 ループさせたいのですが可能でしょうか。