日历+时钟

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_30429201

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量107

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaohaishuangyu/p/6009951.html

<!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>

转载于:https://www.cnblogs.com/xiaohaishuangyu/p/6009951.html