css3时钟
参考资料:
奇舞团: http://www.75team.com/archives/851
DEMO:demo
截图:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3钟表</title>
<style id="style">
body,html{width:100%;height:100%;}
*,ul{margin:0;padding:0;}
li{list-style: none;padding:0;margin:0;}
#box{ position:absolute; left:100px;top:100px; width:300px; height:300px; border-radius: 50%; border:1px solid #999; border:2px solid #000; }
.handles,.digits{ position:absolute;left:0;top:0; width:300px; height:300px; }
.handles{}
.handles li{ position: absolute; top:0;left:50%;width:2px;height:8px;background-color: #000;transform-origin: 0 150px;}
.handles li:nth-child(5n+1){ height:14px;}
.digits li{ position: absolute; top:50%;left:50%;width:20px;height:20px; margin:-10px 0 0 -10px;line-height: 20px; text-align: center; font-size: 18px; font-weight: bold;font-family: 'microsoft yahei', Arial, Helvetica, sans-serif; }
.timer{ position: absolute;left:50%;top:50%;width:20px;height:20px; background-color: #000;margin:-10px 0 0 -10px;border-radius: 50%; }
.timer:after{ content:'';position: absolute;left:0;top:0;z-index: 10;background-color: #000; width:20px;height:20px; border-radius: 50%;}
.hours-hand{ position: absolute;bottom:50%;left:50%;width:8px;height:60px;margin-left:-4px; background-color:#000; transform-origin:center bottom; border-top-left-radius:30px;border-top-right-radius:30px; }
.minutes-hand{ position: absolute;bottom:50%;left:50%;width:6px;height:90px;margin-left:-3px; background-color:#000; transform-origin:center bottom;border-top-left-radius:30px;border-top-right-radius:30px;}
.seconds-hand{ position: absolute;bottom:50%;left:50%;width:2px;height:120px;margin-left:-1px; background-color:red; transform-origin:center bottom; transform:rotate(30deg);border-top-left-radius:30px;border-top-right-radius:30px;}
</style>
<script>
window.onload = function(){ var oBox = document.getElementById('box'),
oHandles = document.getElementById('handles'),
oDigits = document.getElementById('digits'),
oHours = document.getElementById('hours'),
oMinutes = document.getElementById('minutes'),
oSeconds = document.getElementById('seconds'),
timer = null; //创建表针;
var aLiHtml = '';
for( var i=0,len=60;i<len;i++ ){
aLiHtml += '<li style="transform:rotate('+ ( i*360/60 ) +'deg);" ></li>';
}
oHandles.innerHTML = aLiHtml; //创建数字;
var aDigitsHtml = '';
var r = 122;
for( var i=1,len=13;i<len;i++ ){
var t = -Math.cos( i*360/12*Math.PI/180 )*r;
var l = Math.sin( i*360/12*Math.PI/180 )*r;
aDigitsHtml += '<li style="transform:translate('+ l +'px,'+ t +'px);" >'+ i +'</li>';
}
oDigits.innerHTML = aDigitsHtml; //初始化时间;
setTime();
timer = setInterval(setTime,1000); //设置时间方法;
function setTime(){ var myDate = new Date(),
seconds = myDate.getSeconds(),
minutes = myDate.getMinutes() + seconds/60,
hours = myDate.getHours() + minutes/60; oHours.style.transform = 'rotate('+ hours*(360/12) +'deg)';
oMinutes.style.transform = 'rotate('+ minutes*(360/60) +'deg)';
oSeconds.style.transform = 'rotate('+ seconds*(360/60) +'deg)'; } //拖拽;
drag( oBox ); //拖拽方法;
function drag( obj ){ obj.onmouseover = function(){
obj.style.cursor = 'move';
} obj.onmousedown = function( event ){ var ev = window.event || event;
var yuanT = obj.offsetTop;
var yuanL = obj.offsetLeft;
var disX = ev.clientX - yuanL;
var disY = ev.clientY - yuanT; document.onmousemove = function( event ){ var ev = window.event || event; var evX = ev.clientX;
var evY = ev.clientY;
var t = evY - disY;
var l = evX - disX ; var maxWidth = document.body.clientWidth - obj.offsetWidth;
var maxHeight = document.body.clientHeight - obj.offsetHeight; if( t > maxHeight ){
t = maxHeight;
}else if( t < 0 ){
t = 0;
} if( l > maxWidth ){
l = maxWidth;
}else if( l < 0 ){
l = 0;
} obj.style.top = t + 'px';
obj.style.left = l + 'px'; ev.stopPropagation();
return false; } document.onmouseup = function( event ){
document.onmousemove = null;
} } } }
</script>
</head>
<body>
<div id="box">
<ul id="handles" class="handles">
</ul>
<ul id="digits" class="digits">
</ul>
<ul class="timer">
<li id="hours" class="hours-hand"></li>
<li id="minutes" class="minutes-hand"></li>
<li id="seconds" class="seconds-hand"></li>
</ul>
</div>
</body>
</html>
后记:
网上有很多这种css3画的钟表,原理其实就是transform里的rotate和transform-origin的旋转元素基点位置,至于数字位置的看奇舞团的视频就可以了原理一样,只不过觉得太简单了加了个拖拽。。。。
css3时钟的更多相关文章
- CSS3时钟式进度条
CSS3时钟式进度条,加载完成时生成一个圆,数字慢慢变成100,适时的显示加载进度.友情提醒,如果预览时网页左下角提示错误,刷新一下就可以看到效果了:实际使用中不会出现这样的问题. <!DOCT ...
- CSS3 时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3简易表盘时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3 圆形时钟式网页进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css3 简易时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html5和css3学习笔记
HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记 ...
- css3、html5学习笔记
2016/12/14 ----认真看完绝对对你有帮助 HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的 ...
- 9种jQuery和css3图片动画特效代码演示
1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...
- 简单的CSS3 Loading动画
最终效果如图一,gif图片稍微有点卡顿,事实上代码在浏览器里执行得很流畅.这里面用到的css3技术非常简单,分别是border-radius.伪元素.css3关键帧以及animation动画. 首先整 ...
随机推荐
- 【leetcode-101】 对称二叉树
101. 对称二叉树 (1过) 给定一个二叉树,检查它是否是镜像对称的. 例如,二叉树 [1,2,2,3,4,4,3] 是对称的. 1 / \ 2 2 / \ / \ 3 4 4 3 但是下面这个 [ ...
- 解决centos7命令行中文乱码
-------------centos7解决中文乱码问题[root@localhost ~]# cat /etc/locale.conf LANG=en_US.UTF-8[root@localhost ...
- ava.io.InputStream & java.io.FileInputStream
java.io.InputStream & java.io.FileInputStream java.io.InputStream,这个抽象类是表示字节输入流的超类,这个抽象类的共性的方法有: ...
- overflow:auto学习
一直认为没认为这个属性没什么大的用处,最近在使用一次iscroll时一直浮动到顶部层上面找了半天,发现可以用这个属性解决. 1.功能1,清除浮动.设置overflow并不会在该元素上清除浮动,它将清除 ...
- JS数据结构库
lodash https://lodash.com/docs#now https://lodash.com/ A modern JavaScript utility library deliverin ...
- Javaweb学习笔记——(十五)—————— sql复习
sql复习 数据库管理系统(DBMS)的概述 1.什么是DBMS:数据的仓库 *方便查询 *可存储的数据量大 *保证数据的完整.一致 *安全可靠 2.DBMS的发展:今天主流数据库为关系型数据库管理系 ...
- HDB3 译码器
一.HDB3译码方案一: 插入V/B的情况是有两种,两个或三个零两端同极性,也就是要把代码二进制表示的“+1 0 0 0 +1”或“-1 0 0 0 -1”变成“1 0 0 0”,把“+1 0 0 + ...
- 通过GUI制作一个简单的消息对话框互发消息
public class LTS extends JFrame { private JPanel contentPane; private JTextField textField; private ...
- java.lang.NoSuchMethodError: org.apache.curator.framework.api.CreateBuilder.creatingParentsIfNeeded()Lorg/apache/curator/framework/api/ProtectACLCreateModeStatPathAndBytesable;
1 错误信息 java.lang.NoSuchMethodError: org.apache.curator.framework.api.CreateBuilder.creatingParentsIf ...
- 深入理解jQuery中的each方法
写在前面 我们先回顾一下数组中的forEach方法吧.在数组的实例上有个forEach方法供所有实例使用,forEach里面接收一个回调函数,而且回调函数默认接收三个参数:当前项,索引,数组 .for ...