使用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时钟的更多相关文章

  1. dom事件操作例题，电子时钟，验证码，随机事件

    dom事件操作 当事件发生时,可以执行js 例子: 当用户点击时,会改变<h1>的内容: <h1 onClick="this.innerHTML='文本更换'"& ...

  2. jquery图片时钟

    一.生成数字时钟 <script src="http://code.jquery.com/jquery-latest.js"></script> <s ...

  3. 如何用iframe标签以及Javascript制作时钟？

    如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

  4. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  5. js 动态时钟

    js 动态时钟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  6. angularjs中展示富文本编辑器文本，向DOM中插入元素

    前几天在用textangular富文本编辑器插件时,将存储的文本及格式存储到数据库中,但是从后台接口中再向angular页面插入时却不能执行,即在Angular中操作DOM没有实现,后来查看了一下,操 ...

  7. JS,Jquery,ExtJs不同脚本动态创建DOM对象

    好久不来写东西了,这段时间太慢了,闲了下来看了几篇文章,觉得很好,同时也许咱们大家都能遇到,所以就把它记录下来... 简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主 ...

  8. JS之DOM编程

    为什么学dom编程? 通过dom编程,我们可以写出各种网页游戏 dom编程也是我们学习ajax技术的基础,所以我们必需掌握好dom编程.  dom编程简介 DOM=Document Object Mo ...

  9. 【转载】Dom篇

    一. 初探Dom     1. Dom介绍 二. Dom基础     1. window顶级对象     2. body.document对象事件     3. 通用的HTML元素的事件     4. ...

随机推荐

  1. HDU 3361 ASCII （水题，不说什么了）

    题意:给你n个十进制数,让你输出相应的ASCII. 析:无,没说的,直接输出就好了. 代码如下: #include <iostream> #include <cstdio> # ...

  2. _RecordsetPtr使用方法

    _variant_t vUsername,vID,vname; //变量声明 _RecordsetPtr m_pRecordset;     //记录集 CString strid; _Connect ...

  3. PAT甲 1032. Sharing (25) 2016-09-09 23:13 27人阅读 评论(0) 收藏

    1032. Sharing (25) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue To store Engl ...

  4. jquery添加select option两种代码思路比较

    功能需求:在客户选择了check_in_date和check_out_date之后,将在check_in_date至check_out_date的promotions中自动添加符合条件的promoti ...

  5. eclipse/myeclipse介绍

    eclipse更加纯净,比较简洁,需要某些插件的时候,需要自己去配置才可以,而myeclipse自带了很多的插件功能更为强大. 在eclipse于myeclipse创建的项目是有差异的,eclipse ...

  6. FreeBSD下面安装PostgreSQL。

    1.确认pkg版本大于1.1.4,可以用pkg -v查看,如果小于此版本,请升级.2.在/usr/local/etc/pkg.conf文件中,删除掉repository相关的语句,像PACKAGESI ...

  7. SQL SERVER 2014--学习笔记1

    --======================================================= 在SQL SERVER 2014中,最吸引眼球的就是内存表和本地编译存储过程,在MS ...

  8. php重写session的存储机制

    重写session的存储机制 Session数据区 默认以 文件的形式存储与服务器操作系统临时目录中! 当 session数据区过多时,文件形式的存储,操作速度变慢.磁盘的读写(IO,input/ou ...

  9. 用ndp部署storm应用

    本文由作者余宝虹授权网易云社区发布. 使用户ndp部署一个Java应用大家都非常熟悉的,但是看到某些同学用非常繁琐的方式部署storm应用的时候,我觉得很有必要整一个帮助教程,ndp帮助文档里面没有, ...

  10. Day 31 面向对象考试题 第四次考试.

    一 基础知识和函数: 1.文件操作有哪些模式?请简述各模式的作用 r ,只读模式[默认模式,文件必须存在,不存在则抛出异常] w,只写模式[不可读:不存在则创建:存在则清空内容] x, 只写模式[不可 ...