興味深いカウントダウン効果を実現するjs

js興味深いカウントダウンケース、参考までに、具体的な内容は次のとおりです

コード：

<!DOCTYPE html>
<html lang="ja">
 
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ドキュメント</title>
  <スタイル>
    * {
      マージン: 0;
      パディング: 0;
    }
    
    。包む {
      オーバーフロー: 非表示;
      幅: 500ピクセル;
      高さ: 500px;
      背景色: #eeeeee;
      マージン: 0 自動;
    }
    
    h2 {
      上マージン: 20px;
      テキスト配置: 中央;
      色: #fff;
    }
    
    入力{
      幅: 70ピクセル;
    }
    
    .ipt{
      テキスト配置: 中央;
      上マージン: 50px;
    }
    
    。走る {
      幅: 100ピクセル;
      高さ: 100px;
      背景色: #000;
      テキスト配置: 中央;
      行の高さ: 100px;
      色: #fff;
      フォントサイズ: 30px;
      境界線の半径: 50%;
      マージン: 30px 自動 0;
    }
    
    .ジュリ{
      テキスト配置: 中央;
      上マージン: 30px;
    }
    
    .sytime {
      テキスト配置: 中央;
      上マージン: 60px;
      フォントサイズ: 25px;
      色: #fff;
    }
    
    .sytime スパン {
      フォントサイズ: 30px;
      色: 赤;
    }
    
    .juli スパン {
      フォントサイズ: 18px;
      色: 赤;
    }
  </スタイル>
</head>
 
<本文>
  <div class="wrap">
    <h2>カウントダウン</h2>
    <!-- フォーム -->
    <div class="ipt">
      入力してください: <input type="text">年<input type="text">月<input type="text">日</div>
    <!-- スタートボタン-->
    <div class="run">開始</div>
    <!-- 距離 時間 -->
    <p class="juli">これで -<span class="julitime">0000</span>- までの距離は次のようになります:</p>
    <!-- 残り時間 -->
    <div class="sytime">
      <span>00</span>日<span>00</span>時間<span>00</span>分<span>00</span>秒</div>
  </div>
  <スクリプト>
    // 要素を取得 // フォーム var ipt = document.getElementsByTagName('input');
    //ボタン var btn = document.getElementsByClassName('run')[0];
    // 距離年 var julitime = document.getElementsByClassName('julitime')[0];
    // カウントダウン var sytime = document.getElementsByClassName('sytime')[0];
    var time = sytime.getElementsByTagName('span');
    console.log(ipt、btn、julitime、time);
 
    var タイマー ID = null;
    // クリックイベント btn.onclick = function() {
      ipt[1].値> 12 || ipt[2].値> 30の場合{
        alert('月は12未満、日は30未満でなければなりません');
        戻る;
      } そうでない場合 (ipt[0].value.trim() == '' || ipt[1].value.trim() == '' || ipt[2].value.trim() == '') {
        alert('コンテンツは空にできません');
        戻る;
      }
      タイマーID = setInterval(countTime, 1000);
 
    }
 
 
 
    関数 countTime() {
      // 入力年を取得します var ipty = ipt[0].value;
      // 入力月を取得します var iptm = ipt[1].value;
      // 入力日付を取得します。var iptd = ipt[2].value;
      // コンソールログ(ipty、iptm、iptd);
      var str = ipty + '-' + iptm + '-' + iptd;
      // コンソールログ(str);
      // 距離時間に値を割り当てます julitime.innerHTML = str;
      // 現在の距離 1970、1.1 ミリ秒 var nowDate = +new Date();
      // 入力時間距離 1970,1,1 ミリ秒 var inputFr = +new Date(ipty + '-' + iptm + '-' + iptd)
        // 現在から将来の秒数を減算します var times = (inputFr - nowDate) / 1000;
      var d = parseInt(times / 60 / 60 / 24) //日数 d = d < 10 ? '0' + d : d;
      var h = parseInt(times / 60 / 60 % 24) // h = h < 10 の場合 ? '0' + h : h;
 
      var m = parseInt(times / 60 % 60); // ポイント m = m < 10 ? '0' + m : m;
 
      var s = parseInt(times % 60); //秒 s = s < 10 ? '0' + s : s;
 
      // コンソールログ(d, h, m, s);
      時間[0].innerHTML = d;
      時間[1].innerHTML = h;
      時間[2].innerHTML = m;
      時間[3].innerHTML = s;
    }
  </スクリプト>
</本文>
 
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: