简易JS时钟

最新推荐文章于 2024-05-15 20:43:52 发布

angyi0016

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量64

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/licnlt/p/6113254.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#yuan{
　　width: 300px;
　　height: 300px;
　　border: 4px solid blue;
　　border-radius: 100%;
　　margin-top: 50px;
　　margin-left:100px;
}
img{
　　border-radius:100%;
}
#shi{
　　width: 5px;
　　height: 130px;
　　background:yellow；
　　transform: rotate(0deg);
　　transform-origin: 100% 100%;
　　position: absolute;
　　top:72px;
　　left: 250px;
}

#fen{
　　width: 5px;
　　height: 140px;
　　background:green;
　　transform: rotate(0deg);
　　transform-origin: 100% 100%;
　　position: absolute;
　　top:60px;
　　left: 250px;
}
#miao{
　　width: 5px;
　　height: 150px;
　　background:blue;
　　transform: rotate(0deg);
　　transform-origin: 100% 100%;
　　position: absolute;
　　top:55px;
　　left: 250px;
}

</style>
</head>
<body>
<div id="yuan">
　　<img src="时钟表盘.jpg" width="300" height="300">
　　<div id="shi"></div>
　　<div id="fen"></div>
　　<div id="miao"></div>
</div>
<div id="abc"></div>

<script type="text/javascript">
//显示日期时间function distime(){
　　var now1=new Date();
　　document.getElementById('abc').innerHTML=(now1.getFullYear()+'年'+(now1.getMonth()+1)+'月'+now1.getDate()+'日'+now1.getHours()+'时'+now1.getMinutes()+'分'+now1.getSeconds()+'秒');
}
setInterval("distime()",1000);

//时钟
function shizhong(){
//时针
var now=new Date();
var shiZ=now.getHours();
if (shiZ>12) {
shiZ=shiZ-12;
}
shiZ=shiZ*30+now.getMinutes()*0.6;
document.getElementById('shi').style.transform="rotate"+"("+shiZ+"deg)";


//分针
var fenZ=now.getMinutes();
var fenZ=fenZ*6;
document.getElementById('fen').style.transform="rotate"+"("+fenZ+"deg)";

//秒针

var miaoZ=now.getSeconds();
var miaoZ=miaoZ*6;
document.getElementById('miao').style.transform="rotate"+"("+miaoZ+"deg)";

}
setInterval("shizhong()",1000);
</script>
</body>
</html>

转载于:https://www.cnblogs.com/licnlt/p/6113254.html

angyi0016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易JS时钟

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}#yuan{...
复制链接

扫一扫