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 サーバーのステータスとパフォーマンスに関連するコマンドの詳細な説明
推薦する
Linuxにソフトウェアをインストールするいくつかの方法の詳細な説明
1. RPM パッケージのインストール手順: 1. soft.version.rpm などの対応する...
WeChatミニプログラムでのマップの正しい使用例
目次序文1. 準備2. 実際の戦闘2.1 ミニプログラムの権限を設定する2.2 カプセル化ツールの機...
mysql-8.0.17-winx64 のデプロイメント方法
1. 公式サイトからmysql-8.0.17-winx64をダウンロードし、Zipファイル形式を選択...
HTML テーブル境界コントロールの詳細な説明
上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...
JD Vue3コンポーネントライブラリはミニプログラム開発の詳細なプロセスをサポートします
ソースコードプレビュー: https://github.com/jdf2e/nutui NutUI ...
MySQLクエリ最適化に必須の知識ポイントのまとめ
序文クエリの最適化は一夜にして達成できるものではありません。対応するツールの使い方を学び、他の人の経...
LinuxカーネルとSVNバージョン間の競合の解決策
現象システムは Linux システムカーネルを正常にコンパイルできましたが、SVN をインストールし...
複数のパッケージソースから同時にパッケージをロードするようにnpmを設定する方法
目次1. ローカルストレージを構築する2. npmパッケージを作成し、プライベートリポジトリにアップ...
MySQL統計テーブルのサイズを説明する例
各データベース内の各テーブルのサイズをカウントすることは、データ ガバナンスの最も単純な要件の 1 ...
Windows で mysql5.7.21 をインストールするための詳細なチュートリアル
この記事では、参考までにMySQL 5.7.21のインストールチュートリアルを紹介します。具体的な内...
Jsモジュールパッケージのエクスポートの使用法と違いにはインポートが必要
目次1. Commonjsのエクスポートとrequireの使用1.1 CommonJS エクスポート...
Tomcat マルチインスタンスの展開と構成の原則
1. ファイアウォールをオフにし、Tomcatのインストールに必要なソフトウェアパッケージを/opt...
MySQL データを誤って削除した場合の簡単な解決策 (MySQL フラッシュバック ツール)
概要Binlog2sql は、Python で開発されたオープンソースの MySQL Binlog ...
JavaScript が Xiaomi のカルーセル効果を模倣
この記事は、透明度を変えてカルーセルにするXiaomiカルーセルを真似て書いたものです。初心者なので...
Linux parted ディスク パーティション実装手順の分析
fdisk と比較すると、parted はあまり使用されず、主に 2T を超えるパーティションに使用...