<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.divv{
height: 100px;
width:670px;
background-color:#5299D6;
margin: 100px auto;
background: url(img/A32C9E68-984A-460F-9B0E-010F10B4FA60.png)no-repeat;
background-size:cover;/*//背景图自适应*/
}
span{
display: block;
height: 100px;
float: left;
margin-left:50px ;
}
.s1{
width: 100px;
}
.s2{
width: 200px;
line-height: 100px;
text-align: center;
font-size:50px ;
color: white;
/*background-color:yellow;*/
}
.s3{
height: 50px;
width: 170px;
/*position: relative;*/
line-height: 50px;
text-align: center;
font-size:20px ;
color: white;
}
.s4{
height: 50px;
width: 170px;
line-height: 50px;
text-align: center;
color: white;
}
</style>
<script>
window.onload=function zz(){
setInterval(zz,1000);//开启定时器
var div=document.getElementById("div1");
var divs=div.children;
var arr =["星期一","星期二","星期三","星期四","星期五","星期六","星期日"];
var time =new Date();
divs[3].innerHTML=time.getFullYear() + "年" + (time.getMonth()+1) + "月"
+time.getDate() + "日";
divs[2].innerHTML=arr[time.getDay()-1];
// function zz(){
var endTime = new Date();
var h =endTime.getHours();//小时
var m = endTime.getMinutes();//分钟
var s = endTime.getSeconds(); //秒数
h<10 ? h="0"+h : h;
m<10 ? m="0"+m : m;
s<10 ? s="0"+s : s;
divs[1].innerHTML=h+":"+ m+":"+ s;
// }
}
</script>
</head>
<body>
<div class="divv" id="div1">
<span class="s1"></span>
<span class="s2"></span>
<span class="s3"></span>
<span class="s4"></span>
</div>
</body>
</html>