সহজতম জাভাস্ক্রিপ্ট কাউন্টডাউন টাইমার? [বন্ধ]

240

বন্ধ । এই প্রশ্নটি আরও ফোকাস করা প্রয়োজন । এটি বর্তমানে উত্তর গ্রহণ করছে না।

এই প্রশ্নটি উন্নত করতে চান? প্রশ্নটি আপডেট করুন যাতে এটি কেবলমাত্র এই পোস্টটি সম্পাদনা করে একটি সমস্যায় ফোকাস করে ।

4 বছর আগে বন্ধ ছিল ।

এই প্রশ্নটি উন্নত করুন

সহজতম কাউন্টডাউন টাইমার কীভাবে তৈরি করা যায় তা জানতে চেয়েছিলেন।

সাইটে এই বাক্যটি থাকবে:

"নিবন্ধন 05:00 মিনিটে বন্ধ হয়ে যায়!"

সুতরাং, আমি যা করতে চাই তা হল একটি সাধারণ জেএস কাউন্টডাউন টাইমার তৈরি করা যা "05:00" থেকে "00:00" এ চলে যায় এবং তারপরে এটি শেষ হয়ে "05:00" তে পুনরায় সেট করে।

আমি এর আগে কিছু উত্তরের মধ্য দিয়ে যাচ্ছিলাম তবে আমি যা করতে চাই তার জন্য সেগুলি খুব তীব্র (তারিখের বিষয়গুলি ইত্যাদি) বলে মনে হচ্ছে।

— Bartek
সূত্র

এবং আবারও, আপনি প্রাসঙ্গিক এইচটিএমএলটি ছেড়ে যাচ্ছেন, যদিও কমপক্ষে আপনি জটিলতার সমস্যাটি সাজিয়েছেন এই বার। তবে সিরিয়াসলি, আপনাকে নিজেরাই সমাধান তৈরি করতে হবে এবং তারপরে এসে আপনার সমস্যার বিষয়ে আমাদের জিজ্ঞাসা করুন।

— ডেভিড বলেছেন মনিকা

অভিযোগগুলি সহ কোড উদাহরণগুলি কীভাবে তারা খুব জটিল? যাইহোক, আমি মনে করি আপনি সহজেই setIntervalএবং এটি তৈরি করতে পারেন। ইনার এইচটিএমএল ভিত্তিক, তারিখ ভিত্তিক পরিবর্তে।

— bjb568

হ্যাঁ, লোকেরা সমাধানটি নিজেরাই তৈরি করা উচিত। তবে জাভাস্ক্রিপ্টের সাথে প্রচলিত কাজগুলি করার প্রচুর উদাহরণ রয়েছে। আমি কীভাবে একটি টাইমিং ডাউন টাইমার করব তা জানি তবে আমি ওয়েবে যদি কোনও উপাদান (একটি উপাদান হিসাবে) পাই তবে আমি পছন্দ করি। সুতরাং এই প্রশ্নটি এবং বিস্তৃত উত্তরের জন্য আমি যা খুজছিলাম তা পেয়েছি। কাউন্টডাউন যুক্তি

— কার্লোস রাফেল রামিরেজ

আমি এই সমাধানগুলি সহজ হতে পেয়েছি: stackoverflow.com/questions/32141035/…

— নিউ ইভারেস্ট

এটি দেখুন: সিটিপয়েন্ট

— এরিক গার্সিয়া

উত্তর:

490

আমার দুটি ডেমো রয়েছে, একটি সঙ্গে jQueryএবং একটি ছাড়া। উভয়ই তারিখ ফাংশন ব্যবহার করুন এবং এটি যতটা সহজ হয় তেমন সহজ।

ভ্যানিলা জাভাস্ক্রিপ্ট সহ ডেমো

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

<body>
    <div>Registration closes in <span id="time">05:00</span> minutes!</div>
</body>

স্নিপেট প্রসারিত করুন

JQuery সহ ডেমো

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.text(minutes + ":" + seconds);

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

jQuery(function ($) {
    var fiveMinutes = 60 * 5,
        display = $('#time');
    startTimer(fiveMinutes, display);
});

তবে আপনি যদি আরও সঠিক টাইমার চান যা কেবল কিছুটা জটিল:

function startTimer(duration, display) {
    var start = Date.now(),
        diff,
        minutes,
        seconds;
    function timer() {
        // get the number of seconds that have elapsed since 
        // startTimer() was called
        diff = duration - (((Date.now() - start) / 1000) | 0);

        // does the same job as parseInt truncates the float
        minutes = (diff / 60) | 0;
        seconds = (diff % 60) | 0;

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds; 

        if (diff <= 0) {
            // add one second so that the count down starts at the full duration
            // example 05:00 not 04:59
            start = Date.now() + 1000;
        }
    };
    // we don't want to wait a full second before the timer starts
    timer();
    setInterval(timer, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

<body>
    <div>Registration closes in <span id="time"></span> minutes!</div>
</body>

স্নিপেট প্রসারিত করুন

এখন আমরা কয়েকটি বেশ সহজ টাইমার তৈরি করেছি আমরা পুনরায় ব্যবহারযোগ্যতা এবং উদ্বেগ পৃথক করার বিষয়ে ভাবতে শুরু করতে পারি। "একটি গণনা টাইমারকে কি করা উচিত" জিজ্ঞাসা করে আমরা এটি করতে পারি?

একটি কাউন্ট ডাউন টাইমার গণনা করা উচিত? হ্যাঁ
একটি কাউন্ট ডাউন টাইমার কীভাবে নিজেকে ডিওএম এ প্রদর্শিত করতে হবে তা জানা উচিত? না
একটি গণনা টাইমার 0 এ পৌঁছালে নিজেকে পুনরায় চালু করতে হবে? না
একটি কাউন্ট ডাউন টাইমার কি ক্লায়েন্টের জন্য অ্যাক্সেসের জন্য একটি সময় দিতে পারে যে কত সময় বাকি? হ্যাঁ

সুতরাং এই বিষয়গুলি মাথায় রেখে আরও একটি ভাল লিখতে দেয় (তবে এখনও খুব সাধারণ) CountDownTimer

function CountDownTimer(duration, granularity) {
  this.duration = duration;
  this.granularity = granularity || 1000;
  this.tickFtns = [];
  this.running = false;
}

CountDownTimer.prototype.start = function() {
  if (this.running) {
    return;
  }
  this.running = true;
  var start = Date.now(),
      that = this,
      diff, obj;

  (function timer() {
    diff = that.duration - (((Date.now() - start) / 1000) | 0);

    if (diff > 0) {
      setTimeout(timer, that.granularity);
    } else {
      diff = 0;
      that.running = false;
    }

    obj = CountDownTimer.parse(diff);
    that.tickFtns.forEach(function(ftn) {
      ftn.call(this, obj.minutes, obj.seconds);
    }, that);
  }());
};

CountDownTimer.prototype.onTick = function(ftn) {
  if (typeof ftn === 'function') {
    this.tickFtns.push(ftn);
  }
  return this;
};

CountDownTimer.prototype.expired = function() {
  return !this.running;
};

CountDownTimer.parse = function(seconds) {
  return {
    'minutes': (seconds / 60) | 0,
    'seconds': (seconds % 60) | 0
  };
};

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

একটি উদাহরণ যা XX: XX বিন্যাসে সময় প্রদর্শন করে এবং 00:00 এ পৌঁছানোর পরে পুনরায় শুরু হয়

একটি উদাহরণ যা সময়কে দুটি ভিন্ন ফর্ম্যাটে প্রদর্শন করে

দুটি উদাহরণ রয়েছে যার দুটি পৃথক টাইমার রয়েছে এবং কেবলমাত্র একটি পুনরায় চালু হয়

একটি বোতাম টিপে গেলে গণনা ডাউন টাইমার শুরু করে এমন একটি উদাহরণ

— robbmj
সূত্র

তুমি সেই লোক! ঠিক এটাই আমি খুঁজছিলাম। ধন্যবাদ! আরও একটি জিনিস: আমি কীভাবে মিনিটের সামনে "0" যুক্ত করতে পারি, সুতরাং এটি "4:59" এর পরিবর্তে "04:59" দেখায়?

— বারটেক

minutes = minutes < 10 ? "0" + minutes : minutes;

— robbmj

@ টিম্ব্রামটি এটি আমার কাছে প্রথমও অদ্ভুত লাগছিল, যতক্ষণ না আমি বুঝতে পারলাম যে varঘোষণার পরে একটি কমা বিভিন্ন ঘোষণা পৃথক করে। সুতরাং minutesএবং secondsকেবল ঘোষিত হয় (তবে অ-আরম্ভিত নয়) ভেরিয়েবল। সুতরাং timerকেবলমাত্র durationপ্যারামিটারের সমান , আরও কিছু নয়, কিছু কম নয়।

— আবুস্তামাম

@ সিনানআরডেম আমি এমন কিছু কোড লিখেছি যা এটি করে। আমি আজই উত্তরটিতে সেই কোডটি যুক্ত করতে পারি। এটি হয়ে গেলে আমি আপনাকে পিং করব।

— robbmj

আপনি কীভাবে একটি রিসেট বিকল্প যুক্ত করবেন? এবং একটি বিরতি এবং পুনরায় শুরু? আমি এই ক্ষেত্রটি পুনরায় সেট করার চেষ্টা করেছি এবং এটি বন্ধে আছে কিনা তা পরীক্ষা করে দেখছি। তবে ঘড়িটি চলতে থাকে।

— জাজং নগুইন

আপনি যদি সত্যিকারের টাইমার চান তবে আপনার তারিখ অবজেক্টটি ব্যবহার করা উচিত।

পার্থক্য গণনা।

আপনার স্ট্রিং ফর্ম্যাট করুন।

window.onload=function(){
      var start=Date.now(),r=document.getElementById('r');
      (function f(){
      var diff=Date.now()-start,ns=(((3e5-diff)/1e3)>>0),m=(ns/60)>>0,s=ns-m*60;
      r.textContent="Registration closes in "+m+':'+((''+s).length>1?'':'0')+s;
      if(diff>3e5){
         start=Date.now()
      }
      setTimeout(f,1e3);
      })();
}

উদাহরণ

Jsfiddle

এত সুনির্দিষ্ট টাইমার না

var time=5*60,r=document.getElementById('r'),tmp=time;

setInterval(function(){
    var c=tmp--,m=(c/60)>>0,s=(c-m*60)+'';
    r.textContent='Registration closes in '+m+':'+(s.length>1?'':'0')+s
    tmp!=0||(tmp=time);
},1000);

JsFiddle

— cocco
সূত্র

আপনি সহজেই সেটআইন্টারওয়াল ব্যবহার করে একটি টাইমার কার্যকারিতা তৈরি করতে পারেন B নীচে কোডার যা আপনি এটি টাইমার তৈরি করতে ব্যবহার করতে পারেন।

http://jsfiddle.net/ayyadurai/GXzhZ/1/

window.onload = function() {
  var minute = 5;
  var sec = 60;
  setInterval(function() {
    document.getElementById("timer").innerHTML = minute + " : " + sec;
    sec--;
    if (sec == 00) {
      minute --;
      sec = 60;
      if (minute == 0) {
        minute = 5;
      }
    }
  }, 1000);
}

Registration closes in <span id="timer">05:00<span> minutes!

স্নিপেট প্রসারিত করুন

— ডুরাই
সূত্র

প্রতিটি সেকেন্ডে সঠিকভাবে প্রতিনিধিত্ব করে না, এটি খুব দ্রুত গুনছে।

— স্কট রাওলি

500 থেকে 1000 পরিবর্তন করা এটিকে সঠিক বলে মনে হচ্ছে।

— স্কট রাওলি

চটজলদি সমাধান,

— ঘন্টাটি