<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
.box{
180px;
height:200px;
border:1px solid black;
background-color: gray;
margin:100px auto;
}
.box p{
text-align:center;
line-height:60px; /*设置文字高度*/
font-size:20px;
color:pink;
}
.box span{
display:block;
75px;
height:75px;
text-align:center;
line-height:75px;
border:1px solid black;
background-color: skyblue;
margin: 0 auto;
font-size:30px;
}
</style>
<script>
//js,上面的年月日和下方的今天的日子可以随着每天的时间而变化
window.onload=function()
{
var father=document.getElementById("father");
var kids=father.children;
var date=new Date();
kids[1].innerHTML=date.getDate(); //下方的盒子实时显示今天几号,今天的日子
//kids[0].innerHTML=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
kids[0].innerHTML=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+arr[date.getDay()];
//注意，date.getMonth()表示的是0--11月，所以要加1；date.getDay()显示的是0--6，正好arr数组中的礼拜几
}
</script>
</head>
<body>
<!-- 一个日历盒子，上面部分是年月日，下面部分是几号-->
<div class="box" id="father">
<p>2019-07-18</p>
<span>18</span>
</div>
</body>
</html>