【超简单】JS原生——IOS手机时钟

最新推荐文章于 2019-06-25 22:22:52 发布

嗜码者

最新推荐文章于 2019-06-25 22:22:52 发布

阅读量571

点赞数

分类专栏： JS学习文章标签： js 时钟 ios时钟

本文链接：https://blog.csdn.net/qq_40704596/article/details/89077639

版权

JS学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

【超简单】JS原生——IOS手机时钟！！！一看就会！欢迎交流！下面附上源代码！！！

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width , initial-scale=1.0">
    <title>Page Title</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="clock">
        <ul class="dial">
        </ul>
        <div class="point"></div>
        <div class="hour"></div>
        <div class="min"></div>
        <div class="second"></div>
    </div>
    <script src="js/index.js"></script>
</body>
</html>

body,ul{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
.clock{
    width: 230px;
    height: 230px;
    background: #000000;
    border-radius: 40px;
    margin: 115px auto;
    position: relative;
    
}
.dial{
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    background: #ffffff;
    font-weight: 600;
    transform: translate3d(-50% , -50% ,0);
}
li{
    position: absolute;
    top: 0;
    left:50%;
    width: 30px;
    font-size: 20px;
    margin-left: -15px;
    text-align: center;
    line-height: 30px;
    transform-origin: center 100px;
}
span{
    display: inline-block;
}
.point{
    position: absolute;
    width: 10px;
    height: 10px;
    top:50%;
    left: 50%;
    margin-left: -5px;
    margin-top: -5px;
    background: black;
    border-radius: 50%;
}
.hour{
    position: absolute;
    width: 4px;
    height: 70px;
    background: #000000;
    left: 50%;
    margin-left: -2px;
    top: 45px;
    transform-origin: center bottom;
    /* transform: rotate(30deg); */
}
.min{
    position: absolute;
    left: 50%;
    top: 25px;
    margin-left: -2px;
    width: 4px;
    height: 90px;
    background: #000000;
    transform-origin: center bottom;
}
.second{
    position: absolute;
    width: 2px;
    height: 100px;
    background: orangered;
    left: 50%;
    top: 25px;
    margin-left: -1px;
    transform-origin: center 90px;
}

var oDial = document.getElementsByClassName('dial')[0];
var total = 12;
var oSecond = document.getElementsByClassName('second')[0];
var oMin = document.getElementsByClassName('min')[0];
var oHour = document.getElementsByClassName('hour')[0];
function init(){
    var str = '';
    for(var i = 1; i<=total; i++){
        str += '<li class="num" style="transform: rotate('+i*30+'deg)"><span style="transform: rotate('+(-i)*30+'deg)">'+i+'</span></li>';
        
    }
    oDial.innerHTML = str;
}
init();

setInterval(time,1000/60);
function time(){
    var date = new Date();

    var second = date.getSeconds();
    var msec = date.getMilliseconds();
    var fillSecond = second + msec /1000;

    var min = date.getMinutes();
    var fillMin = min + fillSecond/60;

    var hour = date.getHours();
    var fillHour = hour + fillMin/60;

    oSecond.style.transform = 'rotate('+fillSecond*6+'deg)';
    oMin.style.transform = 'rotate('+fillMin*6+'deg)';
    oHour.style.transform = 'rotate('+fillHour*30+'deg)';
}