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