0

私はJavascriptが初めてです。このJavascriptタイマーをネットから入手しました。特定のPHP変数が設定されている場合、タイマーを停止して停止した時間をデータベースに挿入しようとしていますが、タイマーを停止する方法がわかりません。これがコードです。この投稿を見ましたが、残念ながらまだ機能しません。タイマー機能の実行を停止するには? ありがとう！

<script type="text/javascript">
/**********************************************************************************************
* CountUp script by Praveen Lobo (http://PraveenLobo.com/techblog/javascript-countup-timer/)
* This notice MUST stay intact(in both JS file and SCRIPT tag) for legal use.
* http://praveenlobo.com/blog/disclaimer/
**********************************************************************************************/
function CountUp(initDate, id){
    this.beginDate = new Date(initDate);
    this.countainer = document.getElementById(id);
    this.numOfDays = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
    this.borrowed = 0, this.years = 0, this.months = 0, this.days = 0;
    this.hours = 0, this.minutes = 0, this.seconds = 0;
    this.updateNumOfDays();
    this.updateCounter();
}



CountUp.prototype.updateNumOfDays=function(){
    var dateNow = new Date();
    var currYear = dateNow.getFullYear();
    if ( (currYear % 4 == 0 && currYear % 100 != 0 ) || currYear % 400 == 0 ) {
        this.numOfDays[1] = 29;
    }
    var self = this;
    setTimeout(function(){self.updateNumOfDays();}, (new Date((currYear+1), 1, 2) - dateNow));
}

CountUp.prototype.datePartDiff=function(then, now, MAX){
    var diff = now - then - this.borrowed;
    this.borrowed = 0;
    if ( diff > -1 ) return diff;
    this.borrowed = 1;
    return (MAX + diff);
}

CountUp.prototype.calculate=function(){
    var currDate = new Date();
    var prevDate = this.beginDate;
    this.seconds = this.datePartDiff(prevDate.getSeconds(), currDate.getSeconds(), 60);
    this.minutes = this.datePartDiff(prevDate.getMinutes(), currDate.getMinutes(), 60);
    this.hours = this.datePartDiff(prevDate.getHours(), currDate.getHours(), 24);
    this.days = this.datePartDiff(prevDate.getDate(), currDate.getDate(), this.numOfDays[currDate.getMonth()]);
    this.months = this.datePartDiff(prevDate.getMonth(), currDate.getMonth(), 12);
    this.years = this.datePartDiff(prevDate.getFullYear(), currDate.getFullYear(),0);
}

CountUp.prototype.addLeadingZero=function(value){
    return value < 10 ? ("0" + value) : value;
}

CountUp.prototype.formatTime=function(){
    this.seconds = this.addLeadingZero(this.seconds);
    this.minutes = this.addLeadingZero(this.minutes);
    this.hours = this.addLeadingZero(this.hours);
}

CountUp.prototype.updateCounter=function(){
    this.calculate();
    this.formatTime();
    this.countainer.innerHTML =
        " <strong>" + this.hours + "</strong> <small>" + (this.hours == 1? ":" : ":") + "</small>" +
        " <strong>" + this.minutes + "</strong> <small>" + (this.minutes == 1? ":" : ":") + "</small>" +
        " <strong>" + this.seconds + "</strong> <small>" + "</small>";
    var self = this;
    setTimeout(function(){self.updateCounter();}, 1000);
}
<?php if(isset($results['calltime'])) {$timevar= date("M d, Y H:i:s",strtotime($results['calltime']));}?> 
window.onload=function(){ new CountUp('<?php echo $timevar; ?>', 'counter'); }

//I need a function to stop timer if (isset($results['firstcall_time']))


</script>
4

4 に答える 4

0

カウンターを停止する方法は次のとおりです。

「CountUp.prototype.updateCounter=function(){」の前にこの数行を挿入しました

var today=new Date(); 
var start=new Date(2013,10,25,5,35,0); //example: Stop date
diff =  start-today;

次に、updateCounter 関数内で、setTimeout を直接呼び出す代わりに、条件を追加しました。 

 if ( ( (this.seconds==0) && (this.minutes==0) (this.hours==0) && (this.days==0) ) || (diff <=0) )  { //on the fly (page is laready open with the counter running) or onload 
    //Time's up!
    } else {
        setTimeout(function(){self.updateCounter();}, 1000);
    }

したがって、新しいコードは次のようになります。

var today=new Date(); 
var start=new Date(2013,10,25,5,35,0); 
diff =  start-today; 

Counter.prototype.updateCounter=function(){
this.calculate();
this.formatTime();
this.countainer.innerHTML = " <strong>" + this.seconds + "</strong> " + (this.seconds == 1? ":" : ":")+
    " <strong>" + this.minutes + "</strong> " + (this.minutes == 1? ":" : ":")+
    " <strong>" + this.hours + "</strong> " + (this.hours == 1? ":" : ":")+
    " <strong>" + this.days + "</strong> " + (this.days == 1? ":" : "");
var self = this;
if ( ( (this.seconds==0) && (this.minutes==0) (this.hours==0) && (this.days==0) ) || (diff <=0) )  { //on the fly or onload 
//Time's up!
} else {
setTimeout(function(){self.updateCounter();}, 1000);
}
}

それが役立つことを願っています。

シャムス

于 2013-11-25T02:56:29.817 に答える
0

行で：

setTimeout(function(){self.updateNumOfDays();}, (new Date((currYear+1), 1, 2) - dateNow));

と

setTimeout(function(){self.updateCounter();}, 1000);

再帰が使用されていることがわかります。したがって、タイマーは実行され続けます。

したがって、タイマーを停止したい場合は、次のようにします。

 var flag = true;
<?php if (isset($results['firstcall_time'])){ ?>
  flag = false;
<?php } ?>

そして、スクリプトを次のように少し変更します。

 setTimeout(function(){if(flag){self.updateNumOfDays();}else{//write code to cleartimeout}}, (new Date((currYear+1), 1, 2) - dateNow));//check for the flag before recursion

と

setTimeout(function(){if(flag){self.updateCounter();}}else{//write code to cleartimeout}, 1000);
于 2013-02-21T13:12:13.810 に答える
0

彼はタイマーを使っていません。彼は setTimeout を使用していますが、実行関数は同じメソッドであり、一種の再帰のようなものです (厳密に言えば、そうではありません)。それで、それは進んでいます。これが理にかなっていることを願っています。

タイマーは次のように実装されます。

// Start
var timerId = setInterval(func() {
    // your code to execute
}, 5000);

// Stop
clearInterval(timerId);

CountUp に stop メソッドを追加しました。したがって、これで次のことができるはずです。

// Start
var counter = new CountUp(new Date(), 'div');

// Stop
counter.stop();

これがコードです。私はここに手作業でコーディングしただけなので、タイプミスや何かが機能しない場合は、コメントを投稿してください.

function CountUp(initDate, id){
    this.beginDate = new Date(initDate);
    this.countainer = document.getElementById(id);
    this.numOfDays = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
    this.borrowed = 0, this.years = 0, this.months = 0, this.days = 0;
    this.hours = 0, this.minutes = 0, this.seconds = 0;

    this.daysTimerId = setInterval(this.updateNumOfDays(), this.getDaysTimerInterval());
    this.updateTimerId = setInterval(this.updateCounter(), 1000);
}

CountUp.prototype.stop=function(){
    clearInterval(this.daysTimerId);
    clearInterval(this.updateTimerId);
}

CountUp.prototype.getDaysTimerInterval=function(dt){
    var dateNow = dt || new Date();
    return (new Date((dateNow.getFullYear()+1), 1, 2) - dateNow));
}

CountUp.prototype.updateNumOfDays=function(){
    var dateNow = new Date();
    var currYear = dateNow.getFullYear();
    if ( (currYear % 4 == 0 && currYear % 100 != 0 ) || currYear % 400 == 0 ) {
        this.numOfDays[1] = 29;
    }
//    var self = this;
//    setTimeout(function(){self.updateNumOfDays();}, self.getDaysTimerInterval(dateNow));
}

CountUp.prototype.datePartDiff=function(then, now, MAX){
    var diff = now - then - this.borrowed;
    this.borrowed = 0;
    if ( diff > -1 ) return diff;
    this.borrowed = 1;
    return (MAX + diff);
}

CountUp.prototype.calculate=function(){
    var currDate = new Date();
    var prevDate = this.beginDate;
    this.seconds = this.datePartDiff(prevDate.getSeconds(), currDate.getSeconds(), 60);
    this.minutes = this.datePartDiff(prevDate.getMinutes(), currDate.getMinutes(), 60);
    this.hours = this.datePartDiff(prevDate.getHours(), currDate.getHours(), 24);
    this.days = this.datePartDiff(prevDate.getDate(), currDate.getDate(), this.numOfDays[currDate.getMonth()]);
    this.months = this.datePartDiff(prevDate.getMonth(), currDate.getMonth(), 12);
    this.years = this.datePartDiff(prevDate.getFullYear(), currDate.getFullYear(),0);
}

CountUp.prototype.addLeadingZero=function(value){
    return value < 10 ? ("0" + value) : value;
}

CountUp.prototype.formatTime=function(){
    this.seconds = this.addLeadingZero(this.seconds);
    this.minutes = this.addLeadingZero(this.minutes);
    this.hours = this.addLeadingZero(this.hours);
}

CountUp.prototype.updateCounter=function(){
    this.calculate();
    this.formatTime();
    this.countainer.innerHTML =
        " <strong>" + this.hours + "</strong> <small>" + (this.hours == 1? ":" : ":") + "</small>" +
        " <strong>" + this.minutes + "</strong> <small>" + (this.minutes == 1? ":" : ":") + "</small>" +
        " <strong>" + this.seconds + "</strong> <small>" + "</small>";
//    var self = this;
//    setTimeout(function(){self.updateCounter();}, 1000);
}
于 2013-02-21T13:12:21.130 に答える
0

メソッドupdateCounter()には、次のステートメントがあります

setTimeout(function(){self.updateCounter();}, 1000);

最初に次のようにします。

myTimer = setTimeout(function(){self.updateCounter();}, 1000);

タイマーを停止したいときはいつでもこのメソッドを呼び出します。

clearTimeout(myTimer);

そして時間を記録します。カウントにはsetTimeoutを使用するため、contdownを停止するにはclearTimeoutを使用する必要があります。

タイムアウトのクリアを参照してください

乾杯

于 2013-02-21T13:08:16.473 に答える