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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)
>>: MySQL で中国語の文字をピンインでソートする簡単な例
これを見た後、あなたにも手ができて、さまざまな美しい小さなしっぽを作れるようになることを保証します!...
フロントエンドの担当者であれば、面接でも仕事中でも、「CSS を使用して中央揃えにする」という効果に...
1. Web標準の意味を理解する - なぜWeb標準を採用するのか***** コンテンツとスタイル...
概要Docker 自体の現在のデフォルト ネットワークについては、単一ホスト上の異なる Docker...
MySql は、私たちが頻繁に使用するデータ ソースです。開発者が練習、小規模なプライベート ゲーム...
ジェネレータとは何ですか?ジェネレーターは関数内で実行されるコードです。値を返した後、一時停止し、呼...
ケース1: 最後の提出とプッシュなし次のコマンドを実行します。 git コミット --amend g...
目次全体的な効果コンテナのスクロールイベントをリッスンするストア内の構成ページが戻るときのスクロール...
https://gitee.com/tengge1/ShadowEditor のデプロイメントを例...
Python8のインストールを最小化した後、Python3.8.1をインストールしました。オンライン...
目次要件:実装手順:この記事では主に以下について説明します: カスタムツリーコントロール<el...
前回のブログで、Xiao Xiong は関連する要素の操作方法を更新しましたが、同じ要素のグループが...
チャレンジ:文字列内の文字 &、<、>、" (二重引用符)、および &...
目次Zabbix カスタム監視 nginx ステータス1. ステータスインターフェースを開く2. 監...
目次1. 定義と使用1.1 定義1.2 使用2. 複数のファイルに分割する3. エイリアス序文: T...