css3时钟

参考资料：

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动画. 首先整 ...

随机推荐

服务发现 - consul 的介绍、部署和使用
什么是服务发现相关源码: spring cloud demo 微服务的框架体系中,服务发现是不能不提的一个模块.我相信了解或者熟悉微服务的童鞋应该都知道它的重要性.这里我只是简单的提一下,毕竟这不是 ...
js中得计算问题算式结果拼接成字符串怎么解决
如题:经常遇到类似问题一种:自定义的弱类型 var savNum=0; var num=$("#numU").val();//jsp页面获得得值 savNum=parseInt( ...
不存数据库的token验证
不需要数据库存,纯粹通过计算来判断是否相等 {name:chuck,id:1}|自己加密方式加密后的内容截取加密内容,反解,判断反解内容与{name:chuck,id:1}是否相同,只会耗费计算资源 ...
POJ - 2528 Mayor's posters （离散化+线段树区间修改）
https://cn.vjudge.net/problem/POJ-2528 题意给定一些海报,可能相互重叠,告诉你每个海报的宽度(高度都一样的)和先后叠放顺序,问没有被完全盖住的有多少张? 分析 ...
2018牛客网暑期ACM多校训练营（第一场）J Different Integers（树状数组）
题意给出一串数字以及q次查询,每次查询l,r],要求求出[1,l]和[r,n]的所有不相同的数字个数. 分析先对数组进行倍增,变为两倍长,然后查询就变成一个完整的区间.离线处理,按r从小到大排序, ...
Hadoop — HDFS的概念、原理及基本操作
1. HDFS的基本概念和特性设计思想——分而治之:将大文件.大批量文件分布式存放在大量服务器上,以便于采取分而治之的方式对海量数据进行运算分析.在大数据系统中作用:为各类分布式运算框架(如:map ...
IO流--与properties集合配合使用
IO流--与properties集合配合使用: 注:生产上主要用于常量文件的配置,读取常量文件: 1:properties集合的放值与取值: /* * properties集合继承自hashTable ...
[Android] Android最简单ScrollView和ListView滚动冲突解决方案
[Question]问题描述: 单独的ListView列表能自动垂直滚动,但当将ListView嵌套在ScrollView后,会和ScrollView的滚动滑块冲突,造成ListView滑块显示不完整 ...
804. Unique Morse Code Words
Description International Morse Code defines a standard encoding where each letter is mapped to a se ...
SpringBoot系列: logging
我们的 SpringBoot 程序都会加 spring-boot-starter 包, 而该包一个依赖项 spring-boot-starter-logging, 所以SpringBoot 程序不需要 ...

css3时钟

css3时钟的更多相关文章

随机推荐

热门专题