HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/fun.js" defer="defer">
</script>
</head>
<body>
<div class="mydate">
<div class="date" id="date">2021年9月29日</div>
<div class="time" id="time">12:24:7</div>
</div>
</body>
</html>
css代码
body{
font-family: "arial black";
}
.mydate{
background-color: black;
height: 200px;
width: 900px;
margin: 0 auto;
color: white;
font-size: 48px;
text-align: center;
line-height: 100px;
}
.time{
font-size:48px;
}
js代码
var date=new Date();
var mydate=document.getElementById('date');
var mytime=document.getElementById('time');
function getDate(){
var day=date.getDay();
var myday;
switch(day){
case 0:
myday="天";
break;
case 1:
myday="一";
break;
case 2:
myday="二";
break;
case 3:
myday="三";
break;
case 4:
myday="四";
break;
case 5:
myday="五";
break;
case 6:
myday="六";
break;
}
mydate.innerHTML=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 星期"+myday;
};
function getTime(){
var date=new Date();
var hours=date.getHours();
var myhours;
if(hours=12){
myhours="下午"+(hours-9);
}else{
myhours="上午"+hours;
}
mytime.innerText=myhours+":"+date.getMinutes()+ ":"+date.getSeconds();
// setTimeout("getTime()",1000);
}
getDate();
getTime();
setInterval("getTime()",1000);
最终效果图