<!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中String = null 与 String = "" 的区别

    JAVA中String = null 与 String = ""的区别 笔者今天在Debug的时候发现的NPE(NullPointerException),辛辛苦苦地调试了半天,终 ...

  2. 【Beta】Daily Scrum Meeting——Day3

    站立式会议照片 1.本次会议为第三次Meeting会议: 2.本次会议在早上9:40,在陆大实验室召开,本次会议为25分钟讨论今天要完成的任务以及接下来的任务安排. 燃尽图 每个人的工作分配 遇到的困 ...

  3. 201521123011 《Java程序设计》 第三周学习总结

    1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...

  4. 201521123088《java程序设计》第三周学习总结

    1. 本周学习总结 本周学习了关于Java的封装,所谓封装就是将属性私有化,提供公有的方法访问私有属性 2. 书面作业 代码阅读 public class Test1 { private int i ...

  5. 201521123005 《Java程序设计》 第十二周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  6. 201521123013 《Java程序设计》第12周学习总结

    1. 本章学习总结 2. 书面作业 将Student对象(属性:int id, String name,int age,double grade)写入文件student.data.从文件读出显示. Q ...

  7. 201521123018 《Java程序设计》第11周学习总结

    1. 本章学习总结 你对于本章知识的学习总结 2. 书面作业 一.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问, ...

  8. python之面向对象2

    一.类命名空间与对象.实例的命名空间    常见一个类就会创建一个类的名称空间,用来储存类中定义的所有名字,这些名字成为类的属性  而类有两种属性:静态属性和动态属性 静态属性就是直接在类中定义的变量 ...

  9. [转载]iOS开发之手势识别

    感觉有必要把iOS开发中的手势识别做一个小小的总结.在上一篇iOS开发之自定义表情键盘(组件封装与自动布局)博客中用到了一个轻击手势,就是在轻击TextView时从表情键盘回到系统键盘,在TextVi ...

  10. js 倒计时（服务器时间同步）

    首先说一下,为什么要服务器时间同步, 因为服务器时间和本地电脑时间存在一定的时间差.有些对时效性要求非常高的应用,例如时时彩开奖,是不能容忍这种时间差存在的. 方案1:每次倒计时去服务端请求时间 // ...