css3小应用—时钟制作

最新推荐文章于 2024-08-16 10:22:35 发布

fangfang12315

最新推荐文章于 2024-08-16 10:22:35 发布

阅读量312

点赞数 1

分类专栏： css3 文章标签： css3 应用

本文链接：https://blog.csdn.net/zdf1215/article/details/53228081

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; 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;
            }
            .ico {
                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 class="ico"></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 aLi = "";
            var sCss = "";
            for(var i = 0; i < 60; i++) {
                sCss += "#wrap ul li:nth-of-type(" + (i + 1) + "){ -webkit-transform:rotate(" + i * 6 + "deg);}";
                aLi += "<li></li>"
            }
            oList.innerHTML = aLi;
            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)";
                oMin.style.WebkitTransform = "rotate(" + iMin * 6 + "deg)";
                oHour.style.WebkitTransform = "rotate(" + iHour * 30 + "deg)";
            };
        </script>
    </body>
</html>

运行效果图：
这里写图片描述

fangfang12315

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3小应用—时钟制作

<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style id="css"> #wrap { w
复制链接

扫一扫

专栏目录