একটি সাধারণ জাভাস্ক্রিপ্ট কাউন্টডাউন টাইমার জন্য কোড?

Question

আমি একটি সাধারণ কাউন্টডাউন টাইমারটি ব্যবহার করতে চাই যখন ফাংশনটি চালিত হয় এবং 30 এ শেষ হয় যখন থেকে 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

উত্তর করার জন্য ধন্যবাদ. এটি ব্যবহার করতে আমার সমস্যা হচ্ছে কারণ আমার টাইমারটি অনুচ্ছেদে উপস্থিত হয়েছে appears আমি কীভাবে 30, 29, 28 ইত্যাদি অনুচ্ছেদের মাঝখানে রাখতে পারি?

— মাইক

অনুচ্ছেদে টাইমারটি কীভাবে প্রদর্শন করতে হবে তা দেখানোর জন্য আমি আমার উত্তর সম্পাদনা করেছি :)

— ক্লিক করুন আপভোট

একটি অনুচ্ছেদ মাঝখানে (অনুভূমিকভাবে): <পি আইডি = "টাইমার" শৈলী = "টেক্সট প্রান্তিককরণ: কেন্দ্র"> </ span>

— Alsciende

ক্লিক করুন, আপনার টাইমার কেবল "0 সেকেন্ড" প্রদর্শন করবে। আপনার হ্রাসের পরে অভ্যন্তরীণ এইচটিএমএল আপডেটটি করা উচিত, শেষের ক্ষেত্রে নয়।

— অ্যালসিএন্ডে

হাই, আমি কীভাবে টাইমারটিকে পৃষ্ঠা লোডে চলতে এবং তার পরিবর্তে কেবল তখন একটি বোতাম টিপতে পারি? এছাড়াও টাইমারটি বন্ধ হয়ে যাওয়ার পরে যখন একটি বোতাম টিপানো হয় তখন আমি কীভাবে এটি টাইমারটিকে পুনরায় সেট করতে পারি?

— ক্রিম্ফাম

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

আমি অন্যের পরিবর্তে এটি ব্যবহার করতে পছন্দ করব। আমি যখন প্রথম নম্বরটি পুনরায় চালু করতে আটকেছিলাম তখন আমি দেখতে পাচ্ছি এটি দুর্দান্তভাবে কাজ করছে ..

— ওকি এরি রিনালাদি

আমার যদি কোনও সুযোগে টাইমার থামানো দরকার, আমি কীভাবে এটি করব?

— এসআইজে

@ এসআইজে myCounter.stop();

— ডিসিপ

Answer 3

এখনও অবধি উত্তরগুলি তাত্ক্ষণিকভাবে চলমান কোডের উপর নির্ভর করে বলে মনে হচ্ছে। আপনি যদি 1000 মিমি জন্য টাইমার সেট করেন তবে এটি পরিবর্তে 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

স্পট চালু করুন, যেহেতু আপনি বলেছেন যে এটিই সঠিকভাবে করার একমাত্র এবং একমাত্র উপায়!

— মেসেলা

আমি এটিকে একটি থাম্ব দিয়েছিলাম, একটি সতর্কতার সাথে - প্রদর্শনের উদ্দেশ্যে আপনি সম্ভবত মেঝেটির পরিবর্তে সিলিং (ম্যাথ.সিল ()) দেখাতে চান। সতর্কতার আগুন জ্বালানোর আগে যখন ঘড়িটি 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/...

— Scottux

পরামর্শের জন্য আপনাকে ধন্যবাদ, আমি স্ক্রিপ্ট আপডেট করেছি।

— লেটন এভারসন

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

— কর্বাচো

Answer 6

স্রেফ @ ক্লিকউপভোটের উত্তরটি পরিবর্তিত হয়েছে :

আপনি আইআইএফই (তাত্ক্ষণিকভাবে অনুরোধ করা ফাংশন এক্সপ্রেশন) এবং এটিকে আরও কিছুটা সহজ করার জন্য পুনরাবৃত্তিগুলি ব্যবহার করতে পারেন:

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

আমার সমাধান মাইএসকিউএল তারিখের সময়ের ফর্ম্যাটগুলির সাথে কাজ করে এবং একটি কলব্যাক ফাংশন সরবরাহ করে। অভিনন্দন। দাবি অস্বীকার: কেবলমাত্র মিনিট এবং সেকেন্ডের সাথে কাজ করে, কারণ এটি আমার প্রয়োজন।

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.66 মিমি ফ্রেমে ) - এবং চোখের পলকের এক চতুর্থাংশে সমস্ত কিছুর যত্ন নেবে এবং যদি লুপের টাস্কটির চেয়ে আরও বেশি প্রয়োজন হয় ব্রাউজারটি কিছু পুনরায় রঙ ফেলে দেবে।

আমাদের চোখ লক্ষ করার আগে এটি একটি মার্জিনের অনুমতি দেয় ( হিউম্যান = 24 এফপিএস => 1000/24 ​​= 41.66 মিমি ফ্রেম = তরল অ্যানিমেশন!)

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>