jsでカウントダウンタイマーの秒数を表示する方法

下次还敢
リリース: 2024-05-06 12:48:16
オリジナル
878 人が閲覧しました

JavaScript で秒表示カウントダウン タイマーを実装する方法: 秒を保存する変数 Seconds を作成します。 1 秒間隔でカウントダウン関数を呼び出すタイマーを作成します。カウントダウン関数では、秒を減分し、HTML タイマー要素の時間を更新します。秒が 0 になったら、タイマーをクリアします。

jsでカウントダウンタイマーの秒数を表示する方法

JavaScriptで秒表示カウントダウンタイマーを実装する方法

変数とタイマーを作成する:

<code class="js">let seconds = 10; // 初始秒数
let timer = setInterval(countdown, 1000); // 以 1 秒间隔调用 countdown 函数</code>
ログイン後にコピー

カウントダウン関数:

<code class="js">function countdown() {
  seconds--; // 减少秒数
  let time = `${seconds}s`; // 转换为 "s" 格式
  document.getElementById("timer").innerHTML = time; // 更新 HTML 中的计时器元素

  // 当秒数为 0 时,清除计时器
  if (seconds <= 0) {
    clearInterval(timer);
  }
}</code>
ログイン後にコピー

HTMLコード:ええ

仕組み:

    変数とタイマーを作成する:
  1. 秒を保存する変数 を作成し、setInterval 関数を使用してカウントダウン タイマーを作成し、1 秒ごとに countdown 関数を呼び出します。 。 seconds 来存储秒数,并使用 setInterval 函数创建倒计时器,每隔 1 秒调用 countdown 函数。
  2. countdown 函数:countdown 函数中,将 seconds 减一,并将其转换为字符串 "s" 格式。然后将更新后的时间显示在 HTML 中的 timer 元素中。
  3. 清除计时器:secondsカウントダウン関数:
  4. countdown 関数では、 を 1 つ減らして文字列「s」形式に変換します。更新された時刻は、HTML の timer 要素に表示されます。
🎜🎜タイマーのクリア: 🎜が 0 に達したら、clearInterval を使用してタイマーをクリアし、カウントダウンを停止します。 🎜🎜

以上がjsでカウントダウンタイマーの秒数を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート