JavaScriptはシンプルな日付効果を実装します
|
JavaScriptの日付エフェクトの具体的なコードは参考用です。具体的な内容は次のとおりです。 コード上で直接:
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>タイトル</title>
<スタイル タイプ="text/css">
*{
パディング: 0;
マージン: 0;
}
＃日付{
幅: 450ピクセル;
高さ: 300px;
背景色: ダークオレンジ;
境界線の半径: 10px;
マージン: 100px 自動;
}
#現在日付{
幅: 450ピクセル;
高さ: 60px;
行の高さ: 60px;
テキスト配置: 中央;
色: #fff;
フォントサイズ: 26px;
}
＃日{
幅: 200ピクセル;
高さ: 200px;
行の高さ: 200px;
背景色: 蘭色;
マージン: 0 自動;
テキスト配置: 中央;
}
</スタイル>
</head>
<本文>
<div id="日付">
<p id="nowDate"></p>
<p id="日"></p>
</div>
<script type="text/javascript">
// タグを取得します var nowDate = document.getElementById("nowDate");
var day = document.getElementById("day");
// タイマーを使用して時間の変更を更新します setInterval(nowNumTime,1000);
現在の時間数();
関数 nowNumTime(){
var now = 新しい Date();
var hour = now.getHours();
var 分 = now.getMinutes();
var second = now.getSeconds();
var temp = '' + (hour>12 ? hour-12:hour);
var year = now.getFullYear();
var 月 = now.getMonth();
var d = now.getDate();
var week = now.getDay();
console.log(week); //インデックス var weeks = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
// コンソールログ(temp);
(時間 === 0)の場合{
温度 = '12';
}
temp = temp + (分 <10 ? ':0':":"+分);
temp = temp + (秒 <10 ? ':0':":"+秒);
temp = temp + (hour>=12 ? 'PM':'AM');
temp = `${year}${month}${d}${temp}${weeks[week]}`;
// コンソールログ(temp);
nowDate.innerHTML = temp;
}
</スクリプト>
</本文>
</html>実装効果図:
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: CentOS 6 または CentOS 7 でディスク領域をクリアする方法
推薦する
ウェブデザインには目的、アイデア、思考、そして粘り強さがなければならない
<br />はじめに：このアイデアは、数日前に上級ウェブデザインの次の記事を考えていると...
Centos7 で ZooKeeper3.4 ミドルウェアを構築するための一般的なコマンドの概要
1.ダウンロードして解凍する1. Zookeeperの紹介分散サービス フレームワークとして、Zoo...
TypeScript インターフェース定義ケースチュートリアル
インターフェースの役割:インターフェース (英語: interface) の機能は、簡単に言えば、コ...
CSS3 フィルターを使用して PNG 画像の色を変更するサンプル コード
この方法は、CSS3のdrop-shadow filterを使用して、png画像の不透明部分に任意の...
MySQL のインデックスとビューの使用方法と違いの詳細な説明
序文この記事では主に、MySQL のインデックスとビューの使用方法と違いを紹介し、参考と学習のために...
MySQL のフィールドにデフォルトの時間を追加する方法
日付型の違いと用途MySQL には、日付、時刻、年、日付時刻、タイムスタンプの 5 つの日付タイプが...
JS におけるメモリと変数の保存についての詳細な説明
目次序文JSマジックナンバー数値の保存バイナリ変換方法なぜ 0.1 + 0.2 !== 0.3 なの...
Docker デプロイメント Springboot プロジェクト例の分析
この記事は主に、docker デプロイメント springboot プロジェクトのサンプル分析を紹介...
Docker を使用して静的 Web サイト アプリケーションを作成する (複数の方法)
静的ウェブサイトをホストできるサーバーは数多くあります。この記事では、nginx、apache、to...
JS で配列の重複排除を実装する 7 つの方法
目次1. Set()+Array.from() を使用する2. 2層ループ+アレイ接合方式の使用3....
Vue がコンポーネント間の通信を実現するいくつかの方法 (複数のシナリオ)
目次1. 小道具親 >>> 子 (Props)子 >>> 親 (...
HTML/XHTML における img 画像タグの基本的な使用法の詳細な説明
画像タグは、Web ページに画像を表示するために使用されます。 HTML/XHTML 画像 <...
効率的なMySQLページングの詳細な説明
序文通常、大量のデータを扱う MySQL クエリには「ページング」戦略が採用されます。ただし、ページ...
同じ日の最初の3つのデータを取得するためのMySQLタイムラインデータ
テーブルデータを作成する テーブル `praise_info` を作成します ( `id` bigi...
Google 翻訳ツール: 多言語ウェブサイトを素早く実装
Google Chinaは、ウェブサイトやブログを素早く簡単に多言語化できる翻訳ツールをリリースした...