码迷,mamicode.com
首页 > 其他好文 > 详细

日历+时钟

时间:2016-10-29 09:42:46      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:tar   play   tle   char   oct   script   minutes   seconds   date()   

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

日历+时钟

标签:tar   play   tle   char   oct   script   minutes   seconds   date()   

原文地址:http://www.cnblogs.com/xiaohaishuangyu/p/6009951.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!