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

興味深いカウントダウン効果を実現する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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JS カウントダウン実装コード (時間、分、秒)
  • JS カウントダウン (日、時間、分、秒)
  • シンプルで使いやすいカウントダウン js コード
  • ボタンをクリックしたときに60秒のカウントダウンを実現するjsコード
  • 2つのシンプルなjsカウントダウンメソッド
  • ネイティブ JS を使用して簡単なカウントダウン機能を実装する例
  • 数秒後にカウントダウンジャンプするjsの例
  • 優れたjs htmlページのカウントダウンは秒単位の精度になります
  • jsはクリックして確認コードを取得するカウントダウン効果を実現します
  • Javascript は、製品のフラッシュセールのカウントダウンを実装します (時間はサーバー時間と同期されます)

<<:  MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)

>>:  MySQL で中国語の文字をピンインでソートする簡単な例

推薦する

同じページを動的にロードするための Vue ルーティングリスニングの例

目次シナリオ分析発達要約するシナリオ分析システムでは、1 つのモジュールに 3 つのサブモジュールが...

sqlite を mysql スクリプトに移行する方法

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 パーレル # # https:/...

vue+openlayer をベースにマップの集約と散乱効果を実現

目次序文:結果: 1.重合効果: 2. 散布効果:具体的な実装手順: 1. プロジェクトにOpenL...

CSS コンテナ背景 10 色グラデーション デモ (linear-gradient())

文法 背景: linear-gradient(direction,color-stop1,color...

【HTML要素】タグテキストの詳細説明

1. 基本的なテキスト要素を使用してコンテンツをマークアップするまず表示効果を見てみましょう:対応す...

CSS3 の display:grid、グリッドレイアウトの紹介

1. グリッドレイアウト(グリッド): Web ページをグリッドに分割し、さまざまなグリッドを組み合...

MySQLのイベントスケジューラEVENTを理解する

MySQL のイベント スケジューラ EVENT は、Unix crontab や Windows ...

Linux ソースコードからのソケット (TCP) バインドの詳細な説明

目次1. 最も単純なサーバー側の例2. バインドシステムコール2.1、inet_bind 2.2、i...

Vue ローカルコンポーネントデータ共有 Vue.observable() の使用

コンポーネントが詳細になるにつれて、複数のコンポーネントが状態を共有する状況に遭遇するでしょう。Vu...

Docker を使用して MySQL および Redis サービスをデプロイする方法

目次Dockerを使用してMySQLサービスをデプロイする方法DockerでRedisサービスをデプ...

VMware での Ubuntu と Windows 間のファイル共有

この記事では、VMware 環境下で Ubuntu と Windows 間でファイルを共有する方法を...

MySQLクエリ条件におけるonとwhereの配置の違いの分析

導入今日SQLを書いているときに、問題が発生しました。要件は、データを照会し、スコアと過去 1 週間...

MySQL の FIND_IN_SET() と IN の違いを簡単に分析します

以前、あるプロジェクトでMysql FIND_IN_SET関数を使用したことがありますが、非常に便利...

純粋な CSS でフォ​​ーム検証を実装するためのサンプル コード

日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アン...