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 ポート転送、ローカル ポート転送、リモート ポート転送、動的ポート転送の詳細
推薦する
tomcat+nginx を使用してマルチアプリケーション デプロイメントを実装するためのサンプル コード
目次マルチアプリケーションの展開1-Tomcat 構成1.1- プロジェクト構成1.2-サービス構成...
CocosCreator 入門チュートリアル: TS で初めてのゲームを作る
目次前提TypeScript と JavaScriptコードエディタの選択TypeScriptを学ぶ...
よく忘れられがちな CSS のヒント 26 選
これは、よく使われるけれども忘れられがちな CSS 実装方法のコレクションです。抜けや追加があれば、...
MySQL SQL文の特殊処理文のまとめ（必読）
1.テーブル全体を更新します。データ行の列の値が空の場合は、別の列フィールドの値と同じにします。 ...
Windows 7 64 ビットに最新バージョンの MySQL サーバーをインストールする方法のグラフィック チュートリアル
最近、MySQL データベースを勉強していて、設定ファイルを頻繁に変更したため、MySQL データベ...
JavaScript配列の一般的なメソッドの例のまとめ
目次一般的な配列メソッドconcat() メソッドjoin() メソッドpop() メソッドpush...
完全なMySQL学習ノート
目次MyISAM と InnoDBパフォーマンスの低下と SQL の速度低下の理由: MySQL 実...
Windows 10 での MySQL 5.7.19 インストール チュートリアル MySQL のルート パスワードを忘れた場合の変更方法
MySQL 5.7.19のインストールを例に挙げると、まずダウンロードしますもちろん、最初に行うこと...
MySQL mysqladmin クライアントの使用の概要
目次1. サーバーの状態を確認します。 2. ルートパスワードを変更します。 3. mysqlser...
Linux カーネル デバイス ドライバー仮想ファイル システムに関する注意事項
/******************** * 仮想ファイルシステム VFS **********...
Vue でのスロット配置と使用状況分析
このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...
nginx の default_server 定義とマッチングルールの詳細な説明
nginx の default_server ディレクティブは、server_name と一致しない...
nginxワーカープロセスループの実装
ワーカープロセスは、起動されると、まず自身の動作に必要な環境を初期化し、次に実行する必要があるイベン...
MySQLのグループカウントと範囲集計を実装する2つの方法
1つ目：通常動作 選択 SUM(ddd) AS count_days、 場合 aa.days >...
dockerがredisを再起動するとmysqlデータが失われる問題を解決する
公式ドキュメント:したがって、mysql は次のように起動する必要があります。 docker run...