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

提示 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模块（requests，logging）

    一.requests Requests 是使用 Apache2 Licensed 许可证的 基于Python开发的HTTP 库,其在Python内置模块的基础上进行了高度的封装,从而使得Pythone ...

  2. 【Matlab】绘制饼状统计图

    a=tabulate(b); % b为需要绘制饼图的原始数据列,生成新的一个矩阵a label={'1','2','3'} % 设定饼图每块扇形代表的内容 percent=num2str(a(:,3) ...

  3. Git 常用命令速查表(图文+表格)【转】

    转自:http://www.jb51.net/article/55442.htm 一. Git 常用命令速查 git branch 查看本地所有分支git status 查看当前状态 git comm ...

  4. c#导出文件，下载文件,命名下载后的文件名

    Page.Response.AppendHeader("Content-Disposition", "attachment;filename=" + HttpU ...

  5. 【Educational Codeforces Round 19】

    这场edu蛮简单的…… 连道数据结构题都没有…… A.随便质因数分解凑一下即可. #include<bits/stdc++.h> #define N 100005 using namesp ...

  6. 【openjudge】C15C Rabbit's Festival CDQ分治+并查集

    题目链接:http://poj.openjudge.cn/practice/C15C/ 题意:n 点 m 边 k 天.每条边在某一天会消失(仅仅那一天消失).问每一天有多少对点可以相互到达. 解法:开 ...

  7. 阿里云ECS的使用

    一.阿里云ECS的使用 1.Linux CentOS Ubuntu Readhat 2.远程登录 xshell 远程登录 winScp 远程文件操作 3.Linux命令 cd 目录名 ls . ls ...

  8. 数据库SQL实战（1）

    1.查找最晚入职员工的所有信息: CREATE TABLE `employees` ( `emp_no` int(11) NOT NULL, `birth_date` date NOT NULL, ` ...

  9. mybatis 联结查询

    一.查询 员工(tbl_employee)时,关联 查询出 员工对于的部门信息 (tab1_dept),一对一查询,或者多对一查询 适用 emp bean里面 包含 部门bean dept属性对象 1 ...

  10. react生命周期函数使用箭头函数，导致mobx-react问题

    最近新人加入了项目,遇到了一个很奇怪的问题.mobx observable 属性,onChange的时候就是页面不会刷新. 试来试去,就是不知道什么原因,后来其他同事查到是因为componentWil ...