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

提示 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. [caffe error] undefined reference to `inflateValidate@ZLIB_1.2.9'

    undefined reference to `inflateValidate@ZLIB_1.2.9' Makefile.config添加一行LINKFLAGS := -Wl,-rpath,$(HOM ...

  2. Python数据处理实战

    一.运行环境 1.python版本 2.7.13 博客代码均是这个版本2.系统环境:win7 64位系统 二.需求 对杂乱文本数据进行处理 部分数据截图如下,第一个字段是原字段,后面3个是清洗出的字段 ...

  3. HTML 知识点总结

    HTML基本语法 HTML标签 单标签 <标签名>或<标签名 /> 双标签 <标签名>内容</标签名> 跟标签也叫元素(根元素) 属性 属性属于标签 一 ...

  4. 微信小程序滚动条返回顶部

    scroll-view(可滚动视图区域): 使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height,将scroll-y属性设置为true,将en ...

  5. P2737 [USACO4.1]麦香牛块Beef McNuggets（完全背包+数论确定上界）

    题目链接:https://www.luogu.org/problem/show?pid=2737 题目大意:农夫布朗的奶牛们正在进行斗争,因为它们听说麦当劳正在考虑引进一种新产品:麦香牛块.奶牛们正在 ...

  6. LeetCode解题报告—— Rotate List & Set Matrix Zeroes & Sort Colors

    1. Rotate List Given a list, rotate the list to the right by k places, where k is non-negative. Exam ...

  7. poj 1426(同余搜索)

    Find The Multiple Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 26926   Accepted: 111 ...

  8. css3翻书效果

    强大的css3不需要解释,代码分层理解[直接复制],很有意思. 效果图: <ul class="align"> <li> <figure class= ...

  9. BC-NFS部署报错节点间磁盘wwid冲突

    1.在部署公司的BC-NFS产品时,填好IP选好磁盘后,点击“创建”,就抛出如下提示: 2.关闭虚机,再打开虚机的控制台,点击磁盘,自定义serial number 3.启动虚机,再次登陆,查看磁盘w ...

  10. CentOS 6.5，SSH安装与配置

    #rpm -qa |grep ssh 检查是否装了SSH包 #yum install openssh-server 没有的话,安装SSH服务 #chkconfig --list sshd 检查SSHD ...