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 で中国語の文字をピンインでソートする簡単な例
目次シナリオ分析発達要約するシナリオ分析システムでは、1 つのモジュールに 3 つのサブモジュールが...
さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 パーレル # # https:/...
目次序文:結果: 1.重合効果: 2. 散布効果:具体的な実装手順: 1. プロジェクトにOpenL...
質問: index.html で、iframe が son.html を導入します。son.html...
文法 背景: linear-gradient(direction,color-stop1,color...
1. 基本的なテキスト要素を使用してコンテンツをマークアップするまず表示効果を見てみましょう:対応す...
1. グリッドレイアウト(グリッド): Web ページをグリッドに分割し、さまざまなグリッドを組み合...
MySQL のイベント スケジューラ EVENT は、Unix crontab や Windows ...
目次1. 最も単純なサーバー側の例2. バインドシステムコール2.1、inet_bind 2.2、i...
コンポーネントが詳細になるにつれて、複数のコンポーネントが状態を共有する状況に遭遇するでしょう。Vu...
目次Dockerを使用してMySQLサービスをデプロイする方法DockerでRedisサービスをデプ...
この記事では、VMware 環境下で Ubuntu と Windows 間でファイルを共有する方法を...
導入今日SQLを書いているときに、問題が発生しました。要件は、データを照会し、スコアと過去 1 週間...
以前、あるプロジェクトでMysql FIND_IN_SET関数を使用したことがありますが、非常に便利...
日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アン...