该放假了,心情不好,写个小表针感慨一下时间为什么过得如此之快,写了个小钟表.

提示 1:这个钟表的秒针转的非常快,如果需要和当前的网络时间一样,请修改</script>上一行的代码,把1换成1000

　　 2:无需素材.直接运行即可

　　 3:如有bug请直接留言

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main{
width: 300px;
height: 300px;
background: #CCCCCC;
border-radius: 50%;
position: relative;
margin: auto;
}
.div1{
width: 40px;
height: 150px;
position: absolute;
left: 130px;
text-align: center;
transform-origin: bottom;
font-size: 18px;
}
.seconds{
width: 4px;
height: 130px;
font-size: 10px;
margin-top: 20px;
left: 148px;
background: white;
text-align: center;
transform-origin: bottom;
position: absolute;
z-index: 10;
border-radius: 40%;
}
.minutes{
width: 6px;
height: 120px;
font-size: 6px;
margin-top: 30px;
left: 147px;
background: greenyellow;
color: white;
text-align: center;
transform-origin: bottom;
position: absolute;
border-radius: 40%;
z-index: 11;

}
.span{
display: block;
}
.hour{
width: 8px;
height: 100px;
font-size: 8px;
margin-top: 50px;
left: 146px;
background: red;
color: white;
text-align: center;
transform-origin: bottom;
position: absolute;
border-radius: 40%;
}
body{
background: blanchedalmond;
}
.yuanDian{
width: 30px;
height: 30px;
border-radius: 50%;
background: gold;
position: absolute;
margin-left: 135px;
margin-top: 135px;
z-index: 12;
}

</style>
</head>
<body>
<div id="main">
<div class="yuanDian"></div>
<div class="div1"><span class="span">12</span></div>
<div class="div1"><span class="span">1</span></div>
<div class="div1"><span class="span">2</span></div>
<div class="div1"><span class="span">3</span></div>
<div class="div1"><span class="span">4</span></div>
<div class="div1"><span class="span">5</span></div>
<div class="div1"><span class="span">6</span></div>
<div class="div1"><span class="span">7</span></div>
<div class="div1"><span class="span">8</span></div>
<div class="div1"><span class="span">9</span></div>
<div class="div1"><span class="span">10</span></div>
<div class="div1"><span class="span">11</span></div>
<div class="seconds"></div>
<div class="minutes"></div>
<div class="hour"></div>
</div>

<script type="text/javascript">
var nowDate = new Date;
// alert(nowDate);
// 现在的秒数
var nowSeconds = nowDate.getSeconds() ;
// 现在的分数
var nowMinutes = nowDate.getMinutes() ;
// 现在的小时数
var nowHour = nowDate.getHours() ;
var div1 = document.getElementsByClassName('div1');
var span1 = document.getElementsByClassName('span');
//秒数
var second = document.getElementsByClassName('seconds')[0];
//分钟
var minutes = document.getElementsByClassName('minutes')[0];
//小时
var hour = document.getElementsByClassName('hour')[0];
for (var i = 0;i < div1.length; i++) {
// 分布数字
div1[i].style.transform = 'rotateZ('+ i * 30 +'deg)';
// 调整数字角度让其变正
span1[i].style.transform = 'rotateZ('+ i * -30 +'deg)';
}
//让秒数和网络上的秒数一样
second.style.transform = 'rotateZ('+ nowSeconds * 6+'deg)';
// 让分钟数和网络上的分钟数一样
minutes.style.transform = 'rotateZ('+ nowMinutes * 6+'deg)';
// 让小时数和网络上的小时数一样(分针每走1分钟,时针走0.5度)
hour.style.transform = 'rotateZ('+ (nowHour * 30 + 0.5 * nowMinutes) +'deg)';
//定时器
setInterval(function(){
//每隔1秒钟让当前的秒数+1
nowSeconds++;
//让秒针度数转到当前的数字度数
second.style.transform = 'rotateZ('+ nowSeconds * 6+'deg)';
// 如果当前的秒数余上60值是0(秒针在60秒的时候)
if (nowSeconds%60==0) {
//让分钟前进一位
nowMinutes++;
//让分钟的度数转到当前的数字度数
minutes.style.transform = 'rotateZ('+ nowMinutes * 6+'deg)';
//60秒时让时针转0.5度,并确定当前时间
hour.style.transform = 'rotateZ('+ (nowHour*30 +0.5*nowMinutes) +'deg)';

}
},1000);
</script>
</body>
</html>

HTML 钟表 小时钟的更多相关文章

  1. 【python】实现一个python编程的小时钟！

    [本实验内容] 1.GUI.PyQT5介绍2.实现此次实验效果 [一 GUI.PyQt5介绍] 1.Python简介 2.GUI介绍 几个常用的Python GUI库: (1)wxPython (2) ...

  2. WPF制作的小时钟

    原文:WPF制作的小时钟 周末无事, 看到WEB QQ上的小时钟挺可爱的, 于是寻思着用WPF模仿着做一个. 先看下WEB QQ的图: 打开VS, 开始动工. 建立好项目后, 面对一个空荡荡的页面, ...

  3. js写个小时钟

    原生js写个小时钟 一.代码 今天美化博客园自学的哈,分享一下 <!--标题变成时钟--> <div id="Header1_HeaderTitle">&l ...

  4. Python自制小时钟，并转换为exe可执行程序详解

    一,简介Python写完程序,要靠命令来执行太LOW,太低调了,还不华丽了. 再说别人的电脑,都没有Python库,怎么执行,还能不能愉快的一起玩耍了. 所以哪怕只会写一个HelloWorld,也要弄 ...

  5. css3-手把手 transform 小时钟

    学习css3ing,正在学习transfomr,突发奇想用此做个小时钟,开始吧: 准备前期工作,把时钟的表盘,时分秒针,实时时间标签 的大概样子做好,效果如图: html代码如下: <div c ...

  6. canvas写的一个小时钟demo

    <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo of clock</title> ...

  7. JS小福利 —— 实时更新的页面小时钟

    今天小女刚学会了一个好玩的小玩意儿~~特来跟大家分享一下~~~ 这是一个有趣的时钟显示程序,可以进行实时的年月日.星期.时分秒更新,有了这组小代码,以后可以作为日期插件应用在大型的JS代码中哦~~ 积 ...

  8. 【Qt编程】Qt 小时钟

    Hello World! 学习编程语言的最简单最经典的小程序,当然Qt也不例外.在学习画图时,我觉得写个时钟小程序也是个比较好的开始.在之前的<Matlab及Java小时>一文中,我也从写 ...

  9. 【Matlab编程】Matlab及Java小时钟

    一年前曾经用matlab的gui做了一个时钟,由于是直接用GUIDE和ActiveX控件写的,程序虽说有许多行,大多数都是自动生成的,自己写的只有十几行而已.闲着没事,就耗费了下午的时间用matlab ...

随机推荐

  1. 【Python学习笔记】Coursera之PY4E学习笔记——String

    1.字符串合并 用“+”来进行字符串的合并,注意空格是要自己加的. 例: >>> a='Hello' >>> b= a+ 'There' >>> ...

  2. C#通过反射获取类中的方法和参数个数，反射调用方法带参数

    using System; using System.Reflection; namespace ConsoleApp2 { class Program { static void Main(stri ...

  3. expose a port on a living Docker container

    if you have a container that with something running on its port 8000, you can run wget http://contai ...

  4. shell 中的<,<<,>,>>

    相信熟悉linux的童鞋不会对这四个符合陌生,shell脚本的文件流有时候真的挺容易搞晕人的,下面我们一起了解一下吧 参考链接:http://www.cnblogs.com/chengmo/archi ...

  5. java获取项目路径，url路径

    我的web项目名iamgeModel. 工作空间在D盘 先获取url相关: 需要是HttpServletRequest request; 获取IP: request.getServerName() / ...

  6. python_day7学习笔记

    类 1)创建一个类 #coding=utf-8 __author__ = 'Administrator' class Employee: '所有员工的基类' empCount = 0 def __in ...

  7. 自动化运维之saltstack的使用安装

    SaltStack 简介 SaltStack是一个服务器基础架构集中化管理平台,具备配置管理.远程执行.监控等功能,基于Python语言实现,结合轻量级消息队列(ZeroMQ)与Python第三方模块 ...

  8. 光流optical flow基本原理与实现

    光流(optical flow)是什么呢?名字很专业,感觉很陌生,但本质上,我们是最熟悉不过的了.因为这种视觉现象我们每天都在经历.从本质上说,光流就是你在这个运动着的世界里感觉到的明显的视觉运动(呵 ...

  9. 三：基于Storm的实时处理大数据的平台架构设计

    一:元数据管理器==>元数据管理器是系统平台的“大脑”,在任务调度中有着重要的作用[1]什么是元数据?--->中介数据,用于描述数据属性的数据.--->具体类型:描述数据结构,数据的 ...

  10. Linux下几个命令的技巧

    Ctrl的组合键+a,移动到一行命令的首部+e,移动到一行命令的尾部+左右键,以单词为单位左右移动+u,删除光标之前的所有内容+k,删除光标之后的所有内容Alt+.为引用上一个命令的最后一个参数 还有 ...