H5 Clock

来源：互联网发布：湖南有色行情分析软件编辑：程序博客网时间：2024/05/21 17:41

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>COLOCK</title>
<style>
html {
height:100%;
}
body {
height:100%;
background-color:white;
}
#yuan {
height:600px;
width:600px;
background-color:gray;
border:solid 2px black;
/*截取弧度矩形的四个定点的弧度转化*/
border-radius:300px;
position:relative;
margin:100px auto;
}
#fang{
height:200px;
width:560px;
/*相对位置的定位背景色*/
background-color:white;
border: solid 1px black;
position:absolute;
top:200px;
left:21px;
}
#date{
height:20px;
width:100px;
/*相对位置定位背景色*/
/*background-color: blue;*/
/*字体的大小*/
font-size:15px;
font-weight: bold;
text-align: center;
position:absolute;
top:10px;
right:20px;

}
#time{
height:160px;
width:560px;
/*相对位置定位背景色*/
/*background-color: blue;*/
/*字体的大小*/
font-size:120px;
text-align:center;
line-height: 160px;
position:absolute;
top:30px;
}

</style>
</head>
<body>

<div id="yuan">

<div id="fang">

<div id="date">1970-01-01</div>
<div id="time">01:01:01</div>
</div>
</div>

<script language="javaScript" type="text/javaScript">

// 创建函数
function showTime()
{
// 创建对象
var myDate=new Date();
// 获取当前的日期：年year 月month(计算机从 0 计算月份表示为 0-11) 日day
var year=myDate.getFullYear();
var month=myDate.getMonth()+1;
var day=myDate.getDate();
// 获取当前的时间 : 时 hours 分 minute 秒 second
var hours=myDate.getHours();
var minute=myDate.getMinutes();
var second=myDate.getSeconds();
// 补齐显示格式
hours=hours<10?"0"+hours:hours;
minute=minute<10?"0"+minute:minute;
second=second<10?"0"+second:second;
// 获取元素的索引 ID
var dateDiv=document.getElementById("date");
var timeDiv=document.getElementById("time");
// 改变文本的值
// innerHTML
dateDiv.innerHTML=year+"-"+month+"-"+day;
timeDiv.innerHTML=hours+":"+minute+":"+second;

}


// 调用方法函数
showTime();

// 循环使用方法
// setInterval 运行的方法间隔时间（单位毫秒）
setInterval(showTime,1000);

</script>

</body>
</html>

0 0