用js写的时钟Demo

css代码：

<style type="text/css">

.a {

width: 200px;

height: 100px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -100px;

margin-top: -50px;

line-height: 100px;

border-radius: 20px;

background: #333;

color: chartreuse;

font-size: 40px;

cursor: pointer;

text-align: center;

transition: all .3s ease-in;

-moz-transition: all .3s ease-in;

-webkit-transition: all .3s ease-in;

box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.6);

-moz-box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.6);

-webkit-box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.6);

}

.a:hover {

color: aqua;

}

</style>

 

html代码：

<div class="a" id="time"></div>

 

js代码：

<script>

//获取改变的div

time = document.getElementById("time");

//封装函数

function shenTime() {

var mydate = new Date();

hours = mydate.getHours();

//判断小时小于10在前面加上0

if(hours<10)

{

hours="0"+hours;

}

minutes = mydate.getMinutes();

if(minutes<10)

{

minutes="0"+minutes;

}

seconds = mydate.getSeconds();

if(seconds<10)

{

seconds="0"+seconds;

}

mytime = hours + ":" + minutes + ":" + seconds;

//改变值

time.innerHTML = mytime;

document.title=mytime;

}

//调用时钟函数

shenTime();

//定时器每秒循环时钟函数

setInterval(function () {

shenTime();

}, 1000);

</script>

 

时钟图片：