javascript - 使用 html css 和 javascript 的日历

Question

我一直在尝试使用 HTML、CSS 和 JavaScript 制作日历。我对这三个方面都没有什么经验。

我还没有让它与 javascript 一起工作，到目前为止我只是用 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 循环会好吗？像这样的东西:

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

注意:不要对 id 使用相同的值 (day)。使用类属性:

将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>';   
}