JavaScript でフロントエンドのカウントダウン効果を実装する
|
この記事では、フロントエンドのカウントダウン効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。
コード：
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>タイトル</title>
<スタイル>
div {
パディング: 10px;
フォントサイズ: 100px;
}
ｐ {
フロート: 左;
幅: 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 は、指定されたユーザーのランキングとクエリを実装します。ランキング関数 (並列ランキング関数) のサンプルコード
序文この記事は主に、MYSQL でランキングを実現し、指定ユーザーランキング関数 (並列ランキング関...
SQLで同じフィールドの異なる値のデータ統計を実行する
適用シナリオ: シールのさまざまな状態に応じて、さまざまな状態のシールの数をカウントする必要がありま...
CSS 属性セレクタを使用して HTML DNA を接合する方法
CSS 属性セレクターは素晴らしいです。大量のクラス名を追加することを回避し、コード内の問題を指摘す...
Tomcat でタイムアウトしたセッションを監視および削除する方法
序文偶然、30 分の Tomcat セッション時間は、セッションが作成された後、30 分間のみ有効で...
HTML 名、ID、クラス (フォーマット/アプリケーション シナリオ/機能) などの違いの紹介。
ページには多くのコントロール (要素またはタグ) があります。これらのタグをより便利に操作するには、...
Vueはキー表示のショートカットキー効果を取得する入力コンポーネントを実装します
ページ上でショートカットキーをカスタマイズする要件に遭遇し、ショートカットキーを設定して表示する場所...
mysqlは内部コマンドエラーの解決策ではありません
「mysqlは内部コマンドではありません」というエラーは、mysqlのbinディレクトリパスが環境変...
シェアしたい絶妙なApple風無料アイコン素材18セット
Apple マグカップのアイコンと追加機能 HD ストレージボックス – アドオンパックセイバースノ...
Webpack-cliが正常にインストールされたら、詳細についてはwebpack -vエラーケースを確認してください。
目次質問1. webpack webpack-cliをインストールする2. webpackのバージョ...
不規則な絵の滝の流れ原理の分析と応用
プロジェクトで発生した不規則な絵画壁のレイアウト問題は、次のように分析されます。 1.img dis...
MySQL テーブル作成外部キー エラーの解決方法
データベーステーブルA: テーブル task_desc_tab を作成します （ id INT(11...
Packetdrillの簡潔なユーザーガイド
1. Packetdrillのコンパイルとインストールソースコードリンク https://githu...
Mysql トランザクションで Update を実行するとテーブルがロックされますか?
2つのケース: 1. 索引あり 2. 索引なし前提条件:方法: コマンドラインを使用してシミュレー...
アカウントとパスワードを記憶する機能を実現するVueの考え方とプロセス
目次実装のアイデアアカウント パスワードを保存する方法は 3 つあります。機能インターフェースアカウ...
Dockerイメージ内のファイルを表示する方法
Dockerイメージ内のファイルを表示する方法1. すでに実行中の場合すでに実行中のイメージについて...