您的位置：首页 > Web前端 > HTML5

H5 Clock

2016-12-11 11:56 190 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Tag

相关文章推荐

新的分享

章节导航