javascript 简易时钟

古城微笑少年丶 2021-09-14 06:12 368阅读 0赞

通过css的旋转和Date方法获取时间

背景图片如下：![Center][]

时针![Center 1][]分针![Center 2][]秒针![Center 3][]

<!DOCTYPE HTML>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            #clock {
                width: 600px;
                height: 600px;
                margin:50px auto;
                background: url(images/clock1_03.jpg) no-repeat;
                position: relative;
            }
            #clock div {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                
            }
            #hour {
                background: url(images/hour.png) no-repeat center center;
            }
            #minute {
                background: url(images/minute.png) no-repeat center center;
            }
            #second {
                background: url(images/second.png) no-repeat center center;
            }
    
        </style>
    </head>
    <body>
    <div id="clock">
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
    	<script type="text/javascript">
    		var hour = document.getElementById("hour");
    		var second = document.getElementById("second");
    		var minute = document.getElementById("minute");
    		var ms = 0,s = 0,m = 0,h = 0;
    		setInterval(function(){
    			var date = new Date();
    			ms = date.getMilliseconds();
    			s = date.getSeconds() + ms / 1000;
    			m = date.getMinutes() + s / 60;
    			h = date.getHours() % 12 + m / 60;
    			
    			second.style.transform = "rotate(" + 6 * s + "deg)";
    			minute.style.transform = "rotate(" + 6 * m + "deg)";
    			hour.style.transform = "rotate(" + 30 * h + "deg)";
    			
    			
    		},100)
    	</script>
    </body>
    </html>

[Center]: /images/20210813/41d41de050bd4fa8a3c49a8d159189cb.png
[Center 1]: https://img-blog.csdn.net/20170922204719754?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzk5ODU1MTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: https://img-blog.csdn.net/20170922204746536?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzk5ODU1MTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: /images/20210813/6b96f0e776324e86a1728109e33bc56c.png