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 でディスク領域をクリアする方法
推薦する
WeChatアプレットでのwxsファイルの素晴らしい使い方をいくつか紹介します
目次序文応用フィルタードラッグファイル間での参照の受け渡しwxsはjsロジック層にパラメータを渡しま...
MySQL データベースのインデックスとトランザクション
目次1. 索引1.1 コンセプト1.2 機能1.3 索引作成の原則1.3.1 ディスクアクセス回数を...
CentOS7でルートパスワードをリセットする方法
レンガを移動するプロセスでは、さまざまな環境および構成の問題があり、毎回異なるエラーが発生します。 ...
シンプルなウェブ計算機を実装するJavaScript
背景私は新しいプロジェクト チームに配属されたので、プロジェクトでは js を使用する必要があります...
IDEA 構成の Tomcat 起動エラーの問題を解決する
異なるサーブレット パスを構成するときに、次の 2 つのエラーが発生しました。 java.lang....
HTMLフォームタグチュートリアル（1）：
フォームは、動的な Web ページを実装するための主要な外部フォームです。フォームとフォーム フィー...
Centos6.9 インストール Mysql5.7.18 ステップ記録
インストール手順 rpm -ivh mysql-コミュニティ-共通-5.7.18-1.el7.x86...
W3C 検証に合格するにはどうすればいいですか?
W3C では、さまざまなタグの規定を設定するだけでなく、Web ページの作成者が実際に W3C 規...
JavaScript ES6 モジュールの詳細な説明
目次0. モジュールとは何か1.モジュールの読み込み1.1 方法1 1.2 方法2 2. 輸出と輸入...
ミニプログラムはミニプログラムクラウドを使用してWeChatの支払い機能を実装します
目次1. WeChat Payを開く1.1 アフィリエイト加盟店番号1.2 加盟店番号を追加する1....
Excelアップロード機能を実現するVue + iViewの完全コード
1. HTML部分 <Col span="2">ファイルをアップロー...
JavaScript でよく使われるいくつかの文字列メソッドの概要 (初心者必読)
JavaScriptでよく使われるいくつかの文字列メソッド文字列は読み取り専用データです。よく使用...
Angular 依存性注入の説明
目次概要1. 依存性注入2. Angularの依存性注入フレームワーク概要依存性注入: デザインパタ...
MySQLの遅いクエリ問題の詳細な分析データ送信
例を通して、MySQL のデータ テーブル送信のクエリが遅い問題の解決策を共有しました。最近、コード...
MySQL テーブルの垂直分割と水平分割
垂直分割垂直分割とは、データテーブルの列を分割すること、つまり、多くの列を持つテーブルを複数のテーブ...