एक साधारण जावास्क्रिप्ट उलटी गिनती टाइमर के लिए कोड?

Question

मैं एक साधारण उलटी गिनती टाइमर का उपयोग 30 सेकंड से शुरू करना चाहता हूं जब फ़ंक्शन चलाया जाता है और 0. कोई मिलीसेकंड पर समाप्त होता है। इसे कैसे कोडित किया जा सकता है?

Answer 1

var count=30;

var counter=setInterval(timer, 1000); //1000 will  run it every 1 second

function timer()
{
  count=count-1;
  if (count <= 0)
  {
     clearInterval(counter);
     //counter ended, do something here
     return;
  }

  //Do code for showing the number of seconds here
}

टाइमर के लिए कोड एक पैराग्राफ (या पृष्ठ पर कहीं भी) में दिखाई देने के लिए, बस लाइन डालें:

<span id="timer"></span>

जहाँ आप चाहते हैं कि सेकंड दिखाई दें। फिर अपने timer()फ़ंक्शन में निम्न पंक्ति डालें , ताकि यह इस तरह दिखाई दे:

function timer()
{
  count=count-1;
  if (count <= 0)
  {
     clearInterval(counter);
     return;
  }

 document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
}

Comments

जवाब के लिए धन्यवाद। मुझे इसका उपयोग करने में कठिनाई हो रही है क्योंकि मेरा टाइमर एक पैराग्राफ में दिखाई देता है। मैं एक पैराग्राफ के बीच में 30, 29, 28 आदि कैसे डाल सकता हूं?

— माइक

मैंने अपना उत्तर आपको यह दिखाने के लिए संपादित किया कि पैराग्राफ में टाइमर कैसे प्रदर्शित किया जाए :)

— क्लिक करें

एक पैराग्राफ के बीच में (क्षैतिज रूप से): <p id = "टाइमर" शैली = "टेक्स्ट-संरेखित करें: केंद्र"> </ p>

— Alsciende

क्लिक करें, आपका टाइमर केवल "0 सेकंड" प्रदर्शित करेगा। आपको आंतरिक HTML अद्यतन को विघटन के बाद रखना चाहिए, अंतिम स्थिति में नहीं।

— Alsciende

नमस्ते मैं पृष्ठ लोड पर चल रहे टाइमर को कैसे रोक सकता हूं और इसके बजाय केवल जब एक बटन दबाया जाता है? जब टाइमर पहले से ही नीचे चला गया हो, तो बटन को दबाए जाने पर मैं इसे टाइमर कैसे रीसेट कर सकता हूं?

— क्रिफेम

Answer 2

मैंने यह स्क्रिप्ट कुछ समय पहले लिखी थी:

उपयोग:

var myCounter = new Countdown({  
    seconds:5,  // number of seconds to count down
    onUpdateStatus: function(sec){console.log(sec);}, // callback for each second
    onCounterEnd: function(){ alert('counter ended!');} // final action
});

myCounter.start();

---

function Countdown(options) {
  var timer,
  instance = this,
  seconds = options.seconds || 10,
  updateStatus = options.onUpdateStatus || function () {},
  counterEnd = options.onCounterEnd || function () {};

  function decrementCounter() {
    updateStatus(seconds);
    if (seconds === 0) {
      counterEnd();
      instance.stop();
    }
    seconds--;
  }

  this.start = function () {
    clearInterval(timer);
    timer = 0;
    seconds = options.seconds;
    timer = setInterval(decrementCounter, 1000);
  };

  this.stop = function () {
    clearInterval(timer);
  };
}

Comments

मैं दूसरे के बजाय इसका उपयोग करना पसंद करूंगा। जब मैं शुरुआती संख्या को फिर से शुरू करने के लिए अटक गया था, तो मैं देखता हूं कि यह अच्छी तरह से काम कर रहा है ..

— ओकी एरी रिनाल्डी

अगर मुझे किसी भी तरह से टाइमर को रोकने की आवश्यकता है, तो मैं यह कैसे कर सकता हूं?

— SIJ

@SIJ myCounter.stop();

— R3tep

Answer 3

अब तक के जवाबों से लगता है कि कोड को तुरंत चलाया जा रहा है। यदि आप 1000ms के लिए एक टाइमर सेट करते हैं, तो यह वास्तव में इसके बजाय लगभग 1008 होगा।

यहां बताया गया है कि आपको यह कैसे करना चाहिए:

function timer(time,update,complete) {
    var start = new Date().getTime();
    var interval = setInterval(function() {
        var now = time-(new Date().getTime()-start);
        if( now <= 0) {
            clearInterval(interval);
            complete();
        }
        else update(Math.floor(now/1000));
    },100); // the smaller this number, the more accurate the timer will be
}

उपयोग करने के लिए, कॉल करें:

timer(
    5000, // milliseconds
    function(timeleft) { // called every step to update the visible countdown
        document.getElementById('timer').innerHTML = timeleft+" second(s)";
    },
    function() { // what to do after
        alert("Timer complete!");
    }
);

Comments

स्पॉट ऑन, जैसा कि आपने कहा कि यह सही करने का एकमात्र और एकमात्र तरीका है!

— मकेला

मैंने इसे एक अंगूठे के साथ दिया था, एक प्रदर्शन के साथ - प्रदर्शन प्रयोजनों के लिए आप शायद फर्श के बजाय छत (Math.ceil ()) दिखाना चाहते हैं। जब चेतावनी फायर से पहले घड़ी 0 पर पहुंचती है तो यह वास्तव में बहुत ही भयावह होता है। (तब निश्चित रूप से अद्यतन करने के लिए एक अतिरिक्त कॉल करने की आवश्यकता है () पूर्ण होने से पहले ())

— पॉल विलियम्स

Answer 4

यहां एक और एक है अगर किसी को मिनट और सेकंड के लिए एक की जरूरत है:

    var mins = 10;  //Set the number of minutes you need
    var secs = mins * 60;
    var currentSeconds = 0;
    var currentMinutes = 0;
    /* 
     * The following line has been commented out due to a suggestion left in the comments. The line below it has not been tested. 
     * setTimeout('Decrement()',1000);
     */
    setTimeout(Decrement,1000); 

    function Decrement() {
        currentMinutes = Math.floor(secs / 60);
        currentSeconds = secs % 60;
        if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
        secs--;
        document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
        if(secs !== -1) setTimeout('Decrement()',1000);
    }

Comments

आपको सेटटाइमआउट के पहले पैरामीटर के लिए एक स्ट्रिंग पास नहीं करना चाहिए, setTimeout(Decrement, 1000)पसंद किया जाता है। stackoverflow.com/questions/6232574/…

— स्कॉटक्स

सुझाव के लिए धन्यवाद, मैंने स्क्रिप्ट को अपडेट किया है।

— लेटन एवरसन

Answer 5

// Javascript Countdown
// Version 1.01 6/7/07 (1/20/2000)
// by TDavid at http://www.tdscripts.com/
var now = new Date();
var theevent = new Date("Sep 29 2007 00:00:01");
var seconds = (theevent - now) / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
ID = window.setTimeout("update();", 1000);

function update() {
  now = new Date();
  seconds = (theevent - now) / 1000;
  seconds = Math.round(seconds);
  minutes = seconds / 60;
  minutes = Math.round(minutes);
  hours = minutes / 60;
  hours = Math.round(hours);
  days = hours / 24;
  days = Math.round(days);
  document.form1.days.value = days;
  document.form1.hours.value = hours;
  document.form1.minutes.value = minutes;
  document.form1.seconds.value = seconds;
  ID = window.setTimeout("update();", 1000);
}

<p><font face="Arial" size="3">Countdown To January 31, 2000, at 12:00: </font>
</p>
<form name="form1">
  <p>Days
    <input type="text" name="days" value="0" size="3">Hours
    <input type="text" name="hours" value="0" size="4">Minutes
    <input type="text" name="minutes" value="0" size="7">Seconds
    <input type="text" name="seconds" value="0" size="7">
  </p>
</form>

Comments

यह लिपि 90 के दशक से बहुत बुरी प्रथाओं का उपयोग करती है। और 1.5 घंटे भी 2 घंटे नहीं है। यह 1 घंटे 30 मिनट है। आप का उपयोग करना चाहिए Math.floor, नहींMath.round

— corbacho

Answer 6

बस संशोधित @ ClickUpvote का उत्तर :

आप IIFE का उपयोग कर सकते हैं (तुरंत लागू फंक्शन एक्सप्रेशन) और इसे थोड़ा और आसान बनाने के लिए पुनरावर्तन करें:

var i = 5;  //set the countdown
(function timer(){
    if (--i < 0) return;
    setTimeout(function(){
        console.log(i + ' secs');  //do stuff here
        timer();
    }, 1000);
})();

var i = 5;
(function timer(){
    if (--i < 0) return;
    setTimeout(function(){
        document.getElementsByTagName('h1')[0].innerHTML = i + ' secs';
        timer();
    }, 1000);
})();

<h1>5 secs</h1>

Answer 7

स्वीकृत उत्तर पर विस्तार करते हुए, आपकी मशीन सोने जा रही है, आदि टाइमर को काम करने में देरी कर सकते हैं। थोड़ी सी प्रोसेसिंग की कीमत पर आपको एक सही समय मिल सकता है। इससे सही समय बचेगा।

<span id="timer"></span>

<script>
var now = new Date();
var timeup = now.setSeconds(now.getSeconds() + 30);
//var timeup = now.setHours(now.getHours() + 1);

var counter = setInterval(timer, 1000);

function timer() {
  now = new Date();
  count = Math.round((timeup - now)/1000);
  if (now > timeup) {
      window.location = "/logout"; //or somethin'
      clearInterval(counter);
      return;
  }
  var seconds = Math.floor((count%60));
  var minutes = Math.floor((count/60) % 60);
  document.getElementById("timer").innerHTML = minutes + ":" + seconds;
}
</script>

Answer 8

आप शुद्ध जेएस के साथ निम्नानुसार कर सकते हैं। आपको बस सेकंड की संख्या के साथ फ़ंक्शन प्रदान करने की आवश्यकता है और यह बाकी काम करेगा।

var insertZero = n => n < 10 ? "0"+n : ""+n,
   displayTime = n => n ? time.textContent = insertZero(~~(n/3600)%3600) + ":" +
                                             insertZero(~~(n/60)%60) + ":" +
                                             insertZero(n%60)
                        : time.textContent = "IGNITION..!",
 countDownFrom = n => (displayTime(n), setTimeout(_ => n ? sid = countDownFrom(--n)
                                                         : displayTime(n), 1000)),
           sid;
countDownFrom(3610);
setTimeout(_ => clearTimeout(sid),20005);

<div id="time"></div>

Answer 9

@ लिटन एवरसन द्वारा प्रस्तुत समाधान के आधार पर मैंने घंटे, मिनट और सेकंड सहित एक काउंटर विकसित किया:

var initialSecs = 86400;
var currentSecs = initialSecs;

setTimeout(decrement,1000); 

function decrement() {
   var displayedSecs = currentSecs % 60;
   var displayedMin = Math.floor(currentSecs / 60) % 60;
   var displayedHrs = Math.floor(currentSecs / 60 /60);

    if(displayedMin <= 9) displayedMin = "0" + displayedMin;
    if(displayedSecs <= 9) displayedSecs = "0" + displayedSecs;
    currentSecs--;
    document.getElementById("timerText").innerHTML = displayedHrs + ":" + displayedMin + ":" + displayedSecs;
    if(currentSecs !== -1) setTimeout(decrement,1000);
}

Answer 10

// Javascript Countdown
// Version 1.01 6/7/07 (1/20/2000)
// by TDavid at http://www.tdscripts.com/
var now = new Date();
var theevent = new Date("Nov 13 2017 22:05:01");
var seconds = (theevent - now) / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
ID = window.setTimeout("update();", 1000);

function update() {
  now = new Date();
  seconds = (theevent - now) / 1000;
  seconds = Math.round(seconds);
  minutes = seconds / 60;
  minutes = Math.round(minutes);
  hours = minutes / 60;
  hours = Math.round(hours);
  days = hours / 24;
  days = Math.round(days);
  document.form1.days.value = days;
  document.form1.hours.value = hours;
  document.form1.minutes.value = minutes;
  document.form1.seconds.value = seconds;
  ID = window.setTimeout("update();", 1000);
}

<p><font face="Arial" size="3">Countdown To January 31, 2000, at 12:00: </font>
</p>
<form name="form1">
  <p>Days
    <input type="text" name="days" value="0" size="3">Hours
    <input type="text" name="hours" value="0" size="4">Minutes
    <input type="text" name="minutes" value="0" size="7">Seconds
    <input type="text" name="seconds" value="0" size="7">
  </p>
</form>

Answer 11

मेरा समाधान MySQL दिनांक समय स्वरूपों के साथ काम करता है और कॉलबैक फ़ंक्शन प्रदान करता है। शिकायत पर। अस्वीकरण: केवल मिनट और सेकंड के साथ काम करता है, क्योंकि यह वही है जो मुझे चाहिए था।

jQuery.fn.countDownTimer = function(futureDate, callback){
    if(!futureDate){
        throw 'Invalid date!';
    }

    var currentTs = +new Date();
    var futureDateTs = +new Date(futureDate);

    if(futureDateTs <= currentTs){
        throw 'Invalid date!';
    }


    var diff = Math.round((futureDateTs - currentTs) / 1000);
    var that = this;

    (function countdownLoop(){
        // Get hours/minutes from timestamp
        var m = Math.floor(diff % 3600 / 60);
        var s = Math.floor(diff % 3600 % 60);
        var text = zeroPad(m, 2) + ':' + zeroPad(s, 2);

        $(that).text(text);

        if(diff <= 0){
            typeof callback === 'function' ? callback.call(that) : void(0);
            return;
        }

        diff--;
        setTimeout(countdownLoop, 1000);
    })();

    function zeroPad(num, places) {
      var zero = places - num.toString().length + 1;
      return Array(+(zero > 0 && zero)).join("0") + num;
    }
}

// $('.heading').countDownTimer('2018-04-02 16:00:59', function(){ // on complete})

Answer 12

प्रदर्शन के लिए, हम अब सुरक्षित रूप से उपयोग कर सकते हैंअनुरोधनफ्रेम का उपयोग तेजी से लूपिंग के बजाय सेटइंटरवल / सेटटाइमआउट के लिए करें ।

जब कोई लूप कार्य अंतराल से अधिक समय ले रहा है, तो setInterval / setTimeout का उपयोग करते समय, ब्राउज़र पूर्ण अंतराल को जारी रखने के लिए अंतराल अंतराल का विस्तार करेगा। यह मुद्दे पैदा कर रहा है। सेटइंटरवल / सेटटाइमआउट अधिभार के मिनटों के बाद , यह टैब, ब्राउज़र या पूरे कंप्यूटर को फ्रीज कर सकता है।

इंटरनेट उपकरणों में प्रदर्शनों की एक विस्तृत श्रृंखला होती है, इसलिए मिलीसेकंड में एक निश्चित अंतराल समय को हार्डकोड करना काफी असंभव है!

प्रारंभ दिनांक युग और वर्तमान की तुलना करने के लिए दिनांक ऑब्जेक्ट का उपयोग करना । इस तरह से तेजी से सब कुछ की तुलना में, ब्राउज़र एक स्थिर में सब कुछ का ख्याल रखना होगा, है 60fps के (1000/60 = फ्रेम द्वारा 16.66ms -) एक आंख झपकाने की एक चौथाई - और अगर पाश में काम है कि अधिक से अधिक की आवश्यकता होती है , ब्राउज़र कुछ repaints छोड़ देगा।

इससे पहले कि हमारी आँखें नोट कर रही हैं ( मानव = 24FPS => 1000/24 ​​= 41.66ms = = ============)

https://caniuse.com/#search=requestAnimationFrame

/* Seconds to (STRING)HH:MM:SS.MS ------------------------*/
/* This time format is compatible with FFMPEG ------------*/
function secToTimer(sec){
  const o = new Date(0), p =  new Date(sec * 1000)
  return new Date(p.getTime()-o.getTime()).toString().split(" ")[4] + "." + p.getMilliseconds()
}

/* Countdown loop ----------------------------------------*/
let job, origin = new Date().getTime()
const timer = () => {
  job = requestAnimationFrame(timer)
  OUT.textContent = secToTimer((new Date().getTime() - origin) / 1000)
}

/* Start looping -----------------------------------------*/
requestAnimationFrame(timer)

/* Stop looping ------------------------------------------*/
// cancelAnimationFrame(job)

/* Reset the start date ----------------------------------*/
// origin = new Date().getTime()

span {font-size:4rem}

<span id="OUT"></span>
<br>
<button onclick="origin = new Date().getTime()">RESET</button>
<button onclick="requestAnimationFrame(timer)">RESTART</button>
<button onclick="cancelAnimationFrame(job)">STOP</button>