结合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>
...全文
1081 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
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)吧。 如果是在项目里, 还是用已有的日历控件。自己改改样式就好了。

87,884

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧