日历+时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.first{
margin: 100px auto;
width: 600px;
height: 400px;
background-color: skyblue;
background-image: url(img/u=457074535,933096207&fm=21&gp=0.jpg);
}
#data1{
margin: 60px auto;
background-color: lightcyan;
width: 600px;
height: 200px;
}
#timer{
/*background-color: green;*/
margin: 10px;
width: 400px;
height: 60px;
float: right;
margin-right: -20px;
margin-top: -2px;
/*margin-top: -120px;*/
}
.data span{
margin-top: 80px;
text-align: center;
display: block;
width: 600px;
height: 20px;
line-height: 100px;
color: darkblue;
font-size: 60px;
background-color: cornflowerblue;
}
.data .data2{
font-size: 40px;
color: brown;
/*text-align: center;*/
margin-top: 220px;
width: 600px;
/*height: 60px;*/
}
#timer{
/*text-align: center;*/
margin-left: -60px;
margin-top: 80px;
color:red;
font-size: 40px;
}
</style>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var hours=today.getHours();
var minutes=today.getMinutes();
var seconds=today.getSeconds();
var m=checkTime(m);
var s=checkTime(s);
var box = document.getElementById("data1");
var boxs = box.children;
var da = ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"];
var date =new Date();
boxs[0].innerHTML = date.getFullYear() + "年" + (date.getMonth()+1) + "月" + date.getDate() + "日" + " " +
da[date.getDay()-1] ;
boxs[1].innerHTML = date.getDate();
document.getElementById("timer").innerHTML=hours+":"+minutes+":"+seconds;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i;
}
</script>
</head>
<body onload="startTime()">
<div class="first">
<div class="data" id="data1">
<div class="data2"></div>
<span></span>
</div>
<div id="timer">
</div>
</div>
</body>
</html>
