2016-12-02 8 views
1

こんにちは私は部分的に作業することができるいくつかのコードを使用して作業しようとしてきました。カウントダウンしたいと思っています明らかに明白です)、私たちはまた、その日のある特定の時刻と特定の曜日のみを表示するように設定したいと考えています。Javascript指定した日時に表示/非表示にカウントダウンする

私は以下のように動作するようになっていますので、表示する時間を設定することはできますが、特定の指定日にのみ表示されるように動作させることはできません。誰でも助けてくれますか?

var countdownMessage = "This ends in"; 
 
var now = new Date(); 
 
var time = now.getTime(); // time now in milliseconds 
 
var countdownEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 12, 59); // countdownEnd 0000 hrs 
 

 
//////////////////////////* Countdown */////////////////////////////// 
 
function getSeconds() { 
 
    var ft = countdownEnd.getTime() + 86400000; // add one day 
 
    var diff = ft - time; 
 
    diff = parseInt(diff/1000); 
 
    if (diff > 86400) { 
 
    diff = diff - 86400 
 
    } 
 
    startTimer(diff); 
 
} 
 

 
var timeInSecs; 
 
var ticker; 
 

 
function startTimer(secs) { 
 
    timeInSecs = parseInt(secs); 
 
    ticker = setInterval("tick()", 1000); 
 
    tick(); // to start counter display right away 
 
} 
 

 
function tick() { 
 
    var secs = timeInSecs; 
 
    if (secs > 0) { 
 
    timeInSecs--; 
 
    } else { 
 
    clearInterval(ticker); // stop counting at zero 
 
    //getSeconds(); // and start again if required 
 
    } 
 

 
    var hours = Math.floor(secs/3600); 
 
    secs %= 3600; 
 
    var mins = Math.floor(secs/60); 
 
    secs %= 60; 
 
    var result = ((hours < 10) ? "0" : "") + hours + " hours " + ((mins < 10) ? "0" : "") + mins + " minutes " + ((secs < 10) ? "0" : "") + secs + " seconds"; 
 
    document.getElementById("countdown").innerHTML = (countdownMessage) + " " + result; 
 
} 
 

 

 
///////////////* Display at certain time of the day *////////////////// 
 

 
//gets the current time. 
 
var d = new Date(); 
 
if (d.getHours() >= 7 && d.getHours() <= 15) { 
 
    $("#countdown").show(); 
 
} else { 
 
    $("#countdown").hide(); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<body onload="getSeconds()"> 
 

 
    <span id="countdown" style="font-weight: bold;"></span> 
 

 
</body>

[EDIT]

ただ、これに追加するには、私はこれにスクリプトの一部を変更しようとしたが、それは動作しませんでした。)

$(function() { 
$("#countdown").datepicker(
    { beforeShowDay: function(day) { 
     var day = day.getDay(); 
     if (day == 1 || day == 2) { 
      //gets the current time. 
      var d = new Date(); 
      if(d.getHours() >= 7 && d.getHours() <= 10){ 
       $("#countdown").show(); 
      } 
      else { 
       $("#countdown").hide(); 
      } 
     } else { 
      $("#countdown").hide(); 
     } 
    } 
}); 

} ; setInterval(tick, 1000)

はまた、私はと一緒に、特定の日を確認するには、以下のようにコードを更新してきたように、あなたがあなたの代わりに関数参照のsetInterval("tick()", 1000)として文字列値を渡しているsetInterval一部を除いて、すべての良いでしたが何であれ

+0

"did not work"と定義してください。エラーメッセージが表示されるか、期待どおりに動作しません。例を挙げる。 – ADyson

+0

こんにちは、それはちょうど私のコードを無視するので、開始時刻と終了時刻を設定し、これらの時刻の外にあるときは非表示にしますが、曜日を指定するコードを追加すると、日付を調整する。 – Chobbit

答えて

2

あなたが持っていた特定の時間、

var d = new Date(); 
var day = d.getDay(); 

if (day == 0 || day == 6) { 
    if (d.getHours() >= 0 && d.getHours() <= 8) { 
    $("#countdown").show(); 
    } else { 
    $("#countdown").hide(); 
    } 
} 

あなたは、以下試してみることができます

var countdownMessage = "This ends in"; 
 
var now = new Date(); 
 
var time = now.getTime(); // time now in milliseconds 
 
var countdownEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 12, 59); // countdownEnd 0000 hrs 
 

 
//////////////////////////* Countdown */////////////////////////////// 
 
function getSeconds() { 
 
    var ft = countdownEnd.getTime() + 86400000; // add one day 
 
    var diff = ft - time; 
 
    diff = parseInt(diff/1000); 
 
    if (diff > 86400) { 
 
    diff = diff - 86400 
 
    } 
 
    startTimer(diff); 
 
} 
 

 
var timeInSecs; 
 
var ticker; 
 

 
function startTimer(secs) { 
 
    timeInSecs = parseInt(secs); 
 
    ticker = setInterval(tick, 1000); 
 
    tick(); // to start counter display right away 
 
} 
 

 
function tick() { 
 
    var secs = timeInSecs; 
 
    if (secs > 0) { 
 
    timeInSecs--; 
 
    } else { 
 
    clearInterval(ticker); // stop counting at zero 
 
    //getSeconds(); // and start again if required 
 
    } 
 

 
    var hours = Math.floor(secs/3600); 
 
    secs %= 3600; 
 
    var mins = Math.floor(secs/60); 
 
    secs %= 60; 
 
    var result = ((hours < 10) ? "0" : "") + hours + " hours " + ((mins < 10) ? "0" : "") + mins + " minutes " + ((secs < 10) ? "0" : "") + secs + " seconds"; 
 
    document.getElementById("countdown").innerHTML = (countdownMessage) + " " + result; 
 
} 
 

 
$("#countdown").hide(); 
 

 
///////////////* Display at certain time of the day *////////////////// 
 

 
//gets the current time. 
 
var d = new Date(); 
 
var day = d.getDay(); 
 

 
if (day == 0 || day == 6) { 
 
    if (d.getHours() >= 0 && d.getHours() <= 8) { 
 
    $("#countdown").show(); 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<body onload="getSeconds()"> 
 

 
    <span id="countdown" style="font-weight: bold;"></span> 
 

 
</body>

+0

フィードバックをお願いして申し訳ありませんが、私はこれを実装し、金曜日に週末前に遊んでいましたが、動作していないようです。スニペットを実行すると動作しないので、何が起こっているのか分かりませんに。私がコピーしてあなたの全体のコードを貼り付けてみると、すぐにコードパラメータの外にある午前8時以降のタイマーが表示されます。 3それはカウントダウンを表示していたが、それ以外の場合は全体を無視しているように隠れていなかった。それ以上の助けをお願いしますか?ありがとう – Chobbit

+0

私のコードを貼り付けてコピーするときは、 'if(day == 0 || day == 6)'で述べた日を変更し、 'if(d.getHours()> = 0 && d.getHours()<= 8){'。 0日は日曜日です – Aruna

+0

申し訳ありませんが、私は非常に明確ではありませんでしたので、金曜日(5日目)約2時にコードを取りましたので、コードを次のように変更しました。 :if(day == 2 || day == 3)そしてさらに変更されました:if(d.getHours()> = 18 && d.getHours()<= 19)これはカウントダウンを隠したはずです。それは火曜日の午後6時と火曜日の午後7時の間にカウントダウンを表示するだけだったので、しかしそれはしませんでした。私は今同じ結果を出して同じコードをもう一度試しました。私は本当にあなたに評判と答えの印を与えたいが、それは私のために働いていない、それはあなた自身のために働いていますか?ありがとう – Chobbit

関連する問題