DOM时钟
使用JS使时钟运动
DOM运动,主要操作css3中transform:rotate();
计时器setInterval(),setTimeout(),如何防止时钟偷停;
时钟的时针、分针、秒针的运动的度数之比;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="decription" content="css3 transform rotate() 旋转,制造时钟运动效果">
<title>Clock</title>
<style>
#clock
{
width:500px;
height:500px;
border:30px solid black;
border-radius: 50px;
position: relative;
}
#clock div
{
position: absolute;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
}
#hour-hand
{
width:8%;
height:24%;
background-color: red;
left:50%;
margin-left: -4%;
top:50%;
margin-top: -5.5%;
box-shadow: 10px 10px #ccc;
}
#minute-hand
{
width:10%;
height:34%;
background-color: green;
left:50%;
margin-left: -5%;
top:50%;
margin-top: -5.5%;
}
#clock #second-hand
{
width:5%;
height:50%;
background-color: blue;
background-size: contain;
left:50%;
margin-left:-2.5%;
top:35%;
box-shadow: 5px 5px #ccc;
-webkit-transform-origin: 50% 45px;
-moz-transform-origin: 50% 45px;
transform-origin: 50% 45px;
}
</style>
<script src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oClock = document.getElementById("clock");
var oHourHand = document.getElementById("hour-hand");
var oMinuteHand =document.getElementById("minute-hand");
var oSecendHand = document.getElementById("second-hand");
var oDate = new Date(); //初始化时钟,获取系统时间,赋值给时、分、秒针
var nowHours = oDate.getHours();
var nowMinutes = oDate.getMinutes();
var nowSecond = oDate.getSeconds();
nowHours %=12;
var hoursDeg = 30*nowHours+nowMinutes/2+nowSecond/120+180;
var minutesDeg = 6*nowMinutes+nowSecond/10+180;
var secondsDeg = 6*nowSecond+180;
oSecendHand.style.webkitTransform="rotate("+secondsDeg+"deg)";
oMinuteHand.style.webkitTransform="rotate("+minutesDeg+"deg)"; //此处用到weikitTransform,请使用webkit内核浏览器进行查看
oHourHand.style.webkitTransform = "rotate("+hoursDeg+"deg)"; //可使用jQuery替代,用法自行查阅。
var startTime = oDate.getTime();
var count=0;
function fixed() //防止该事件被阻塞,时钟不准
{
count ++;
var offset = new Date().getTime()- (startTime + count*1000);
var nextTime = 1000 - offset;
if (nextTime<0) {nextTime = 0;};
setTimeout(fixed,nextTime);
secondsDeg +=6; //每秒时分秒针所走的距离
if (secondsDeg%360==0) {
secondsDeg=0;
};
minutesDeg +=1/10;
if (minutesDeg>=360) {
minutesDeg%=360;
};
hoursDeg +=1/120;
if (hoursDeg>=360) {
hoursDeg%=360;
};
oSecendHand.style.webkitTransform="rotate("+secondsDeg+"deg)";
oMinuteHand.style.webkitTransform="rotate("+minutesDeg+"deg)";
oHourHand.style.webkitTransform = "rotate("+hoursDeg+"deg)";
console.log(new Date().getTime() - (startTime + count * 1000));
}
setTimeout(fixed,1000)
}
</script>
</head>
<body>
<div id="clock">
<div id="hour-hand">
</div>
<div id="minute-hand">
</div>
<div id="second-hand">
</div>
</div>
</body>
</html>
DOM时钟的更多相关文章
- dom事件操作例题,电子时钟,验证码,随机事件
dom事件操作 当事件发生时,可以执行js 例子: 当用户点击时,会改变<h1>的内容: <h1 onClick="this.innerHTML='文本更换'"& ...
- jquery图片时钟
一.生成数字时钟 <script src="http://code.jquery.com/jquery-latest.js"></script> <s ...
- 如何用iframe标签以及Javascript制作时钟?
如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...
- HTML5 之Canvas 绘制时钟 Demo
<!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...
- js 动态时钟
js 动态时钟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- angularjs中展示富文本编辑器文本,向DOM中插入元素
前几天在用textangular富文本编辑器插件时,将存储的文本及格式存储到数据库中,但是从后台接口中再向angular页面插入时却不能执行,即在Angular中操作DOM没有实现,后来查看了一下,操 ...
- JS,Jquery,ExtJs不同脚本动态创建DOM对象
好久不来写东西了,这段时间太慢了,闲了下来看了几篇文章,觉得很好,同时也许咱们大家都能遇到,所以就把它记录下来... 简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主 ...
- JS之DOM编程
为什么学dom编程? 通过dom编程,我们可以写出各种网页游戏 dom编程也是我们学习ajax技术的基础,所以我们必需掌握好dom编程. dom编程简介 DOM=Document Object Mo ...
- 【转载】Dom篇
一. 初探Dom 1. Dom介绍 二. Dom基础 1. window顶级对象 2. body.document对象事件 3. 通用的HTML元素的事件 4. ...
随机推荐
- HDU 1040 As Easy As A+B (排序。。。水题)
题意:给定n个数,让你从小到大排序. 析:不说什么了. 代码如下: #include <cstdio> #include <iostream> #include <cst ...
- 16)maven lifecycle
http://maven.apache.org/guides/introduction/introduction-to-the-lifecycle.html http://maven.apache.o ...
- strcpy,strlen, strcat, strcmp函数,strlen函数和sizeof的区别
//计算字符串实际长度 //strlen()函数:当遇到'\0'时,计算结束,'\0'不计入长度之内,如果你只定义没有给它赋初值,这个结果是不定的,它会从首地址一直找下去,直到遇到'\0 ...
- (最小生成树) Borg Maze -- POJ -- 3026
链接: http://poj.org/problem?id=3026 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82831#probl ...
- google-glog功能介绍
google-glog功能介绍 分类: 其它类型2011-08-19 10:06 6618人阅读 评论(0) 收藏 举报 cookiesgooglestreammodulemapreducenull ...
- wxpython 图像编程
转: http://wxhowto.googlecode.com/svn-history/r6/trunk/body/ch10.tex 的 HTML 档. 使用图像编程 这一章来了解一下我们可以使用图 ...
- Docker搭建 MySQL 主从复制
为什么选 Docker 搭建主从复制需要两个以上的MySQL, 使用 Docker 非常方便.如果以前没用过,找个简单的文档看看,熟悉一下命令. 搭建过程 1.下载镜像 docker pull mys ...
- 通过oracle闪回查看表中值的变更履历信息
http://www.oracle.com/technetwork/cn/articles/week1-10gdba-093837-zhs.html 得到电影而不是图片:闪回版本查询 不需要设置,立即 ...
- Delphi for iOS开发指南(6):在iOS应用程序中使用ComboBox组件来从列表中选择某一项
http://blog.csdn.net/delphiteacher/article/details/8924110 Delphi for iOS开发指南(6):在iOS应用程序中使用ComboBox ...
- 【笔记】virtualbox+arch+kde5安装流水账
正常安装就是RTFD就行了,不行辅助这几个链接也行: 我先把整个脚本[1]放这里: loadkeys us parted mkfs.ext4 /dev/sda1mkfs.ext4 /dev/sda3 ...