興味深いカウントダウン効果を実現する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 で中国語の文字をピンインでソートする簡単な例

推薦する

JavaScript でクールなマウス テーリング効果を実装

これを見た後、あなたにも手ができて、さまざまな美しい小さなしっぽを作れるようになることを保証します!...

CSS3は水平方向の中央揃え、垂直方向の中央揃え、水平方向と垂直方向の中央揃えのサンプルコードを実装しています。

フロントエンドの担当者であれば、面接でも仕事中でも、「CSS を使用して中央揃えにする」という効果に...

Html/Css (初心者が最初に読むべきガイド)

1. Web標準の意味を理解する - なぜWeb標準を採用するのか***** コンテンツとスタイル...

Dockerコンテナはルーティングを介して直接通信し、ネットワーク通信を実現します。

概要Docker 自体の現在のデフォルト ネットワークについては、単一ホスト上の異なる Docker...

Navicat を使用して MySQL データベースをエクスポートおよびインポートする方法

MySql は、私たちが頻繁に使用するデータ ソースです。開発者が練習、小規模なプライベート ゲーム...

Javascriptジェネレータの紹介と使用

ジェネレータとは何ですか?ジェネレーターは関数内で実行されるコードです。値を返した後、一時停止し、呼...

Gitコミットログの変更方法のまとめ

ケース1: 最後の提出とプッシュなし次のコマンドを実行します。 git コミット --amend g...

vue3 のストアを使用してスクロール位置を記録する例

目次全体的な効果コンテナのスクロールイベントをリッスンするストア内の構成ページが戻るときのスクロール...

Linux で Jenkins プロジェクトを構築するプロセス (CentOS 7 を例に)

https://gitee.com/tengge1/ShadowEditor のデプロイメントを例...

Centos8 (最小インストール) Python3.8+pip のインストール方法に関するチュートリアル

Python8のインストールを最小化した後、Python3.8.1をインストールしました。オンライン...

要素ツリーコントロールは、ドロップダウンメニューとアイコンを統合します(ツリー+ドロップダウン+入力)

目次要件:実装手順:この記事では主に以下について説明します: カスタムツリーコントロール<el...

JavaScript排他的思考の具体的な実装

前回のブログで、Xiao Xiong は関連する要素の操作方法を更新しましたが、同じ要素のグループが...

HTML シンボルからエンティティへのアルゴリズムのチャレンジ

チャレンジ:文字列内の文字 &、<、>、" (二重引用符)、および &...

Zabbix カスタム監視 nginx ステータス実装プロセス

目次Zabbix カスタム監視 nginx ステータス1. ステータスインターフェースを開く2. 監...

TypeScript名前空間の説明

目次1. 定義と使用1.1 定義1.2 使用2. 複数のファイルに分割する3. エイリアス序文: T...