JavaScript_日历

10011111

已于 2022-05-11 18:14:59 修改

阅读量223

点赞数 1

文章标签： javascript css css3

于 2019-11-25 13:31:48 首次发布

本文链接：https://blog.csdn.net/qq_43788669/article/details/103236465

版权


<!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>日历</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		.box{
			width: 300px;
			height: 300px;
			margin: 100px auto;
			text-align: center;
			background-color: blue;
		}
		.box .box1{
			width: 100%;
			height: 40px;
			line-height: 40px;
			font:20px/40px "微软雅黑";
		}
		.box .box2{
			width: 200px;
			height: 200px;
			background-color: yellow;
			margin: 0px auto;
			margin-top: 30px;
			font: 20px/200px "微软雅黑";
			/*vertical-align: center;*/
		}
	</style>
	<script type="text/javascript">
		
		
		window.onload=function(){
			var d = new Date();
			var week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
			var ht = document.getElementById("head");
			var ht1 = ht.children[0];
			var ht2 = ht.children[1];
			ht1.innerHTML=d.getFullYear()+"年"+(d.getUTCMonth()+1)+"月"+d.getDate()+"日";
			ht2.innerHTML=week[d.getDay()];

		}
	</script>
</head>
<body>
	<div class="box" id="head">
		<div class="box1"></div>
		<div class="box2"></div>
	</div>
</body>
</html>