css3 简易时钟

2018-06-24 01:21:23来源：未知阅读 ()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Josefin+Slab:400,700" type="text/css">
    <title>CSS3时钟</title>
    <style>
        body {
            /*background-color: #ccc;*/
        }
        ol,ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        h1{
            text-align: center;
            color: #333;
            margin-top: 40px;
            font-family: 'Microsoft Yahei';
        } 
        .clock{
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 100%;
            background-color: #292a38;
            margin: 50px auto;
        }
        .pointer li.circle{
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: left center;
            background:#fff;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            margin-top: -5px;
            margin-left: -5px;
        }
        /*.line-demo{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: rotate(-60deg) translate(75px,-50%);
            transform-origin: left center;
            width: 20px;
            height: 10px;
            background-color: red;
            z-index: 1;
        } */
        /*刻度*/
        .line-hour li,.line-min li{
            position: absolute;
            left: 50%;
            top: 50%;
            transform-origin:left center;
            background-color: #fff; 
        }
        .line-hour li{
            width: 10px;
            height: 2px;
        }
        .line-min li{
            width: 5px;
            height: 2px;
        }
        /*数字*/
        .number {
            position: absolute;
            height: 150px;
            width: 150px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Microsoft Yahei';
            font-size: 15px;
            color: #fff;
        }
        .number li {
            position: absolute;
            transform: translate(-50%, -50%);
        }
        /*指针*/
        .pointer li{
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: left center;
            background:#fff;
        }
        .pointer li.hour{
            width: 45px;
            height: 3px;
            margin-top: -1px;
        }
        .pointer li.min{
            width: 60px;
            height: 2px;
            margin-top: -1px;
        }
        .pointer li.sec{
            width: 45px;
            height: 3px;
            margin-top: -1px;
        }
    </style>
</head>
<body>
    <h1>css 始终效果演示</h1>
    <div class="clock">
        <ul class="line-min"></ul>
        <ul class="line-hour">
            <li class="line-demo"></li>
        </ul>
        <ol class="number"></ol>
        <ul class="pointer">
            <li class="hour"></li>
            <li class="min"></li>
            <li class="sec"></li>
            <li class="circle"></li>
        </ul>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
    <script>
        $(function(){
            function init(){
                drawLines($('.line-min'),60,85);
                drawLines($('.line-hour'),12,80); 
                drawNumbers($('.number'));
                move();
            }
            init();
            // 绘制钟表刻度线
            //@param wrap 刻度线的父容器
            //@param total 刻度线的总个数
            //@param translateX 刻度线在x轴方向的偏移量
            function drawLines(wrap,total,translateX){
                var gap = 360/total;
                var strHtml = "";
                for(var i=0;i<total;i++){
                    strHtml += '<li style="transform:rotate('+(i*gap)+'deg)translate('+translateX+'px,-50%)"></li>';
                }
                wrap.html(strHtml);
            }
            // 绘制时钟数字
            //@param wrap 数字的父容器
            function drawNumbers(wrap){
                var radius = wrap.width() / 2;
                var strHtml = '';
                for(var i=1;i<=12;i++){
                    var myAngle = (i-3)/6 * Math.PI;
                    var myX = radius + radius*Math.cos(myAngle), //x= r+rcos(0)
                        myY = radius + radius*Math.sin(myAngle); //y= r+rsin(0)
                        strHtml += '<li style="left:' + myX + 'px; top:' +myY + 'px">' +i + '</li>';
                }
                wrap.html(strHtml);
            }
            //钟表走动，转动秒针、分针、时针
            function move(){
                //获取指针
                var domHour = $('.hour'),
                    domMin = $('.min'),
                    domSec = $('.sec');
                setInterval(function(){
                    var now = new Date(),
                        hour = now.getHours(),
                        min = now.getMinutes(),
                        sec = now.getSeconds();
                    var secAngle = sec*6 - 90,
                        minAngle = min*6 + sec*0.1 - 90,
                        hourAngle = hour*30 + min*0.5 - 90;
                    domSec.css('transform','rotate('+secAngle+'deg)');
                    domMin.css('transform','rotate('+minAngle+'deg)');
                    domHour.css('transform','rotate('+hourAngle+'deg)');
                    document.title = hour + ':' + min + ':' +sec;
                },1000);
            }
        })
    </script>
</body>
</html>