CSS3를 사용하여 원형 동적 시계를 그리는 방법(자세한 설명)-CSS 튜토리얼-php.cn

CSS3를 사용하여 원형 동적 시계를 그리는 방법(자세한 설명)

坏嘻嘻

풀어 주다： 2018-09-30 10:15:06

원래의

3593명이 탐색했습니다.

시간이 돈이 되는 시대에 사람들은 일상생활뿐만 아니라 특히 인터넷 서핑을 할 때 시간에 대한 인식이 점점 더 높아지고 있습니다. 따라서 프론트엔드를 개발할 때 CSS3를 활용하여 시계 정말 필요한 것 같습니다. 이 기사가 제공하는 내용은 이에 관한 것이며 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS3를 사용하여 원형 동적 시계를 그리는 원리

우리 모두 알고 있듯이 div 모양은 정사각형이므로 먼저 border-radius 속성을 사용하여 원형으로 변환해야 합니다.
포인터를 회전시키려면 -webkit-transform-origin:center 100px;을 사용하여 회전 기준점을 설정해야 합니다. 그런 다음 -webkit-transform:rotate(0);을 사용하여 li가 해당 각도를 회전시켜 해당 축척을 형성하도록 합니다.
척도를 디자인한 후 nth-of-type() 선택기를 포함하여 상위 요소에 속하는 하위 요소를 지정해야 합니다.
원형 시계의 중앙에 포인터 연결 지점에 대한 div 아이콘을 설정해야 합니다.
그런 다음 js를 사용하여 div를 얻고 다이얼의 크기를 렌더링합니다.
마지막으로 타이머를 시작하고 1초마다 함수를 실행합니다.

css3을 사용하여 원형 동적 시계를 그리는 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>钟表</title>
<style id="css">
        #wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;border-radius:50%; position:relative;}
        #wrap ul{margin:0; padding:0; height:200px; position:relative; list-style:none;}
        #wrap ul li{width:2px;  height:6px; background:#000; position:absolute; left:99px; top: 0;-webkit-transform-origin:center 100px;}
        /*#wrap ul li:nth-of-type(1){-webkit-transform: rotate(0);}
        #wrap ul li:nth-of-type(2){-webkit-transform: rotate(6deg);}
        #wrap ul li:nth-of-type(3){-webkit-transform: rotate(12deg);}
        #wrap ul li:nth-of-type(4){-webkit-transform: rotate(18deg);}
        #wrap ul li:nth-of-type(5){-webkit-transform: rotate(24deg);}
        #wrap ul li:nth-of-type(6){-webkit-transform: rotate(30deg);}
        #wrap ul li:nth-of-type(7){-webkit-transform: rotate(36deg);}
        #wrap ul li:nth-of-type(8){-webkit-transform: rotate(42deg);}*/
        #wrap ul li:nth-of-type(5n+1){ height:12px;}
        #hour{width:6px;  height:45px; background:#000; position:absolute; left:97px; top:55px;-webkit-transform-origin:bottom ;}
        #min{width:4px;  height:65px; background:#999; position:absolute; left:98px; top:35px;-webkit-transform-origin:bottom ;}
        #sec{width:2px;  height:80px; background:red; position:absolute; left:99px; top:20px;-webkit-transform-origin:bottom ;}
        .icon{width:20px; height:20px; background:#000; border-radius:50%; position:absolute; left:90px; top: 90px;}
    </style>
</head>
<body>
    <div id="wrap">
    <ul id="list">
        <!--<li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>-->
    </ul>
        <div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
        <div></div>
    </div>
    <script>
        var oList=document.getElementById("list");//获取到刻度
        var oCss=document.getElementById("css");
        var oHour=document.getElementById("hour");//获取时针
        var oMin=document.getElementById("min");//获取分针
        var oSec=document.getElementById("sec");//获取秒针
        var oLi="";
        var sCss="";
        for (var i=0;i<60;i++) { //一个表盘总共是60个刻度
            sCss+="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform: rotate("+i*6+"deg);}";
            oLi+="<li></li>";
        };
        oList.innerHTML=oLi;
        oCss.innerHTML+=sCss;//表盘刻度渲染完成
        toTime();
        setInterval(toTime,1000);
        function toTime(){
            var oDate=new Date();//获取当前时间
            var iSec=oDate.getSeconds();//获取当前秒
            var iMin=oDate.getMinutes()+iSec/60;//获取当前分
            var iHour=oDate.getHours()+iMin/60;//获取当前时
            oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";//秒针转动角度1秒6度 (表盘一圈360度一圈60秒所以一秒6度)
            oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";//分钟转动角度1分6度 (表盘一圈360度一圈60分所以一分6度)
            oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";//时针转动角度一小时30度(表盘一圈360度一圈12小时所以一小时30度)
        };
</script>
</body>
</html>

로그인 후 복사

#🎜🎜 #

효과 예시는 사진에 나와 있습니다

위 내용은 CSS3를 사용하여 원형 동적 시계를 그리는 방법(자세한 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!