この記事では、フロントエンドのカウントダウン効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 コード: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <スタイル> div { パディング: 10px; フォントサイズ: 100px; } p { フロート: 左; 幅: 300ピクセル; 高さ: 300px; 境界線: 1px 実線 #000000; 色: #ffffff; 背景色: #333333; テキスト配置: 中央; 行の高さ: 300px; } </スタイル> </head> <本文> <div> <p class="hour">1</p> <p class="minute">2</p> <p class="second">3</p> </div> <スクリプト> window.addEventListener('load', 関数() { //要素を取得しますvar hour = document.querySelector('.hour'); //時間用のブラックボックスvar minute = document.querySelector('.minute'); //分用のブラックボックスvar second = document.querySelector('.second'); //秒用のブラックボックスvar inputTime = +new Date('2021-2-6 18:00:00'); //ユーザー入力の合計ミリ秒数を返しますtimecountDown(); //初めて更新されたときにページが空白にならないように、この関数を1回呼び出します//タイマーを開始しますsetInterval(countDown, 1000); 関数 countDown() { var nowTime = +new Date(); //現在の時間の合計ミリ秒数を返します var times = (inputTime - nowTime) / 1000; //tiems は残り時間の合計ミリ秒数です var h = parseInt(times / 60 / 60 % 24); //h = h < 10 ? '0' + h : h; hour.innerHTML = h; // 残りの時間を時間のブラックボックスに入力します var m = parseInt(times / 60 % 60); // 分 m = m < 10 ? '0' + m : m; 分.innerHTML = m; var s = parseInt(times % 60); //現在の秒数 s = s < 10 ? '0' + s : s; 2番目.innerHTML = s; } }) </スクリプト> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL でよく使用される SQL 文を表示する (詳細な説明)
>>: SSH ポート転送、ローカル ポート転送、リモート ポート転送、動的ポート転送の詳細
序文この記事は主に、MYSQL でランキングを実現し、指定ユーザーランキング関数 (並列ランキング関...
適用シナリオ: シールのさまざまな状態に応じて、さまざまな状態のシールの数をカウントする必要がありま...
CSS 属性セレクターは素晴らしいです。大量のクラス名を追加することを回避し、コード内の問題を指摘す...
序文偶然、30 分の Tomcat セッション時間は、セッションが作成された後、30 分間のみ有効で...
ページには多くのコントロール (要素またはタグ) があります。これらのタグをより便利に操作するには、...
ページ上でショートカットキーをカスタマイズする要件に遭遇し、ショートカットキーを設定して表示する場所...
「mysqlは内部コマンドではありません」というエラーは、mysqlのbinディレクトリパスが環境変...
Apple マグカップのアイコンと追加機能 HD ストレージボックス – アドオンパックセイバースノ...
目次質問1. webpack webpack-cliをインストールする2. webpackのバージョ...
プロジェクトで発生した不規則な絵画壁のレイアウト問題は、次のように分析されます。 1.img dis...
データベーステーブルA: テーブル task_desc_tab を作成します ( id INT(11...
1. Packetdrillのコンパイルとインストールソースコードリンク https://githu...
2つのケース: 1. 索引あり 2. 索引なし前提条件:方法: コマンドラインを使用してシミュレー...
目次実装のアイデアアカウント パスワードを保存する方法は 3 つあります。機能インターフェースアカウ...
Dockerイメージ内のファイルを表示する方法1. すでに実行中の場合すでに実行中のイメージについて...