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. ...
随机推荐
- 46 What Is Real Happiness ? 什么是真正的幸福 ?
46 What Is Real Happiness ? 什么是真正的幸福 ? ①The way people hold to the belief that a fun-filled, pain-fr ...
- java获取变量的类型
对于简单类型变量,是无法直接获得变量类型的://要想获取,必须自定义函数进行返回 对于包装类型变量,是可以直接获得的,变量名称.getClass().getName(); java中获取变量的类型可以 ...
- python 文件合并和编号
# -*- coding:utf-8 -*- import os import re p1=r"([0-9][0-9][AB])\.\w{3}$" pattern1=re.comp ...
- SPSS—回归—二元Logistic回归案例分析
数据分析真不是一门省油的灯,搞的人晕头转向,而且涉及到很多复杂的计算,还是书读少了,小学毕业的我,真是死了不少脑细胞, 学习二元Logistic回归有一段时间了,今天跟大家分享一下学习心得,希望多指教 ...
- POP介绍与使用实践(快速上手动画)[转]
前言 动画在APP开发过程中 大家多多少少都会接触到 而且随着ios7的扁平化风格启用之后 越来越多的APP开始尝试加入各种绚丽的动画交互效果以增加APP的用户体验(当然 还是以国外的APP居多) 有 ...
- node express session
在express4.0版本以上,需要单独增加session模块:express-session:https://www.npmjs.com/package/express-session 具体做法是, ...
- Android-Java-IO流概述
IO:I:Input输入 O:Output输出 IO流: IO:用于处理设备上数据的一种技术,处理设备上数据包括(Input / Output) ,设备指的是:内存,硬盘,U盘,打印机,等等..... ...
- Keil5编译STM32注意事项
硬件:某STM32开发板,ST-Link/V2 一.硬件相关: 1.引脚连接: pin7 <-> SWIO pin9 <-> SWCLK pin20/pin18 <-&g ...
- Android 如何修改gen下包的名字
前言 当将项目中包进行重命名后,所有包名字修改了,但是在gen目录下android sdk 自动生成的包名并没有修改,如果要引用R.java 中的字段, 又得import以前的包名字. 原因 出现 ...
- A SQL to insert continuous values
I need a table to store all the working days. I dont like loop, so I tried sql. The following is the ...