<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box {
background: url(http://img1.imgtn.bdimg.com/it/u=3134457222,3663040433&fm=21&gp=0.jpg);
background-size: 100% 100%;
width: 520px;
height: 100px;
background-color: rgb(57,139,209);
}
.img {
position: relative;
float: left;
width: 70px;
height: 70px;
top: 15px;
left: 20px;
}
.hour {
height: 100px;
position: relative;
float: left;
width: 230px;
margin-left: 30px;
line-height: 100px;
font-weight: 500;
}
.min {
display: block;
position: absolute;
height: 100px;
width: 160px;
font-size: 60px;
color: white;
}
.second {
display: block;
position: absolute;
width: 60px;
height: 100px;
left: 150px;
top: 10px;
font-size: 30px;
color: white;
text-align: center;
}
.date {
position: relative;
float: left;
width: 175px;
height: 100px;
color: white;
}
.day {
position: absolute;
font-size: 25px;
height: 50px;
top: 25px;
font-weight: 500;
}
.year {
position: absolute;
font-size: 18px;
height: 50px;
top: 55px;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="img">
<img src="下载.png" alt="" />
</div>
<div class="hour">
<span class="min">00:00</span>
<span class="second">00</span>
</div>
<div class="date">
<p class="day">星期六</p>
<spa class="year">9999年12月31日</span>
</div>
</div>
<script type="text/javascript">
window.onload = function (){
function timer(){
//获取时间
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
h<10 ? h = "0"+h : h;
m<10 ? m = "0"+m : m;
s<10 ? s = "0"+s : s;
//拼接时间
var day = document.getElementById("box").children;
day[1].children[0].innerHTML = h+":"+m;
day[1].children[1].innerHTML = s;
//拼接星期和日期
var arr = ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"];
day[2].children[0].innerHTML = arr[today.getDay()-1];
day[2].children[1].innerHTML = today.getFullYear() + "年" + (today.getMonth() + 1) + "月" + today.getDate() + "日";
}
//开启定时器
setInterval(timer, 1000);
}
</script>
</body>
</html>