时钟

来源：互联网发布：mac ps如何导入字体编辑：程序博客网时间：2024/05/23 12:54
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        body{            background-color: #ececec;        }       .container{           position: relative;           width:800px;           height:600px;           margin:100px auto;       }       .plate{           width:500px;           height:500px;           margin:50px auto;       }       .container .hour{           position: absolute;           top:0;           left:150px;           width:500px;           height:500px;           background:url(img/s.png) no-repeat 0 0 / 500px 500px;       }       .container .minute{           position: absolute;           top:1px;           left:150px;           width:500px;           height:500px;           background:url(img/f.png) no-repeat 0 0 / 500px 500px;       }       .container .second{           position: absolute;           top:0;           left:150px;           width:500px;           height:500px;           background:url(img/m.png) no-repeat 0 0 / 500px 500px;       }    </style></head><body><div class="container">    <div class="plate">        <img src="img/plate.png" alt=""/>        <div class="hour"></div>        <div class="minute"></div>        <div class="second"></div>    </div></div><script src="js/jquery-1.8.3.min.js"></script><script>    function setTime() {        var date = new Date;        var hour = date.getHours();        var minute = date.getMinutes();        var second = date.getSeconds();        if(hour>=12)hour=hour-12;        hour=hour+minute/60;//        minute=minute+second/60;        $(".hour").css('transform', 'rotate(' + hour*30  + 'deg)');        $(".minute").css('transform', 'rotate(' + minute*6 + 'deg)');        $(".second").css('transform', 'rotate(' + second*6 + 'deg)');    }    setTime();    setInterval(setTime, 1000);  //一秒循环一次</script></body></html>
阅读全文
0 0