今天，给大家分享一个用JS做的时钟。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style media="screen">
#wrap {
width: 500px;
height: 500px;
border: 5px solid black;
border-radius: 500px;
margin: auto;
position: relative;
}

</style>
<title></title>
</head>
<body>
<div id="wrap">

</div>
</body>
<script type="text/javascript">
for (var i = 1; i < 61; i++) {                    //制作刻度
var positer =document.createElement('div'); // 设置一个新的div 命名为positer  也可以在css 样式中写 这里我写在 js里
positer.style.width = '10px';
positer.style.height = '500px';
positer.style.position = 'absolute';
positer.style.left = '245px';
// positer.style.background = 'blue';
wrap.appendChild(positer);                         // 把positer 放入 wrap 中

var scale = document.createElement('div');   //设置一个新的div 命名为scale （也可以写在css中）
scale.style.width = '5px';
scale.style.height = '10px';
scale.style.background = 'gray';
scale.style.margin = 'auto';
positer.appendChild(scale);                         //  把scale 放入 positer 中

var number = document.createElement('span');   
number.style.display = "inline-block";
positer.appendChild(number);
number.innerHTML = i ;                                // 把 i 插入 number中
number.style.color = 'gray';
number.style.fontSize = '0.5em';
var warp = document.getElementById('wrap');

positer.style.transform = "rotate("+i * 6+"deg)";   // positer 随着 i的变化旋转的角度也变化
number.style.transform = "rotate(-"+i * 6+"deg)"; 
if (i % 5 ==0 ) {                      // 当 i能被5整除时
scale.style.width = '8px';          
scale.style.height = '20px';
scale.style.background = 'black';
number.innerHTML =(i / 5);    // 把（i／5）的值插入到number 中
number.style.color = 'black';    // 改变颜色
number.style.fontSize = '2em';  //  改变字体大小
}
}
dot =document.createElement('div');  // 定义中间的中心轴
dot.style.width = '20px';
dot.style.height = '20px';
dot.style.background ='red';
dot.style.position = 'absolute';
dot.style.borderRadius = '20px';
dot.style.top = '240px';
dot.style.left = '240px';
dot.style.zIndex = 100;
wrap.appendChild(dot);    //把dot 放入 wrap中
// 定义时针
hour = document.createElement('div');
hour.style.width = '0';
hour.style.height = '120px';
hour.style.border = '4px solid black';
hour.style.position = 'absolute';
hour.style.borderRadius = '20px';
hour.style.transformOrigin = 'bottom';  // 定义它的起始转动的位置
hour.style.left = '246px';
hour.style.top = '126px';
wrap.appendChild(hour);      // 把 hour 放入 wrap中
//定义分针
minute = document.createElement('div');
minute.style.width = '0';
minute.style.height = '160px';
minute.style.border = '3px solid black';
minute.style.borderRadius = '20px';
minute.style.position = 'absolute';
minute.style.transformOrigin = 'bottom';
minute.style.left = '247px';
minute.style.top = '87px';
wrap.appendChild(minute);
//定义秒针
second = document.createElement('div');
second.style.width = '0';
second.style.height = '300px';
second.style.border = '2px solid red';
second.style.position = 'absolute';
second.style.left = '248px';
second.style.transformOrigin = '1px 250px';     // 定义秒针起始转动的位置 1px指 它宽度的一半 250px指正个 wrap 的一半
wrap.appendChild(second);
function timeCounter(){                             //定义函数 命名为 timeCounter
var currentDate = new Date();                 //取现在的时间赋值于变量 currentDate
var Hhour = currentDate.getHours();       // 取现在的小时
var Mminute = currentDate.getMinutes();  // 取现在的分钟
var Ssecond = currentDate.getSeconds();  // 取现在的秒
var seconds = Hhour * 3600 + Mminute * 60 + Ssecond ;    // 把今天所有的秒数赋值给变量 seconds
hour.style.transform = 'rotate('+seconds / 120+'deg)';        // 时针每秒转的度数
minute.style.transform = 'rotate('+seconds * 0.1+'deg)';    // 分针每秒转的度数
second.style.transform = 'rotate('+seconds * 6+'deg)';      // 秒针 每秒转的度数
}
setInterval('timeCounter()', 1000);  // 重复函数timeCounter 每1000毫秒执行一次 也就是1秒

</script>
</html>

这里的图片即使做好的图片，做好的秒针，分针，时针都是动的。

JS 做时钟的更多相关文章

  1. js 动态时钟

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

  2. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  3. JS实现时钟特效

    <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...

  4. socket.io+angular.js+express.js做个聊天应用(三)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/www19940501a/article/details/27590611 接着前面博客文章socke ...

  5. js做小数运算精度问题

    当js做小数运算时存在bug,大概是因为二进制和十进制转换之间的关系. bug如图 解决方案 1.运算结果后,乘以100再除以100.网上推荐这种方法但是乘以1000再除以1000依然存在精度问题 2 ...

  6. HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

  7. 用 JS 做一个数独游戏（二）

    用 JS 做一个数独游戏(二) 在 上一篇博客 中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...

  8. 用 JS 做一个数独游戏（一）

    用 JS 做一个数独游戏(一) 数独的棋盘由 9x9 的方格组成,每一行的数字包含 1 ~ 9 九个数字,并且每一列包含 1 ~ 9 这 9 个不重复的数字,另外,整个棋盘分为 9 个 3x3 的块, ...

  9. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

随机推荐

  1. POJ3928Ping pong[树状数组 仿逆序对]

    Ping pong Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3109   Accepted: 1148 Descrip ...

  2. 第8章 Java类的三大特性之一：封装

    1.什么是封装 1.1概念 将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的操作和访问.主要是类的属性 1.2好处 a.只能通过规定的方法访问数据b.隐藏类 ...

  3. JavaScript中的this陷阱的最全收集 没有之一

    当有人问起你JavaScript有什么特点的时候,你可能立马就想到了单线程.事件驱动.面向对象等一堆词语,但是如果真的让你解释一下这些概 念,可能真解释不清楚.有句话这么说:如果你不能向一个6岁小孩解 ...

  4. VMware三种上网模型

    今天捣鼓了一会虚拟机,对上网方式又学习了一遍,之前摆弄过,现在又捡起来了,主要自己整理一下,方面后面复习.主要有三种网络模型:桥接.仅主机(Host-Only).NAT.自己亲测了这三种方式,都可以上 ...

  5. 微信支付开发(1) JS API支付

    关键字:微信支付 微信支付v3 jsapi支付 统一支付 Native支付 prepay_id 作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/wxpayv3 ...

  6. [转]Struts2.3.16.1+Hibernate4.3.4+Spring4.0.2 框架整合

    原文地址:http://blog.csdn.net/ycb1689/article/details/22928519 最新版Struts2+Hibernate+Spring整合 目前为止三大框架最新版 ...

  7. float,double和decimal类型

    float:浮点型,含字节数为4,32bit,数值范围为-3.4E38~3.4E38(7个有效位) double:双精度实型,含字节数为8,64bit数值范围-1.7E308~1.7E308(15个有 ...

  8. 【bzoj3505】 Cqoi2014—数三角形

    http://www.lydsy.com/JudgeOnline/problem.php?id=3505 (题目链接) 题意 给定一个n*m的网格,请计算三点都在格点上的三角形共有多少个. Solut ...

  9. 移动端浏览器和微信浏览器上禁止body的滚动条

    一般禁止body滚动的做法就是设置overflow:hidden. 但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用,然后我分析了我的写法,就是在body上加了一个class去定义属性,然后改 ...

  10. iOS播放器 - AVAudioPlayer

    今天记录一下AVAudioPlayer,这个播放器类苹果提供了一些代理方法,主要用来播放本地音频. 其实也可以用来播放网络音频,只不过是将整个网络文件下载下来而已,在实际开发中会比较耗费流量不做推荐. ...