この記事の例は、JSによるシンプルなカレンダーの作成方法を示しています。参照のためにそれを共有してください。詳細は次のとおりです。
今日、私はJSを使用して年次カレンダーを作成する方法を学び、これの使用を確認しました。タブの生成とは少し異なります。 innerhtmlを新しい使用に使用しました。私はそれに固執できることを願っています。すべてのJSマスターからもっとアドバイスをします。
innerhtmlの使用
次に、top.innerhtml = "....."を使用します。このIDの場所にHTMLコードを書き込む方法。
たとえば、top.innerhtml = "";トップの対応する位置にボタンを表示できます！
プログラムの実装のアイデア：
1。タブと同様に、下部にdivがあることを除きます。
2。innerhtmlの使用
3。配列の使用
①定義：arr [0,1,2,3]
②使用：arr [0]
4。文字列接続
①関数：2つの文字列 "+"を連結します
②問題：使用（）を使用して接続の優先順位を解決します
ソースコードの実装：
JavaScript：
次のようにコードをコピーします。<script type = "text/javascript">
window.onload = function（）
{
var arr = [
「ほぼ新年ですが、一緒に爆竹を出発しましょう！ '、
「私はすぐに学校に行きます、不幸です！ '、
'幸せな女性の日！ '、
「それはかなり鈍い4月です」、
「労働は輝かしい！ '、
'幸せな子供の日！ '、
「なんて暑い7月！」
「8月1日の陸軍の日！」
「学校は再び始まっています！ '
];
var odiv = document.getElementById（ 'tab'）;
var oli = odiv.getelementsbytagname（ 'li'）;
var otxt = odiv.getelementsbytagname（ 'div'）[0];
var i = 0;
for（var i = 0; i <oli.length; i ++）
{
oli [i] .index = i;
oli [i] .onmouseover = function（）
{
for（var i = 0; i <oli.length; i ++）
{
oli [i] .classname = '';
}
this.className = 'Active';
otxt.innerhtml = '<h2>'+（this.index+1）+'毎月のアクティビティ</h2> <p>'+arr [this.index]+'</p>';
};
}
};
</script>
CSS：
次のようにコードをコピーします。<style type = "text/css">
* {パディング：0;マージン：0; }
li {list-style：none; }
ボディ{背景：＃f6f9fc;フォントファミリー：arial; }
.calendar {width：210px;
マージン：50px auto 0;
パディング：10px 10px 20px 20px;
背景：＃eae9e9; }
.calendar ul {width：210px;
オーバーフロー：隠し;
パディングボトム：10px; }
.calendar li {float：left;
幅：58px;
高さ：54px;
マージン：10px 10px 0 0;
ボーダー：1pxソリッド#fff;
背景：＃424242;
色：#ffff;
テキストアライグ：センター;
カーソル：ポインター; }
.calendar li H2 {font-size：20px;パディングトップ：5px; }
.calendar li p {font-size：14px; }
.calendar .active {border：1px solid＃424242;
背景：#ffff;
色：＃e84a7e; }
.calendar .active H2 {}
.calendar .active p {font-weight：bold; }
.calendar .text {width：178px;
パディング：0 10px 10px;
ボーダー：1pxソリッド#fff;
パディングトップ：10px;
背景：＃f1f1f1;
色：＃555; }
.calendar .text H2 {font-size：14px;マージンボトム：10px; }
.calendar .text p {font-size：12px;ラインハイト：18px; }
</style>
HTML：
次のようにコードをコピーします：<body>
<div id = "tab">
<ul>
<li> <h2> 1 </h2> <p> 1月</p> </li>
<li> <h2> 2 </h2> <p> 2月</p> </li>
<li> <h2> 3 </h2> <p> 3月</p> </li>
<li> <h2> 4 </h2> <p> 4月</p> </li>
<li> <h2> 5 </h2> <p> 5月</p> </li>
<li> <h2> 6 </h2> <p> 6月</p> </li>
<li> <h2> 7 </h2> <p> 7月</p> </li>
<li> <h2> 8 </h2> <p> 8月</p> </li>
<li> <h2> 9 </h2> <p> 9月</p> </li>
<li> <h2> 10 </h2> <p> 10月</p> </li>
<li> <h2> 11 </h2> <p> 11月</p> </li>
<li> <h2> 12 </h2> <p> 12月</p> </li>
</ul>
<div>
</div>
</div>
</body>
レンダリングは次のとおりです。
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。