一个简单的日历如下：这里主要用到JavaScript中的
new
Date();
属性。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#cal {
width: 200px;
height: 220px;
background-color: blue;
margin: 80px auto;
padding-top: 10px;
}
#cal > div {
padding: 0 10px;
color: #fff;
}
p {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 36px;
background-color: green;
margin: 40px auto
}
</style>
</head>
<body>
<div id="cal">
<div id="topDiv"></div>
<p id="day"></p>
</div>
<script type="text/javascript">
//2017年10月6日 星期五
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
var weekday = date.getDay();
var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var str = year+"年"+(month+1)+"月"+day+"日 "+arr[weekday];
var cal = document.getElementById("cal");
// 给第一个孩子div设置内容
cal.children[0].innerHTML = str;
// 给第二个孩子p设置内容
cal.children[1].innerHTML = day;
</script>
</body>
</html>