jq實現瀑布流效果

標籤：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>鐘錶</title>
<style type="text/css" id="css">
    #clock{width:200px;height:200px;border:2px solid #333333;margin:100px auto;border-radius:50%;position: relative;
            box-shadow: 0 0 10px #FCE300; background:url(1.jpg) no-repeat;background-size: 200px 200px;}
    #clock ul{margin: 0;padding: 0;list-style: none;height:200px;position: relative;}
    #clock ul li{background: #010101;width: 2px;height: 6px;position: absolute;left:99px;top:0;
                -webkit-transform-origin:center 100px;-moz-transform-origin:center 100px;
                -ms-transform-origin:center 100px;-o-transform-origin:center 100px;
                transform-origin:center 100px;}
    #clock ul li:nth-of-type(5n+1){height:10px;}    
    #hour{width: 6px;height: 35px;background: #f00;position: absolute;left: 97px;top:65px;
                -webkit-transform-origin:bottom;-moz-transform-origin:bottom;
                -ms-transform-origin:bottom;-o-transform-origin:bottom;
                transform-origin:bottom;}    
    #min{width: 4px;height: 55px;background: blue;position: absolute;left: 98px;top:45px;
                -webkit-transform-origin:bottom;-moz-transform-origin:bottom;
                -ms-transform-origin:bottom;-o-transform-origin:bottom;
                transform-origin:bottom;}
    #sec{width: 2px;height: 80px;background: orange;position: absolute;left: 99px;top:20px;
                -webkit-transform-origin:bottom;-moz-transform-origin:bottom;
                -ms-transform-origin:bottom;-o-transform-origin:bottom;
                transform-origin:bottom;}    
    .Icon{position: absolute;left: 95px;top:95px;width: 10px;height: 10px;background:#242424;border-radius: 50%;}

</style>
<script type="text/javascript">
    window.onload=function(){
        var oCss = document.getElementById("css");
        var oClock = document.getElementById("clock");
        var oHour = document.getElementById("hour");
        var oMin = document.getElementById("min");
        var oSec = document.getElementById("sec");
        var oUl = oClock.getElementsByTagName(‘ul‘)[0];
        var aLi = oUl.getElementsByTagName(‘li‘);
        var str = "";
        var sCss = "";
        for(var i=0;i<60;i++){
            //var oLi = document.createElement(‘li‘);
            //oUl.appendChild(oLi);
            str+="<li></li>";
            sCss+="#clock ul li:nth-of-type("+(i+1)+"){-webkit-transform:rotate("+6*i+"deg);-moz-transform:rotate("+6*i+"deg);-ms-transform:rotate("+6*i+"deg);-o-transform:rotate("+6*i+"deg);transform:rotate("+6*i+"deg);}";
        }
        oUl.innerHTML = str;
        oCss.innerHTML += sCss;
        setInterval(time,1000);
        time();
        function time(){
            var oDate = new Date();    
            var aSec = oDate.getSeconds();
            var aMin = oDate.getMinutes()+aSec/60;
            var aHour = oDate.getHours()+aMin/60;    
            
            oHour.style.WebkitTransform = "rotate("+aHour*30+"deg)";
            oMin.style.WebkitTransform = "rotate("+aMin*6+"deg)";
            oSec.style.WebkitTransform = "rotate("+aSec*6+"deg)";
            oHour.style.MozTransform = "rotate("+aHour*30+"deg)";
            oMin.style.MozTransform = "rotate("+aMin*6+"deg)";
            oSec.style.MozTransform = "rotate("+aSec*6+"deg)";
            oHour.style.MsTransform = "rotate("+aHour*30+"deg)";
            oMin.style.MsTransform = "rotate("+aMin*6+"deg)";
            oSec.style.MsTransform = "rotate("+aSec*6+"deg)";
            oHour.style.OTransform = "rotate("+aHour*30+"deg)";
            oMin.style.OTransform = "rotate("+aMin*6+"deg)";
            oSec.style.OTransform = "rotate("+aSec*6+"deg)";
            oHour.style.transform = "rotate("+aHour*30+"deg)";
            oMin.style.transform = "rotate("+aMin*6+"deg)";
            oSec.style.transform = "rotate("+aSec*6+"deg)";
        }
        
    }
</script>
</head>
<body>
    <div id="clock">
        <ul>
            
        </ul>

        <div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>

        <div class="Icon"></div>

    </div>
</body>
</html>

jq實現瀑布流效果