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 ポート転送、ローカル ポート転送、リモート ポート転送、動的ポート転送の詳細
推薦する
インターフェース設計の10の一般的なルール
<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...
Element-uiはテーブル内のセルを直接クリックして編集します
目次成果を達成する実装コード最近、会社でelementUIを使い始めたため、開発の過程でテーブルのセ...
ico ミラー コードを HTML に追加します (favicon.ico はルート ディレクトリに配置されます)
コード：コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC &...
Alibaba Cloudのセキュリティルール設定の詳細な説明
2日前、ダブル11ショッピングフェスティバルを利用して、Alibaba CloudでECS（サーバー...
docker を使用して kafka プロジェクトをデプロイする Centos6 方法の分析
この記事では、Docker を使用して Centos6 に Kafka プロジェクトをデプロイする方...
HTMLセマンティクスと関連するフロントエンドフレームワークの詳細な分析
セマンティクスについて意味論は、記号やシンボルとそれらが表す意味との関係を研究する学問です。言語学で...
データベース接続のURLの詳細な説明と概要
データベース接続のURLの詳細な説明と概要JDBC URL = プロトコル名 + サブプロトコル名 ...
Javascript を使用して、スライドバー効果のあるスライドナビゲーション プラグインを開発します。
目次1. はじめに2. 使用方法3. 開発プロセス1. モデル例2. イベントとアニメーション4. ...
uni-appがNFC読み取り機能を実装
この記事では、参考までに、NFC読み取り機能を実装するためのuni-appの具体的なコードを紹介しま...
Mysql インデックスと Redis ジャンプテーブルについての簡単な説明
まとめインタビュー中、MySQL インデックスの問題について議論しているときに、B+ ツリー、B ツ...
Windows10システムにスーパーセットをインストールする手順
Superset は、エレガントなインターフェースとデータ テーブルに基づく動的なデータ生成を主な機...
MySQLをインストールして設定し、ルートパスワードを変更する方法
1. インストールapt-get install mysql-server にはアカウントとパスワー...
a タグをクリックして入力ファイルのアップロードダイアログボックスを表示する方法
htmlコードをコピーコードは次のとおりです。 <SPAN class=tag><...
CSS3は子供のころの紙飛行機を実現する
今日は折り紙飛行機（飛べる飛行機）を作ります基本的にすべてCSSで実装されており、JSはごく一部に過...
HTML+CSSを使用してTG-visionホームページを作成する方法
今回はHTML+CSSレイアウトを使用して、TG-vision Shuanghui Mediaのホー...