<!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. 201521123091 《Java程序设计》第6周学习总结

    Java 第六周总结 第六周的作业. 目录 1.本章学习总结 2.Java Q&A 3.码云上代码提交记录及PTA实验总结 1.本章学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以 ...

  2. 201521123107 《Java程序设计》第10周学习总结

    第10周作业-异常与多线程 1.本周学习总结 2.书面作业 1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? 只有try块中 ...

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

    1. 本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传.参考资料:百度 ...

  4. java课程设计——猜数游戏个人博客

    1.团队课程设计链接 团队博客:http://www.cnblogs.com/springbreezemiles/p/7064135.html 2.个人负责模块 猜数部分的算法及代码实现. 3.自己的 ...

  5. Struts2第二篇【开发步骤、执行流程、struts.xml讲解、defalut-struts讲解】

    前言 我们现在学习的是Struts2,其实Struts1和Struts2在技术上是没有很大的关联的.Struts2其实基于Web Work框架的,只不过它的推广没有Struts1好,因此就拿着Stru ...

  6. Mysql的基本命令图

    如果看不清的,右键图片在新标签页打开! 这是经过我的整理出来的!如果有重要的再补充把-..

  7. PowerDesigner连接MySQL和逆向工程图

    0.写在前面的话 最近想梳理公司项目的表间关系,从项目后台管理系统的操作入手,以及代码的hibernate注解入手,都不算特别尽人意,于是最后还是鼓捣了一下PowerDesigner的逆向工程图,这样 ...

  8. vue2.0动态绑定图片src属性值初始化时报错

    在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <te ...

  9. 基于FPGA的腐蚀膨胀算法实现

    本篇文章我要写的是基于的腐蚀膨胀算法实现,腐蚀膨胀是形态学图像处理的基础,,腐蚀在二值图像的基础上做"收缩"或"细化"操作,膨胀在二值图像的基础上做" ...

  10. HTML 4.01+5基礎知識

    HTML 4.01+5 1.Html結構:html>head+body 2.Html快捷鍵:!加Tab(在sublime中) 3.雙標籤: ①常用標籤 h1.h2.h3.h4.h5.h6 p.c ...