javascript 简易时钟

来源：互联网发布：java面对对象编辑：程序博客网时间：2024/06/13 02:16

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

背景图片如下：

时针分针秒针

<!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>

阅读全文

0 0