使用html css和javascript的日曆

Question

我一直在嘗試使用HTML，css和javascript做日曆。我對他們三人都沒有經驗。

我還沒有得到它用JavaScript來的工作，所以SOFAR我剛纔用HTML + CSS和它的一個非常醜陋的解決方案創造了它：

CSS：

#day { 
    float: left; 
    border: 1px solid black; 
    width: 85px; 
    height: 85px; 
    padding: 5px; 
    margin: 5px; 
    border-radius: 18px; 
    } 

HTML：

<div id="content"> 
<h1>November</h1> 
<br> 
<div id="day"> 
1 
</div> 
<div id="day"> 
2 
</div> 
<div id="day"> 
3 
</div> 
<div id="day"> 
4 
</div> 
<div id="day"> 
5 
</div> 
<div id="day"> 
6 
</div> 
<div id="day"> 
7 
</div> 
<br> 
<div id="day"> 
8 
</div> 
<div id="day"> 
9 
</div> 
<div id="day"> 
10 
</div> 
<div id="day"> 
11 
</div> 
<div id="day"> 
12 
</div> 
<div id="day"> 
13 
</div> 
<div id="day"> 
14 
</div> 
<br> 
<div id="day"> 
15 
</div> 
<div id="day"> 
16 
</div> 
<div id="day"> 
17 
</div> 
<div id="day"> 
18 
</div> 
<div id="day"> 
19 
</div> 
<div id="day"> 
20 
</div> 
<div id="day"> 
21 
</div> 
<br> 
<div id="day"> 
22 
</div> 
<div id="day"> 
23 
</div> 
<div id="day"> 
24 
</div> 
<div id="day"> 
25 
</div> 
<div id="day"> 
26 
</div> 
<div id="day"> 
27 
</div> 
<div id="day"> 
28 
</div> 
<br> 
<div id="day"> 
29 
</div> 
<div id="day"> 
30 
</div> 
</div> 

我想一個for-loop會很好嗎？ 類似：

for(i = 0; i<30;i++){ 
    "code for creating day-boxes" 
} 

我發現一對夫婦的日曆在網上，但他們都是如此複雜，我並不真正做我想做的事情。

Answer 1

我不知道我是否可以得到你的問題的權利，但不應該以下工作？

var div = document.getElementById('content'); 

for(i = 1; i<=30;i++){ 
    div.innerHTML += '<div id=\'day\'>' + i + '</div>'; 
} 

Here is my jsfiddle-example

注意：不要使用相同的值（day）的ID。使用類屬性：

更改CSS來：

.day { 
    float: left; 
    border: 1px solid black; 
    width: 85px; 
    height: 85px; 
    padding: 5px; 
    margin: 5px; 
    border-radius: 18px; 
} 

，並使用此JavaScript代碼：

var div = document.getElementById('content'); 

for(i = 1; i<=30;i++){ 
    div.innerHTML += '<div class=\'day\'>' + i + '</div>'; 
} 

Answer 2

對於更先進，穩定，良好的文檔
http://jqueryui.com/datepicker/