CSS+JS实现简单的时钟

之前在网站上看到过别人用几行CSS代码就实现了一个简单的时钟,感觉挺有趣的,就自己仿照着也实现了一下。感觉里面用到的知识点都挺适合新手学习的,所以贴出来和大家一起学习学习。下面是实现后的效果图。

CSS+JS实现简单的时钟_第1张图片

实现的原理很简单,但是里面也有些需要注意的地方。

首先看HTML结构,整个时钟包含在一个div中,在父div中又包含了时钟的圆盘,时钟的各个指针。

<body>
    <div id="circle">
        <div id="pointer">
            <div><span>12span>div>
            <div><span>1span>div>
            <div><span>2span>div>
            <div><span>3span>div>
            <div><span>4span>div>
            <div><span>5span>div>
            <div><span>6span>div>
            <div><span>7span>div>
            <div><span>8span>div>
            <div><span>9span>div>
            <div><span>10span>div>
            <div><span>11span>div>
        div>
        <div id="hour">div>
        <div id="minute">div>
        <div id="second">div>
    div>
    <script src="clock.js">script>
body>

然后是CSS样式

*{
    padding:0;
    margin:0;
}

#circle{
    width:200px;
    height:200px;
    position:relative;
    border-radius:50%;
    border:5px solid red;
    background-color:rgb(255,255,0);
    opacity:0.5;
    margin:100px auto;
}

#pointer{
    width:200px;
    height:200px;
    position:absolute;
}

#pointer div {
    width:20px;
    height:200px;
    position:absolute;
    left:90px;
}

#circle span {
    display:block;
    position:absolute;
}

#hour {
    width:3px;
    height:50px;
    position:absolute;
    background-color:#00FF00;
    left:95px;
    top:50px;
    transform-origin:bottom center;
}

#minute {
    width:3px;
    height:70px;
    position:absolute;
    background-color:#0000CD;
    left:96px;
    top:30px;
    transform-origin:bottom center;
}

#second {
    width:2px;
    height:90px;
    position:absolute;
    background-color:#FF00FF;
    left:97px;
    top:10px;
    transform-origin:bottom center;
}

最后如何通过js旋转刻度,如何通过当前的时间计算各个指针旋转的角度。下面是JS代码。

(function() {
    var timer ={};
    var div =document.getElementById('pointer');
    var divs = div.children;
    for(var i=0;i
        divs[i].style.transform = "rotate("+i*30+"deg)";
        divs[i].firstChild.style.transform = "rotate("+i*-30+"deg)";
    }
    var hourDiv = document.getElementById('hour');
    var minuteDiv = document.getElementById('minute');
    var secondDiv = document.getElementById('second');

    var currentDate = new Date();
    timer.hour = currentDate.getHours()%12;
    timer.minute = currentDate.getMinutes();
    timer.second = currentDate.getSeconds();
    setInterval(function(){
        timer.second++;
        if(timer.second==60) {
            timer.second=0;
            timer.minute++;
            if(timer.minute==60) {
                timer.minute=0;
                timer.hour++;
                if(timer.hour==13) {
                    timer.hour=0;
                }
            }
        }
        secondDiv.style.transform="rotate("+timer.second*6+"deg)";
        minuteDiv.style.transform="rotate("+timer.minute*6+"deg)";
        hourDiv.style.transform="rotate("+(timer.hour*30+timer.minute*0.5)+"deg)";
    },1000);

    return timer;
})();





你可能感兴趣的:(JS前端,css,javascript)