<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 200px;
background-color:gold;
margin: 0 auto;
margin-top: 50px;
}
.box #up{
height: 50px;
text-align: center;
line-height: 50px;
}
.box #bottom{
width: 100px;
height: 100px;
margin: 0 auto;
margin-top: 25px;
text-align: center;
line-height: 100px;
font-size: 20px;
background-color: blueviolet;
}
<body>
<!-- 简单日历 -->
<div class="box">
<div id="up">2019年6月27日</div>
<div id="bottom">星期三</div>
</div>
<script>
简单日历
var up=document.getElementById("up")
var bottom=document.getElementById("bottom")
console.log(bottom);
var d=new Date()
var y=d.getFullYear()
var m=d.getMonth()+1
var day=d.getDate()
var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
var w=d.getDay()
up.innerHTML=y+"年"+m+"月"+day+"日"
bottom.innerHTML=arr[w]
08-01
265
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
07-23
612
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)