چۆن CountDown دروست بکەم بە javascript بە پێی چرکە؟

[Rasti]

پاش سڵاو،

بەڕێزان لاپەڕەیەکم هەیە کە بە PHP داڕێژراوە و وا پێویست دەکات کە Count down ێك دەربخات بۆ ٦٠ چرکە و دوای ئەو وادەیە پەیامێك نیشان بدات کە پێی ڕابگەیەنێت سێشنەکەت بە سەر چووە.

 

داواکارم هاوکاریم بکەن.

زۆر سوپاس

[پروشە ئازاد]

سەرەتا Function ێکی جاڤا دروست بکە لە ناو پەڕەکەتدا یان بە فایلێکی سەربەخۆ و لینکی بکە بە فایلەکەتەوە، بەم شێوەیەی خوارەوە:

function countdown() {
  var seconds = 59;
  function tick() {
    var counter = document.getElementById("counter");
    seconds--;
    counter.innerHTML =
      "0:" + (seconds < 10 ? "0" : "") + String(seconds);
    if (seconds > 0) {
      setTimeout(tick, 1000);
    } else {
      document.getElementById("verifiBtn").innerHTML = `
      <div class="Btn" id="ResendBtn">
      <button type="submit">Resend</button>
      </div>
      `;
      document.getElementById("counter").innerHTML = "";
    }
  }
  tick();
}

countdown();

پاشان Call ی Function ەکە بکە.

ئەگەر شارەزاییت لە javascript دا هەبێت، لەم فەنکشنە دا دوو کۆنتەینەر بەکار هاتوە کە بریتین لە "counter" و "verifyBtn" پێویستە لە html ەکەتدا دروستی بکەی.

<div class="btnGroup">
  <span class="Btn" id="verifiBtn">
    <button type="submit">Verify</button>
  </span>
  <span class="timer">
    <span id="counter"></span>
  </span>
</div>

بە گۆڕینی variable ی second دەتوانی درێژیەکە دیاری بکەی.

 

تەواوی کۆدەکە:

<div class="btnGroup">
  <span class="Btn" id="verifiBtn">
    <button type="submit">Verify</button>
  </span>
  <span class="timer">
    <span id="counter"></span>
  </span>
</div>

<script>
function countdown() {
  var seconds = 59;
  function tick() {
    var counter = document.getElementById("counter");
    seconds--;
    counter.innerHTML =
      "0:" + (seconds < 10 ? "0" : "") + String(seconds);
    if (seconds > 0) {
      setTimeout(tick, 1000);
    } else {
      document.getElementById("verifiBtn").innerHTML = `
        <div class="Btn" id="ResendBtn">
        <button type="submit">Resend</button>
          </div>
        `;
      document.getElementById("counter").innerHTML = "";
    }
  }
  tick();
}
countdown();
</script>

 

[Rasti]

دەستەکانت خۆش بێت @پروشە ئازاد خان.

زۆر جوان کاری کرد بەڵام کێشەیەکم هەیە ئەویش ئەوەیە کە لە ٦٠ چرکە زیاتر نایکات بە خولەك و هەر بە چرکە دەینوسێت بۆ نمونە 0:159 پێویستە 2:39 بنوسێت..

[ADEL SNJARY]

To create a countdown in JavaScript, you can use the setInterval() function to run a function every second and update the countdown. Here's an example:

وەرگرتن

function countdown(seconds) {
  var interval = setInterval(function() {
    seconds--;
    console.log(seconds + " seconds left");
    if (seconds == 0) {
      clearInterval(interval);
      console.log("Time's up!");
    }
  }, 1000);
}

countdown(10);
 

 

In this code, the countdown() function takes a parameter seconds representing the number of seconds to count down from. The setInterval() function is used to run an anonymous function every second, which decrements the seconds variable, logs the number of seconds left to the console, and checks if the countdown is finished. If the countdown is finished, the clearInterval() function is called to stop the interval from running. Finally, the countdown() function is called with the desired number of seconds (in this case, 10) to start the countdown.

You can modify this code to display the countdown in a web page instead of logging it to the console by updating the console.log() statements to update the contents of an HTML element. For example:

 

وەرگرتن

<p id="countdown"></p>

<script>
function countdown(seconds) {
  var countdownElement = document.getElementById("countdown");
  var interval = setInterval(function() {
    seconds--;
    countdownElement.textContent = seconds + " seconds left";
    if (seconds == 0) {
      clearInterval(interval);
      countdownElement.textContent = "Time's up!";
    }
  }, 1000);
}

countdown(10);
</script>
 

 

In this version of the code, an HTML paragraph element with the ID "countdown" is defined. The countdown() function now retrieves this element using the document.getElementById() function and updates its contents using the textContent property. This results in the countdown being displayed on the web page instead of being logged to the console.

 

 

 

ببورە کە بە ئینگلیزیە و کاتم نەبوو بیکەمە کوردی و بە هیوای سوود وەرگرتن

لە 22 شوباتی 2023 گۆڕانكاری تێدا كراوە لە لایەن ADEL SNJARY

[سەرمەد]

سەبارەت بە سۆلیوشنەکەی @پروشە ئازاد خان:

کێشەکە لەوەدایە کە Output ەکەی هارد کۆد کراوە کە ئەمەش هەڵەیە.

بۆ نمونە بۆ دانانی 0 لە پێش ئەو ژمارانەی لە خوار 10 وەن بە if ی مەرجی دانراوە:

"0:" + (seconds < 10 ? "0" : "") + String(seconds);

کە ئەمەش زۆر هەڵەیە

بۆ چارەسەری ئەمە ئەم function ە دروست بکە:

function pad(num, size) {
    num = num.toString();
    while (num.length < size) num = "0" + num;
    return num;
}

پاشان ئەو دێڕەی سەرەوە بگۆڕە بۆ ئەمە:

Math.floor(seconds / 60) + ":" + pad(seconds % 60,2);

هەموو کۆدەکە بەم جۆرەی لێ دێت:

function pad(num, size) {
    num = num.toString();
    while (num.length < size) num = "0" + num;
    return num;
}
function countdown() {
        var seconds = 120;
        function tick() {
          var counter = document.getElementById("counter");
          seconds--;
          counter.innerHTML =
            Math.floor(seconds / 60) + ":" + pad(seconds % 60,2);
          if (seconds > 0) {
            setTimeout(tick, 1000);
          } else {
            document.getElementById("verifiBtn").innerHTML = `
            <div>Session Expired !</div>
            `;
            document.getElementById("counter").innerHTML = "";
          }
        }
        tick();
      }
      countdown();

 

[Rasti]

زۆر سوپاس هاوڕێیان بۆ وەڵامەکانتان، سودم لێ بینی و کێشەکەم چارەسەر بوو.

لە 2/23/2023 کاتژمێر 10:24 AM دا، سەرمەد وتی:

function pad(num, size) {
    num = num.toString();
    while (num.length < size) num = "0" + num;
    return num;
}

زۆر سوپاس کاک سەرمەد، ئەمە کێشەیەكی گەورەی چارەسەر کرد.