JS+CSS 钟表

.<!DOCTYPE html>

<html>

<head>

#wrap{

width: 580px;

height: 580px;

border-radius: 50%;

background: linear-gradient(to bottom,white 0px, gray 500px, white);

position: relative;

margin: 100px auto;

}

#content{

width: 500px;

height: 500px;

border-radius:50% ;

background-color: black;

position: absolute;

top: 40px;

left: 40px;

}

#second{

width:2px;

height: 200px;

position: absolute;

left: 249px;

bottom:250px;

background-color: white;

transform-origin:bottom center ;

}

#minute{

width:4px;

height: 160px;

position: absolute;

left: 248px;

bottom: 250px;

background-color: deeppink;

transform-origin:bottom center ;

}

#hour{

width:4px;

height: 120px;

position: absolute;

left: 248px;

bottom: 250px;

background-color:red;

transform-origin:bottom center ;

}

.num{

width: 500px;

height: 40px;

position: absolute;

left: 0px;

top:230px;

}

span{

display: block;

line-height: 40px;

text-align: center;

color: white;

width: 40px;

height: 40px;

}

.div1{

width: 500px;

height: 2px;

position: absolute;

left: 0;

top: 249px;

}

.div2{

width: 8px;

height: 2px;

background-color: white;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

//表盘

var div1=document.getElementsByClassName('div1')

for(var i = 0;i<div1.length;i++){

div1[i].style.transform="rotate("+i*6+'deg)'

}

var div2=document.getElementsByClassName('div2')

for(var i = 0;i<div1.length;i+=5){

div2[i].style.width='13px';

div2[i].style.height='3px'

}

//表盘数字

var num=document.getElementsByClassName('num');

var spanNum = document.getElementsByTagName("span");

for(var i=0;i<num.length;i++){

num[i].style.transform="rotate("+i*30+'deg)'

}

for(var i=0;i<spanNum.length;i++){

spanNum[i].style.transform="rotate("+i*-30+'deg)'

}

var second = document.getElementById('second');

var minute = document.getElementById('minute');

var hour = document.getElementById('hour');

function ColorNumber() {

var Houre = document.getElementById("hour");

var Minute = document.getElementById("minute");

var Second = document.getElementById("second");

var nowTime = new Date();

var nowHoure = nowTime.getHours();

var nowMinute = nowTime.getMinutes();

var nowSecond = nowTime.getSeconds();

var houreDeg = (nowMinute / 60) * 30;

var minuteDeg = (nowSecond / 60) * 6;

Houre.style.WebkitTransform = "rotate(" + (nowHoure * 30 + houreDeg) + "deg)";

Minute.style.WebkitTransform = "rotate(" + (nowMinute * 6 + minuteDeg) + "deg)";

Second.style.WebkitTransform = "rotate(" + (nowSecond * 6) + "deg)";

}

ColorNumber();

setInterval(ColorNumber, 1000);

</script>

</html>

JS+CSS 钟表的更多相关文章

electron之Windows下使用 html js css 开发桌面应用程序
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
JS/CSS缓存杀手——VS插件
背景前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)! 一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和 ...
gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
配置springMVC之后,引入js,css等资源处理
配置了sringMVC之后,要引入js,css处理: 做法1:在<%page %>下面增加: <%@ taglib prefix="yesurl" uri=&qu ...
springmvc js/css路径问题
①No mapping found for HTTP request with URI[/msm2/css/login2.css] in DispatcherServlet with name 'sp ...
iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ
iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求最近开发的项 ...
springMVC下jsp引用外部js,css等静态资源的解决方法
直入主题. 1. web.xml对springMVC配置如下: <servlet> <description>Spring MVC配置</description> ...
在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验
转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...
使Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示。
我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...

随机推荐

Git 如何只更新项目中某个目录里的文件
Git由于在远端和本地都有一个代码库, 这样更新单个文件比SVN要麻烦一点. 1. 如果想拿远端git服务器上的最新版本(或某个特定版本)覆盖本地的修改,可以使用git pull命令, 但这会 ...
获取pe文件的文件类型
工程文件petype.cpp通过调用pefile类中的函数获取文件类型. 文件类型的判断通过5个监测点完成. 监测点1:dos头的e_magic 监测点2:nt头的Signature 监测点3:文件头 ...
MySQL 备份与恢复
一.备份/恢复策略考虑因素有: (A) 表的存储引擎是否事务性的,在数据一致性方面不太一样. (B) 确定是全备份还是增量备份, (C) 考虑采取复制的方法做异地备份,复制不能代替备份 (D) 定期 ...
安装windows下的Cscope
http://blog.csdn.net/maxiee/article/details/10034263 Cscope 是一款用于查看大型工程中的代码的软件.它使用方便,支持快速查找 C Symbol ...
$q -- AngularJS中的服务（理解）
描述译者注: 看到了一篇非常好的文章,如果你有兴趣,可以查看: Promises与Javascript异步编程 , 里面对Promises规范和使用情景,好处讲的非常好透彻,个人觉得简单易懂. ...
apache如何解决跨域资源访问
很多时候,大中型网站为了静态资源分布式部署,加快访问速度,减轻主站压力,会把静态资源(例如字体文件.图片等)放在独立服务器或者CDN上,并且使用独立的资源域名(例如res.test.com) 但是在实 ...
Windows+Caffe+VS2013+python接口配置过程
前段时间在笔记本上配置了Caffe框架,中间过程曲曲折折,但由于懒没有将详细过程总结下来,这两天又在一台配置较高的台式机上配置了Caffe,配置时便非常后悔当初没有写到博客中去,现已配置好Caffe, ...
搭建Nginx+Java环境测试并且运行
一.简介: Tomcat在高并发环境下处理动态请求时性能很低,而在处理静态页面更加脆弱.虽然Tomcat的最新版本支持epoll,但是通过Nginx来处理静态页面要比通过Tomcat处理在性能方面好很 ...
ModelMapper 中高级使用 java
ModelMapper 是一个java对象自动映射的第三方架包,用起来很方便,配合阿里的frstjson可以极大简化后台代码. 但是ModelMapper 中文使用说明很少,官网http://mode ...
WPF 变量转换的实现
有时候,我们传入的是一个值,但是真正显示的需要是另一个值,这时候就需要转换.比如我们传入一个枚举值,而不同的枚举值对于的图片是不一样的. 这时候就需要一个转换规则.WPF里面给我们提供了一个接口IVa ...

JS+CSS 钟表

JS+CSS 钟表的更多相关文章

随机推荐

热门专题