时钟



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

你可能感兴趣的:(html代码,html5)