结合CSS、HTML、JS设计日历，大神来帮帮小白啊！！！

qq_41967869 2018-05-04 05:54:35

如图所示，打要实现开窗口，弹出一个框，要求你输入年份。输入年份后，会展示当年12个月的日历。以下是CSS代码和其中一个月代码。要求使用函数来实现。谢谢大大佬啦！！
<head>
<meta charset="UTF-8">
<title>生成年历</title>
<style>
body{text-align:center;}
.box{margin:0 auto;width:880px;}
.title{background:#ccc;}
table{height:200px;width:200px;font-size:12px;text-align:center;float:left;margin:10px;font-family:arial;}
</style>
</head>
<body>

<div class="box">

<table>

<tr class="title"><th colspan="7">2018 年 1 月</th></tr>
<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>
<tr><td colspan="1"> </td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
<tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td></tr>
<tr><td>28</td><td>29</td><td>30</td><td>31</td></tr>

</table>

...全文

1048 4 打赏收藏举报

写回复

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

东明之羞 2018-05-09

打赏
举报

日历，可以通过气象台获取一串字符串，然后将它解析成具体的日期和月份

囧 2018-05-07

打赏
举报

做了一个简单的，纯展示，没交互


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>日历</title>
	<style>
      body{text-align:center;}
      .box{margin:0 auto;width:880px;}
      .title{background:#ccc;}
      table{height:200px;width:200px;font-size:12px;text-align:center;float:left;margin:10px;font-family:arial;}
    </style>
</head>
<body>
	<div class="box"></div>
</body>
<script type="text/javascript">
var year = parseInt(prompt("请输入年份："), 10) || new Date().getFullYear();
var month = [31,28,31,30,31,30,31,31,30,31,30,31];
var day = [];
var temp = '<table><tr class="title"><th colspan="7">{y} 年 {m} 月</th></tr><tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>{tr}</table>'

document.querySelector(".box").innerHTML = calendar(year);

function calendar(y){
	var arr = [];
	for(var i = 0; i < 31; i++){
		day.push(i + 1);
	}
	month[1] = ((y % 4)==0) && ((y % 100)!=0) || ((y % 400)==0) ? 29 : 28;
	for(var i = 1; i <= 12; i++){
		arr.push(create(y, i));
	}
	return arr.join('');
}
function create(y, m){
	var str = temp.replace('{y}', y).replace('{m}', m);
	var date = new Date(y, m - 1, 1);
	var arr = [], tr = [];
	arr = arr.concat(new Array(date.getDay()), day.slice(0, month[m - 1]));
	arr = arr.concat(new Array(arr.length % 7));
	for(var i = 0; i < arr.length; i += 7){
		tr.push("<tr><td>" + arr.slice(i, i + 7).join("</td><td>") + "</td></tr>");
	}
	return str.replace('{tr}', tr.join(''));
}
</script>
</html>

yzqdt520 2018-05-05

打赏
举报

不知道，前段时间，我们用的php实现

风中的少年 2018-05-05

打赏
举报

日历涉及的东西比较广，如果是自己搞着完，先还是去看看别人的代码(http://www.jq22.com/jquery-info6125)吧。如果是在项目里，还是用已有的日历控件。自己改改样式就好了。