JS+CSS3实现的简易钟表效果示例
更新时间：2019年04月13日 08:57:36 作者：吞石鱼
这篇文章主要介绍了JS+CSS3实现的简易钟表效果,涉及JavaScript结合定时器的页面元素动态设置与数值计算相关操作技巧,需要的朋友可以参考下
本文实例讲述了JS+CSS3实现的简易钟表效果。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.jb51.net js+css3简易钟表</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
width: 300px;
height: 300px;
background-color: aliceblue;
margin: 200px auto;
position: relative;
box-sizing: border-box;
}
#wrap > div{
position: absolute;
top: 50%;
left: 50%;
}
#hour{
width: 6px;
height: 60px;
background-color: #000000;
margin: -60px -3px;
transform-origin: 3px 60px;
}
#min{
width: 4px;
height: 80px;
background-color: #000000;
margin: -80px -2px;
transform-origin: 2px 80px;
}
#sec{
width: 2px;
height: 100px;
background-color: red;
margin: -100px -1px;
transform-origin: 1px 100px;
}
#point{
width: 20px;
height: 20px;
background-color: burlywood;
margin: -10px -10px;
border-radius: 50%;
}
#circle{
width: 300px;
height: 300px;
position: relative;
}
#circle li{
list-style: none;
width: 2px;
height: 6px;
background-color: #000000;
position: absolute;
transform-origin: 1px 150px;
left: 149px;
top: 0px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div id="point"></div>
<ul id="circle"></ul>
</div>
</body>
<script type="text/javascript">
var hourDom=document.getElementById('hour');
var minDom=document.getElementById('min');
var secDom=document.getElementById('sec');
var cricle=document.getElementById('circle');
//创建表盘，ul宽高为wrap宽高，以wrap中心点为变换基点，动态分配6°的li
for (var i=0;i<60;i++) {
var li=document.createElement('li');
cricle.appendChild(li);
li.style.transform='rotate('+i*6+'deg)';
}
//延时函数，确保每一秒更新一次最新时间。并且计算时间准确值。
setInterval(function(){
var date=new Date();
var hour=date.getHours();
var min=date.getMinutes();
var sec=date.getSeconds();
min+=sec/60;
hour+=min/60;
//当前时间*每个单位时间走的角度=指针指向
hourDom.style.transform='rotate('+hour*30+'deg)';
minDom.style.transform='rotate('+min*6+'deg)';
secDom.style.transform='rotate('+sec*6+'deg)';
},1000)
</script>
</html>
运行效果：
感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。
PS：这里再为大家推荐几款时间及日期相关工具供大家参考使用：
在线日期/天数计算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi
在线日期计算器/相差天数计算器：
http://tools.jb51.net/jisuanqi/datecalc
在线日期天数差计算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq
Unix时间戳(timestamp)转换工具：
http://tools.jb51.net/code/unixtime
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript时间与日期操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要为大家介绍了js html5获取input焦点的输入框并赋值实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
js中编码函数：escape,encodeURI与encodeURIComponent详解
escape(), encodeURI()和encodeURIComponent()是在Javascript中用于编码字符串的三个常用的方法，而他们之间的异同却困扰了很多的Javascript初学者，这篇文章详细的给大家介绍了js中编码函数：escape,encodeURI与encodeURIComponent的相关资料，需要的朋友可以参考下。2017-03-03
web-view内嵌H5与uniapp数据的实时传递解决方案
这篇文章主要介绍了web-view内嵌H5与uniapp数据的实时传递,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
现在基本上我很少在对象里面写事情触发行为了,因为感觉那样做相同的对象代码利用率太低,容易导致代码冗余.2008-08-08
这篇文章主要介绍了JavaScript数组及常见方法,结合实例形式总结分析了JavaScript数组的基本获取、添加、删除、排序、翻转等相关操作技巧,需要的朋友可以参考下2021-09-09
本文主要介绍了es6中??与||区别小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2024-01-01
这篇文章主要为大家详细介绍了JavaScript实现简单抽奖系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Javascript中valueOf与toString区别浅析
Javascript中valueOf与toString区别浅析，需要的朋友可以参考一下2013-03-03
这篇文章主要为大家详细介绍了ionic实现可滑动的tab选项卡切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了微信小程序判断用户是否需要再次授权获取个人信息,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
最新评论