使用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/