css3 + jquery模拟时钟效果

原创 2016年05月31日 18:15:58

干货
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟时钟</title>
<style>
body, div {
margin: 0;
padding: 0;
box-sizing: border-box;
}


.box {
width: 300px;
height: 300px;
margin: 120px auto;
background: url("images/20213d50b825d729db533ff8fb41283e.png");
border-radius: 50%;
position: relative;
}


.dial span {
position: absolute;
width: 1px;
height: 8px;
background-color: mediumspringgreen;
left: 149px;
transform-origin: 0 150px;
}


.hand {
position: absolute;
width: 10px;
height: 10px;
left: 145px;
top: 145px;
background-color: aquamarine;
border-radius: 50%;
}


.sec {
position: absolute;
width: 2px;
height: 100px;
background-color: red;
left: 3px;
bottom: 5px;
transform-origin: bottom;
}


.min {
position: absolute;
width: 4px;
height: 75px;
background-color: aqua;
left: 2px;
bottom: 5px;
transform-origin: bottom;
}


.hou {
position: absolute;
width: 6px;
height: 50px;
background-color: #b2f610;
left: 1px;
bottom: 5px;
transform-origin: bottom;
}
</style>
</head>
<body>
<div class="box">
<div class="dial">
</div>
<div class="hand">
<span class="sec"></span>
<span class="min"></span>
<span class="hou"></span>
<span class="center"></span>
</div>
</div>
<script src="jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function () {
todial($(".dial"));
gettimes();
setInterval(function () {
gettimes();
}, 1000)
});


//得到刻度
function todial(obj) {
var str = "";
var ideg = 6;
for (var i = 0; i < 60; i++) {
str += "<span style='transform:rotate(" + ideg * i + "deg)'></span>"
}
obj.append(str)
}


//初始化时间
function gettimes() {
var i_data = new Date();
var i_sec = i_data.getSeconds();
var i_min = i_data.getMinutes();
var i_hou = i_data.getHours();
$(".sec").css("transform", "rotate(" + i_sec * 6 + "deg)");
$(".min").css("transform", "rotate(" + (i_min * 6 + i_sec / 60 ) + "deg)");
$(".hou").css("transform", "rotate(" + (i_hou % 12 * 30 + i_min / 60) + "deg)");
}
</script>
</body>
</html>

版权声明:本文为博主原创文章,但是为了方便学习可以随意转载。

相关文章推荐

css3+js+html实现模拟时钟

border *{ margin:0; padding:0; } .one{ width:300px; height:300px; text-align: center;...

分享纯css3实现时钟效果

  • 2013-03-15 14:31
  • 98KB
  • 下载

纯css3实现圆盘时钟动画效果

先让我们来看下整体效果,请看下图:作为小白的我,看到别人写的钟表特效有点心动,于是自己也动手写了一个,主要是为了练练脑子,接下来直接看代码:html: css样式:.t2{ width: 100%;...

CSS3--利用transform属性制作时钟效果

首先简单总结一下transform这个属性,transform的含义是:改变,使…变形;转换。 transform的常用属性:        1)rotate()  旋转函数 取值度数     ...

css3+js 实现时钟效果

css3+js 实现时钟效果

CSS3+js实现简单的旋转圆环时钟效果实例

时钟的demo *{margin:0;padding:0;} .loading{margin:100px auto;width:25em;height:8em;position: relati...

如何用jQuery和CSS3制作数字时钟

这要从上周开始说起,当我看到 漂亮的 dribbble 截图,就立刻感觉到一种要将其转变为一个可工作的时钟,并且和本站读者分享的欲望。 如果你想了解如何制作它,请继续阅读! DEMO DOWNL...

jquery+css3 时钟

jquery+css3时钟

  • 2013-12-26 14:32
  • 1.87MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)