css3例子钟表结合JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        #container{
            width: 200px;
            height: 200px;
            border:1px solid #000;
            margin:50px auto;
            border-radius: 50%;
            position: relative;
        }
        #container li{
            width: 2px;
            height: 4px;
            background: #000000;
            position: absolute;
            left:50%;
            margin-left: -1px;
            top:0;
            -webkit-transform-origin: 1px 100px;/*起始点   会根据父元素旋转*/
        }
        #container li:nth-child(5n+1){ /*从第一个开始  每五个刻度长为8px*/
            height: 8px;
        }
        #hour{
            width: 6px;
            height: 35px;
            background: #000000;
            position: absolute;
            left:97px;
            top:65px;
            -webkit-transform-origin: 3px 35px;/*起始点*/
        }
        #minute{
            width: 4px;
            height: 45px;
            background: green;
            position: absolute;
            left:98px;
            top:55px;
            -webkit-transform-origin: 2px 45px;
        }
        #second{
            width: 2px;
            height: 55px;
            background: red;
            position: absolute;
            left:99px;
            top:45px;
            -webkit-transform-origin: 1px 55px;
        }
    </style>
</head>
<body>
<div id="container">
    <ul>
    </ul>
    <div id="hour"></div>
    <div id="minute"></div>
    <div id="second"></div>
</div>
<script>
    var oUl = document.getElementsByTagName('ul')[0];//getElementsByTagName取到的是数组 [0]取到第一个
    var oHour = document.getElementById('hour');
    var oMinute = document.getElementById('minute');
    var oSecond = document.getElementById('second');

    var sLi = '';  //定义一个字符串 存li
    for(var i=0; i<60; i++){  //循环产生六十个li
//        sLi += '<li style="-webkit-transform: rotate('+i*6+'deg)"></li>';
        sLi += `<li style="-webkit-transform: rotate(${i*6}deg)"></li>`;  //拼接字符串

    }
    oUl.innerHTML = sLi;  //添加到ul内容里

    function run(){
        var date = new Date();  //new日期对象
        var hour = date.getHours(); //获取时间
        var minute = date.getMinutes();
        var second = date.getSeconds();
        oHour.style.webkitTransform = 'rotate('+(hour*30+minute*0.5)+'deg)';  /*每小时时针转30度 一小时六十分钟 所以每分钟时针转0.5度*/
        oMinute.style.webkitTransform = 'rotate('+(minute+second/60)*6+'deg)';/*每分钟分针转6度 一分钟六十秒 所以每秒分针转0.1度*/
        oSecond.style.webkitTransform = 'rotate('+second*6+'deg)';/*每秒秒针转六度*/
    }
    run();
    setInterval(function(){ /*定时器  一秒钟执行一次 模仿clock*/
        run();
    },1000);
</script>

</body>
</html>
css3例子 钟表 结合JavaScript

猜你喜欢

css3例子钟表结合JavaScript
