找回密码
当前位置：前端开发者 > CSS > 正文

前端开发CSS3 时钟

2018-10-17 分类：CSS 阅读(1034) 评论(0)

web前端大型网站开发教程 web前端开发招聘合肥 合肥前端开发招聘信息

利用css3 transform 制作一个时钟

参考 视频案例

主体部分代码 :
定义一个容器,表盘 #warp
表盘上的刻度 在 ul下 (#list) 的 li 用 js 来生成 刻度:
分别定义一个时针、分针、秒针和链接他们的轴
html 代码

<div id=”wrap”>
    <ul id=”list”>
    </ul>
    <div id=”hour”></div>
    <div id=”min”></div>
    <div id=”sec”></div>
    <div class=”ico”></div>
</div>

css部分:
这里用定位控制时针、分针、秒针、和轴的位置
因为这里还不能 正常 走起来 ， 为了后边 时间能正常走起来， 我们加上 transform-origin： center bottom； 让他们转动起来的时候 以 中间和底部为（中心点）转动点 旋转
为了看起来好看，符合实际 设置了li 的样式 nth-of-type(5n+1){ height:12px;} 每隔5秒钟有一个 长刻度

css 代码

<style type=”text/css” 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(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>

js部分:
1.选到元素
2.利用循环 生成 li (表里的刻度) 这里 明白 一分钟秒针转动一圈是 360deg 分成60份 秒针每次转动 6deg 一个小时分针同上

javascript 代码

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>’
}
console.log(aLi)
oList.innerHTML = aLi
oCss.innerHTML += sCss
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)’
}
toTime()
setInterval(toTime, 1000)

下面放上完整的例子
html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title></title>
    <style type=”text/css” id=”css”>
        #wrap {
            width: 200px;
            height: 200px;
            border: 2px solid #000;
            margin: 100px auto;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            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;
            -ms-transform-origin: center 100px;
            -o-transform-origin: center 100px;
            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;
            -moz-transform-origin: bottom;
            -ms-transform-origin: bottom;
            -o-transform-origin: bottom;
            transform-origin: bottom;
        }
        #min {
            width: 4px;
            height: 65px;
            background: #999;
            position: absolute;
            left: 98px;
            top: 35px;
            -webkit-transform-origin: bottom;
            -moz-transform-origin: bottom;
            -ms-transform-origin: bottom;
            -o-transform-origin: bottom;
            transform-origin: bottom;
        }
        #sec {
            width: 2px;
            height: 80px;
            background: red;
            position: absolute;
            left: 99px;
            top: 20px;
            -webkit-transform-origin: bottom;
            -moz-transform-origin: bottom;
            -ms-transform-origin: bottom;
            -o-transform-origin: bottom;
            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”>
        </ul>
        <div id=”hour”></div>
        <div id=”min”></div>
        <div id=”sec”></div>
        <div class=”ico”></div>
    </div>
</body>
<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>”
    }
    console.log(aLi)
    oList.innerHTML = aLi;
    oCss.innerHTML += sCss;
    function toTime(argument) {
        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)”;
    }
    toTime();
    setInterval(toTime, 1000);
</script>
</html>
杭州西湖前端开发招聘 佳木斯前端开发招聘信息 上海web前端开发招聘要求
赞(0)
前端开发者 » 前端开发CSS3 时钟
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论