jsはシンプルなカウントダウンを実装します
|
この記事の例では、参考までに簡単なカウントダウンを実装するためのjsの具体的なコードを共有しています。具体的な内容は次のとおりです。
コード：
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>ドキュメント</title>
<script src="./3. 10未満の場合はゼロを入力してください.js"></script>
<スタイル>
div {
フロート: 左;
幅: 100ピクセル;
高さ: 100px;
背景色: #000;
テキスト配置: 中央;
行の高さ: 100px;
色: #fff;
フォントサイズ: 30px;
右マージン: 10px;
}
</スタイル>
</head>
<本文>
<div></div>
<div></div>
<div></div>
<div></div>
<スクリプト>
タグ名によって要素を取得します。
var inputTime = +new Date('2021-02-05 00:00:00'); // ユーザーの入力時刻から 1970 年 1 月 1 日までの合計ミリ秒数 setInterval(countTime, 1000);
カウントタイム();
関数 countTime() {
var nowTime = +new Date(); //現在の時刻から1970年1月1日までの合計ミリ秒数 // console.log(timer);
var times = (inputTime - nowTime) / 1000; // 秒 var d = parseInt(times / 60 / 60 / 24); // 日 div[0].innerHTML = addZero(d) + 'days';
var h = parseInt(times / 60 / 60 % 24) //div[1].innerHTML = addZero(h) + 'time';
var m = parseInt(times / 60 % 60); //div[2].innerHTML = addZero(m) + '分';
var s = parseInt(times % 60); //秒 div[3].innerHTML = addZero(s) + 'seconds';
}
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: mysql 5.7.11 winx64.zip インストールと設定方法のグラフィックチュートリアル
>>: Linux サーバーのステータスとパフォーマンスに関連するコマンドの詳細な説明
推薦する
MySQL マスターとスレーブの不整合とその解決策の詳細な説明
1. MySQL マスタースレーブ非同期1.1 ネットワーク遅延MySQLのマスタースレーブレプリケ...
ソフトウェア 404 と 404 エラーとは何か、またそれらの違いは何ですか
まず、404 とソフト 404 とは何でしょうか? 404: 簡単に言えば、ユーザーが存在しないペー...
mysqlタイムスタンプの使用
序文：タイムスタンプ フィールドは、MySQL でよく使用されます。たとえば、データ行が作成または変...
CSSスタイルを使用してシンプルなHTMLログインインターフェースを設計する
login.html 部分: <!DOCTYPE html> <html lang...
MySQL がテーブルを読み取れないエラー (MySQL 1018 エラー) の解決方法
1. エラーの再現MySQL データベースにはアクセスできますが、データベース テーブルを読み取るこ...
Blazor における CSS 分離の問題
1. 環境VS 2019 16.9.0 プレビュー 1.0 .NET SDK 5.0.100 2. ...
クロスドメイン js フロントエンドの 8 つの実装ソリューション
目次1. jsonp クロスドメイン2. document.domain + iframe クロスド...
Ubuntu ベースのディストリビューションに Microsoft TrueType フォントをインストールするチュートリアル
Linux 上の LibreOffice で Microsoft ドキュメントを開くと、フォントが少...
IE5.0以降のHTCコンポーネントの定義の概要
Microsoft IE 5.0 がリリースされる前は、Web プログラミングにおける最大の課題は、...
Docker はキューとタスクのスケジューリングを実現するために Laravel アプリケーションをデプロイします
前回の記事では、Docker を使用して Laravel アプリケーションをデプロイする方法について...
Dockerデータ管理とネットワーク通信の使用
Docker をインストールし、Docker コアとインストールを通じて簡単な操作を実行できます。 ...
bitronix を使用して MySQL に接続するときの MySQLSyntaxErrorException の解決方法
bitronix を使用して MySQL に接続するときの MySQLSyntaxErrorExce...
HTML入力で値が変更されたときにリスナーイベントを追加することの簡単な分析
達成される効果多くの場合、入力ボックスの値の変化をリアルタイムで監視し、ブラウザを誘導してウェブサイ...
Linux システムでのユーザー管理の概要
目次1. ユーザーとユーザーグループの重要性1) ユーザーの存在意義2) ユーザーグループの重要性2...
Centos7 ベースの Nginx Web サイト サーバーの構築の詳細説明 (仮想 Web ホストの構成を含む)
1. Nginx サービス基盤Nginx (エンジン x) は、パフォーマンスの最適化のために特別...