简易时钟

简易时钟

利用css与js实现一个简易时钟的制作!

代码:

css部分代码:在css内设置了表盘,表盘内的数字,指针的基本样式.

<style type="text/css">
            .clock{
                width: 300px;
                height: 300px;
                background-color: #CCCCCC;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -150px;
                margin-top: -150px;
                box-shadow:inset 0px 5px 10px #a3a9ad;
                background-image: -webkit-linear-gradient(top,#d3e8ef 0px,#a3adb0 50px,#767674 100%);
            }
            .pad{
                width: 100%;
                height: 100%;
                position: relative;
            }
            .pad div{
                width: 280px;
                height: 30px;
                /*background-color: yellow;*/
                line-height: 30px;
                text-align: center;
                position: absolute;
                left: 10px;
                top: 135px;
            }
            .pad span{
                display: block;
                width: 30px;
                height: 30px;
            }
            #hour{
                width: 6px;
                height: 70px;
                background-color: black;                
                opacity: 0.6;
            }
            #minute
            {
                    width: 4px;
                    height: 100px;
                    background: purple;
                    opacity: 0.6;
                    bottom: 150px;
            }
            #second
            {
                    width: 2px;
                    height: 100px;
                    background: red;
                    opacity: 0.6;
                    bottom: 150px;
            }
            .point
            {
                    position: absolute;
                    transform-origin: 50% bottom;
                    bottom: 150px;
                left: 150px;
            }
        </style>

body内的代码:

在div内放入了span标签,以便改变数字的角度,如果现在不理解继续看js的代码解释就能理解了!

<div class="clock">
            <div class="pad">
                <div><span>9</span></div>
                <div><span>10</span></div>
                <div><span>11</span></div>
                <div><span>12</span></div>
                <div><span>1</span></div>
                <div><span>2</span></div>
                <div><span>3</span></div>
                <div><span>4</span></div>
                <div><span>5</span></div>
                <div><span>6</span></div>
                <div><span>7</span></div>
                <div><span>8</span></div>
            </div>
            <div class="point" id="hour"></div>
            <div class="point" id="minute"></div>
            <div class="point" id="second"></div>
        </div>

js部分代码:

首先获取定义的所有元素:

    var divs=document.querySelectorAll(".pad>div");
    var spans=document.getElementsByTagName("span");
    var seconds = document.getElementById("second");
    var minutes = document.getElementById("minute");
    var hours = document.getElementById("hour");

在body中一共写入了12个div,分别装入了12个数字,但是它们并没有被定位所以此时这12个div是重合的,通过以下代码,将重合的div放置到应该放置的位置!

for(var i=0;i<divs.length;i++){
    divs[i].style.transform="rotate("+(i*30)+"deg)";//旋转div rotate(45deg);
    spans[i].style.transform="rotate("+(-30*i)+"deg)";
    }

首先利用一个for循环获取到每一个div,然后将每一个div旋转30度(360/12),相应的时钟数字会到相应的位置上.但是此时div内的数字也会旋转30度,所以在div内嵌套一个span标签,再通过第二行代码将span标签以反方向旋转回来即可.这里写代码片

设置定时函数

定时函数的作用是让时分秒针可以按照当前时间进行转动.

setInterval(function(){
        var now = new Date();
        var h = now.getHours();
        var m = now.getMinutes();
        var s = now.getSeconds();

        var hdeg = h / 12 * 360 + (m / 60 * 30);
        var mdeg = m / 60 * 360;
        var sdeg = s / 60 * 360;

        hours.style.transform = "rotate(" + hdeg + "deg)";
        minutes.style.transform = "rotate(" + mdeg + "deg)";
        seconds.style.transform = "rotate(" + sdeg + "deg)";
    },1000);

获取当前时分秒函数

        var now = new Date();
        var h = now.getHours();
        var m = now.getMinutes();
        var s = now.getSeconds();

获取时分秒旋转角度函数

        var hdeg = h / 12 * 360 + (m / 60 * 30);
        var mdeg = m / 60 * 360;
        var sdeg = s / 60 * 360;

使时分秒针进行转动

hours.style.transform = "rotate(" + hdeg + "deg)";
minutes.style.transform = "rotate(" + mdeg + "deg)";
seconds.style.transform = "rotate(" + sdeg + "deg)";

时钟图片