JavaScript实现时间表动态效果

本文实例为大家分享了js实现时间表动态效果的具体代码,供大家参考,具体内容如下

这里用到的是Date时间类

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>日期类 时间表</title>

</head>

<style>

#box{

background:url(img/1.jpg) no-repeat;

width: 600px;

height: 600px;

margin: 0 auto;

position: relative;

}

#m,#s,#h{position: absolute;top: 0px;left:50%;margin-left: -15px;}

/*这里利用绝对定位的margin负值法来让时分秒的指针图片居中,left:设置为50% margin-left为(图片宽度的负数值)/2*/

#h{background:url(img/2.png) no-repeat;width: 30px;height: 600px;position: absolute}

#m{background: url(img/3.png) no-repeat;width: 30px;height: 600px;}

#s{background: url(img/4.png) no-repeat;width: 30px;height: 600px;}

</style>

<script type="text/javascript">

window.onload=function(){

function go(){//封装函数

var oh=document.getElementById("h");

var om=document.getElementById("m");

var os=document.getElementById("s");

var time=new Date();//获取当前时间

var s=time.getSeconds();//获取秒数

var min=time.getMinutes();//获取分

var hour=time.getHours();//获取小时

os.style.transform="rotate("+s*6+"deg)";//运用transform方法可以让图片转动到指定位置 钟表上的每一个秒格的度数为360/60

om.style.transform="rotate("+min*6+"deg)";//用获取到的时间乘以转动的度数 让图片变到指定位置

oh.style.transform="rotate("+hour*30+"deg)";

}

go();

setInterval(go,20);//设置定时器每20毫秒执行一次函数,就可以实现动态的钟表

}

</script>

<body>

<div id="box"><!--布局 box为钟表的背景图 可以在网上找一张 设置为相对定位-->

<!--里面放三张图片 分别是时 分 秒的指针图 设置为绝对定位-->

<div id="h"></div>

<div id="m"></div>

<div id="s"></div>

</div>

</body>

</html>

效果图

以上是 JavaScript实现时间表动态效果 的全部内容, 来源链接: utcz.com/z/337004.html

回到顶部