<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS实现时钟</title>
<style>
.clock {
width: 600px;
height: 600px;
margin:50px auto;
background: url(images/clock.jpg) no-repeat;
position: relative;
}
.clock div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;

}
.h {
background: url(images/hour.png) no-repeat center center;
}
.m {
background: url(images/minute.png) no-repeat center center;
}
.s {
background: url(images/second.png) no-repeat center center;
}
</style>
</head>
<body>
<div class="clock" id="clock">
<div class="h" id="h"></div>
<div class="m" id="m"></div>
<div class="s" id="s"></div>
</div>
</body>
<script>
window.onload=function(){
function $(id){
return document.getElementById(id);
}
var clock=$('clock');
var hour=$('h');
var minute=$('m');
var second=$('s');
var s=0,m=0,h=0,ms=0;
function fn(){
var date=new Date();//得到最新的时间
ms=date.getMilliseconds();//得到毫秒数
// console.log(ms);
s=date.getSeconds()+ms/1000;//得到秒数 例如12.5S
m=date.getMinutes()+s/60;//得到分数 例如40.5M
h=date.getHours()%12+m/60;//得到小时 例如5.5H

//旋转角度
second.style.webkitTransform = 'rotate(' + s * 6 + 'deg)'; 
minute.style.webkitTransform = 'rotate(' + m * 6 + 'deg)'; 
hour.style.webkitTransform = 'rotate(' + h * 30 + 'deg)'; 
}
fn();
setInterval(fn,1000);
}
</script>
</html>

JS实现时钟特效的更多相关文章

  1. js 时钟特效

      时钟特效 CreateTime--2018年2月24日15:11:23 Author:Marydon 实现方式:都是基于HTML5的canvas标签实现的 款式一 借助jQuery插件实现 < ...

  2. js 动态时钟

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

  3. 案例：用JS实现放大镜特效

    案例:用JS实现放大镜特效 案例:用JS实现放大镜特效

  4. 简单的javascript实例一(时钟特效)

    方便以后copy 时钟特效 <html> <head> <meta http-equiv="Content-Type" content="t ...

  5. 使用CSS3生成的电子时钟特效

    在线演示 本地下载 突然觉得自己对带工作的态度亟需改正,虽然不喜欢现在的加班生活,但是自己要去接受自己不喜欢的,才能获得自己喜欢的. 这是自己好久之前丛过的一个时钟,网上应该有这个的教程,虽然实现的效 ...

  6. js页面载入特效如何实现

    js页面载入特效如何实现 一.总结 一句话总结:可以加选择器(里面的字符串)作为参数,这样函数就可以针对不同选择器,就很棒了. 1.特效的原理是什么? 都是通过标签的位置和样式来实现特效的. 二.js ...

  7. 前端小插件之手写js循环滚动特效

    很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...

  8. 原生js实现架子鼓特效

    这是代码完成的效果,按下abcd会出现对应的架子鼓音乐的效果. 简单的介绍下代码思路,html和css部分就不多说了. 重要的是js部分. 大致是这样的, 首先获取到所有的按钮为一个数组,然后遍历整个 ...

  9. 纯js时钟特效详细代码分析实例教程

    电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先准备一 ...

随机推荐

  1. Adobe Flash Player 因过期而遭遇阻止怎么办

    百度搜索"adobe flash player ppapi "并找到搜索结果中包含www.adobe.com的网址进行在线下载安装即可搞定这个问题[注意要对应你电脑系统中的浏览器, ...

  2. a链接易混淆与form表单简易验证用法详解

    链接可以说遍布互联网,比如你想提供一个可以跳转到百度首页的链接给网友,那么代码如下: <a href="http://www.baidu.com">百度一下,你就知道& ...

  3. PCB Design_经验之谈

    所谓覆铜,就是将PCB上闲置的空间作为基准面,然后用固体铜填充,这些铜区又称为灌铜.敷铜的意义在于,减小地线阻抗,提高抗干扰能力:降低压降,提高电源效率:与地线相连,还可以减小环路面积.也出于让PCB ...

  4. Linux开机最简化

    [root@localhost ~]# LANG=en [root@localhost ~]# for root in chkconfig --list|grep 3:on|awk '{print $ ...

  5. 201521123102 《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 在实验中,Sc ...

  6. 201521123081《Java程序设计》 第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 参考资料:百度脑图(上图为第3周实验学习总结中未展开部分) 1.2 使用常规方法总结其他上课内容. 多态.思维导图中有提及. 2. ...

  7. 201521123055 《Java程序设计》第2周学习总结

     1. 本章学习总结 (1)认识PATH和CLASSPATH (2)SET PATH/CLASSPATH和-cp的用法 (3)了解BigDecimal.BigInteger.ArrayList/Lis ...

  8. Ansible系列(一)：基本配置和使用

    本文目录:1.1 安装Ansible1.2 配置Ansible 1.2.1 环境配置 1.2.2 SSH互信配置 1.2.3 简单测试1.3 inventory Ansible是一种批量.自动部署工具 ...

  9. java类成员变量与代码块初始化

    首先根据下面的这个一段代码:引入关于java初始化顺序的问题public class InitationTest extends Person { public InitationTest() { S ...

  10. AJAX二级下拉联动【XML方式】

    AJAX二级下拉联动案例 我们在购物的时候,常常需要我们来选择自己的收货地址,先选择省份,再选择城市- 有没有发现:当我们选择完省份的时候,出现的城市全部都是根据省份来给我们选择的.这是怎么做到的呢? ...