<!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. 转：【Java集合源码剖析】TreeMap源码剖析

    前言 本文不打算延续前几篇的风格(对所有的源码加入注释),因为要理解透TreeMap的所有源码,对博主来说,确实需要耗费大量的时间和经历,目前看来不大可能有这么多时间的投入,故这里意在通过于阅读源码对 ...

  2. 团队作业4----第一次项目冲刺（Alpha版本）4.28

    a.提供当天站立式会议照片 会议内容 今天我们主要针对统计结果的表现形式进行了一些讨论,我们考虑是直接显示统计数据或者是用一些直观的图形来体现,最后经过讨论我们大部分人认为选择数据与图形更加形象直观. ...

  3. 团队作业10——项目复审与事后分析（Beta阶段）

    一.Beta阶段项目复审 http://www.cnblogs.com/womenshuodedoudui/p/7001208.html 二.事后诸葛分析 http://www.cnblogs.com ...

  4. Java学习7——一些注意的地方

    (学习运算符.if和switch分支.for与while与do...while循环.break和continue.递归,内容和C++没差,挑了几个注意点) 运算符 逻辑与(&)和短路与(&am ...

  5. java课设-计算数学表达式的程序，201521123050,51 团队

    1.团队名称.团队成员介绍 团队名称:天空 团队成员: 肖世松 谢庆圆 2.项目git地址 项目git地址 3.项目git提交记录截图(要体现出每个人的提交记录.提交说明) 4.项目功能架构图与主要功 ...

  6. Java：extends和implements的区别+用法

    Java代码中的extends和implements让我感到很迷惑,现在终于弄明白它们之间的区别和用法了. [c-sharp] view plain copy //定义一个Runner接口 publi ...

  7. (转载)Oracle12g安装图解与安装过程常见问题注意事项

    首附转载地址:http://jingyan.baidu.com/article/f96699bbab21c0894e3c1bf8.html 首先,点击"setup",建议以管理员身 ...

  8. MySQL集群（三）mysql-proxy搭建负载均衡与读写分离

    前言 前面学习了主从复制和主主复制,接下来给大家分享一下怎么去使用mysql-proxy这个插件去配置MySQL集群中的负载均衡以及读写分离. 注意:这里比较坑的就是mysql-proxy一直没有更新 ...

  9. PHP多进程编程pcntl_fork解

    其实PHP是支持并发的,只是平时很少使用而已.平时使用最多的应该是使用PHP-FMP调度php进程了吧. 但是,PHP的使用并不局限于做Web,我们完全也可以使用PHP来进行系统工具类的编程,做监控或 ...

  10. maven 执行mvn package/clean命令出错

    mvn compile/test都没报错,但是执行mvn package和mvn clean时候就报错:a required class was missing while executing.... ...