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 ポート転送、ローカル ポート転送、リモート ポート転送、動的ポート転送の詳細
推薦する
docker公式mysqlイメージのカスタム構成の詳細な説明
インストール時間を節約するために、公式の mysql docker イメージを使用して mysql ...
Linux での tcpdump コマンドの詳細な分析と使用方法
導入簡単に言えば、tcpdump は、ネットワーク上のトラフィックをダンプし、ユーザーの定義に従って...
mysql8でルートユーザーのパスワードをリセットする手順を完了します
序文最近、多くの新しい同僚がこの質問をしてきました。特に、homebrew を通じて自動的にインスト...
MySQL ストアド プロシージャで case ステートメントを使用する詳細な例
この記事では、例を使用して、MySQL ストアド プロシージャでの case ステートメントの使用方...
Mysql テーブルコメントフィールド取得操作
余計なことは言わないで、コードだけ見てみましょう〜 -- テーブル内のフィールドコメントを表示および...
MYSQL の 10 の典型的な最適化ケースとシナリオ
目次1. SQL最適化の一般的な手順1. SQL実行計画の分析を説明する2. プロフィール分析を表示...
Windows 7 で Python 3.4 を使って MySQL データベースを使用する
Python 3.4でMySQLデータベースを使用する詳細なプロセスは次のとおりです。 Window...
Mysqlデータベースの文字化けに対処する方法
MySQL では、データベースの文字化けは一般的に文字セットを設定することで修正できますが、文字化け...
hrefパラメータ転送における中国語の文字化けについて
パラメータを渡すために href が必要で、パラメータが中国語の場合、文字化けした文字が表示されます...
HTML チュートリアル: 画像のサイズ、配置、間隔、境界線の属性を変更する方法
画像タグ: <img> ページに画像を挿入するには、「src」属性を持つ「img」タグを...
実務経験7年のフロントエンドスーパーバイザーによる経験共有
今日はベテランの貴重な経験を共有します。著者は技術管理の経験が7年あり、多い時は80人以上を率いてい...
Docker で hyperf を開発する完全な使用例の詳細な説明
ハイパーフ公式サイトHyperf 公式ドキュメントのインストール1. Dockerの使用docker...
重複したMySQLテーブルをマージして削除する簡単な方法
シナリオ：クロールされたデータは、別のメインテーブルと同じ構造を持つデータテーブルを生成するため、マ...
MacでのMySQL初期化パスワード操作
Macでデータベースを操作する際に個人が遭遇するデータベース起動の問題の簡単な記録1. Apple-...
MySQLクエリの基本的なクエリ操作の学習
序文MySQL は最も人気のあるリレーショナル データベース管理システムです。WEB アプリケーショ...